Los Códigos QR tienen mucha popularidad en estos días al igual que la librería de JS React, es por ello que te enseño: Cómo generar Códigos QR en React usando react-qr-code.
Lo primero que necesitamos es crear un proyecto, para ello ejecutamos en la consola:
# usando yarn
yarn global add create-react-app
create-react-app qr-code-react
cd qr-code-react
yarn start
# usando npm
npm install -g create-react-app
create-react-app qr-code-react
cd qr-code-react
npm start
Luego necesitamos instalar la librería react-qr-code desde la consola.
#usando yarn
yarn add react-qr-code
#usando yarn
npm install react-qr-code
Luego corremos nuevamente el proyecto. Ahora vamos a modificar el archivo App.js
situado en la carpetasrc
. Y lo vamos a dejar como sigue:
import QRCode from "react-qr-code";
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<QRCode value="Hola Mundo" size={256} bgColor="#282c34" fgColor="#fff" level="H" />
</header>
</div>
);
}
export default App;
Como podrás apreciar importamos QRCode de la librería que acabamos de instalar y si vas al navegador observarás el código qr creado.
Ahora, ¿qué significa? <QRCode value="Hola Mundo" size={256} bgColor="#282c34" fgColor="#fff" level="H" />
. Pues simplemente le estamos pasando propiedades al componente.
Puedes ver como queda la aplicación final con algunas modificaciones en http://qr-code-generator.netlify.app/.
Tienes todo el código disponible en https://github.com/raulcr98/qr-generator-react.
Recomendado