Cree una aplicación generadora de códigos QR usando ReactJS

Introducción: en este artículo, vamos a crear una aplicación sencilla para generar códigos QR. El código QR es un código de barras bidimensional que se puede leer en los teléfonos inteligentes. Permite la codificación de más de 4000 caracteres en una barra de doble código de barras. Los códigos QR se pueden usar para mostrar texto a un usuario, abrir una URL, mantener contactos en una libreta de direcciones o escribir mensajes.

Requisitos previos: Los requisitos previos para este proyecto son:

• Reaccionar
• Componentes funcionales
• Ganchos de reacción
• JavaScript ES6

Enfoque: Nuestra aplicación contiene dos secciones. En una sección, tomaremos las entradas del usuario, como el texto para codificar, el tamaño del código QR, el color de fondo del código QR, y almacenaremos todo eso dentro de las variables de estado. Después de eso, construiremos la string API requerida para obtener la imagen del código QR. En la otra sección, mostraremos el código QR requerido 

Creando una aplicación React:

Paso 1: cree una aplicación de reacción escribiendo el siguiente comando en la terminal.

npx create-react-app qrcode-gen

Paso 2: Ahora, vaya a la carpeta del proyecto, es decir, qrcode.gen, ejecutando el siguiente comando.

cd qrcode-gen

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: aquí App.js es el único componente predeterminado de nuestra aplicación que contiene toda la lógica. Usaremos una API gratuita de código abierto (no requiere autenticación) llamada ‘create-qr-code’ para obtener la imagen del código QR requerida. También tendremos un botón para descargar la imagen del código QR. 

Ahora escriba el siguiente código en el archivo App.js.

import { useEffect, useState } from 'react';
import './App.css';
  
function App() {
  const [temp, setTemp] = useState("");
  const [word, setWord] = useState("");
  const [size, setSize] = useState(400);
  const [bgColor, setBgColor] = useState("ffffff");
  const [qrCode, setQrCode] = useState("");
  
  // Changing the URL only when the user
  // changes the input
  useEffect(() => {
    setQrCode
 (`http://api.qrserver.com/v1/create-qr-code/?data=${word}!&size=${size}x${size}&bgcolor=${bgColor}`);
  }, [word, size, bgColor]);
  
  // Updating the input word when user
  // click on the generate button
  function handleClick() {
    setWord(temp);
  }
  
  return (
    <div className="App">
      <h1>QR Code Generator</h1>
      <div className="input-box">
        <div className="gen">
          <input type="text" onChange={
            (e) => {setTemp(e.target.value)}}
            placeholder="Enter text to encode" />
          <button className="button" 
            onClick={handleClick}>
            Generate
          </button>
        </div>
        <div className="extra">
          <h5>Background Color:</h5>
          <input type="color" onChange={(e) => 
          { setBgColor(e.target.value.substring(1)) }} />
          <h5>Dimension:</h5>
          <input type="range" min="200" max="600"
           value={size} onChange={(e) => 
           {setSize(e.target.value)}} />
        </div>
      </div>
      <div className="output-box">
        <img src={qrCode} alt="" />
        <a href={qrCode} download="QRCode">
          <button type="button">Download</button>
        </a>
      </div>
    </div>
  );
}
  
export default App;

Ahora, editemos el archivo llamado App.css para diseñar nuestra aplicación.

@import url('http://fonts.cdnfonts.com/css/lilly');
.App{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
  padding-top: 30px;
}
h1{
  font-family: 'Lilly', sans-serif;
  font-size: 50px;
}
.gen input{
  height: 35px;
  width: 250px;
  font-size: 20px;
  padding-left: 5px;
}
button{
  position: relative;
  height: 38px;
  width: 100px;
  top: -2px;
  font-size: 18px;
  border: none;
  color: whitesmoke;
  background-color: forestgreen;
  box-shadow: 2px 2px 5px rgb(74, 182, 74);
  cursor: pointer;
}
button:active{
  box-shadow: none;
}
.extra{
  padding-top: 20px;
  display: flex;
  justify-content: space-around;
  gap: 10px;
}
.output-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: