Binary Coffee

Cómo crear Códigos QR con React

react
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**](https://www.npmjs.com/package/react-qr-code). <iframe width="560" height="315" src="https://www.youtube.com/embed/hw_D1PXGqM8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 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 carpeta`src`. 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](localhost:3000) 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. * value: Es el texto que se va a codificar en el QR. * size: El tama√Īo que va a tener tanto en ancho como en altura. * bgColor: El color de fondo. * fgColor: El color de relleno. * level: La capacidad de podel leer el contenido del QR aunque tenga una parte da√Īada. * Level L (Low): 7% puede ser restaurado. * Level M (Medium): 15% puede ser restaurad0. * Level Q (Quartile): 25% puede ser restaurado. * Level H (High): 30% puede ser restaurado. 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 * [Aprende a deplegar un proyecto en react a Netlify](https://binary-coffee.dev/post/despliega-react-app-en-netlify-gratis)
Opiniones