Як створити генератор QR-кодів у React

генератор QR-кодів

QR-коди стали невід’ємною частиною нашого повсякденного життя, надаючи зручний спосіб обміну інформацією. Будь то URL сайту, контактні дані чи інші відомості, QR-коди спрощують процес обміну. У цьому блозі буде детально описано процес створення генератора QR-кодів за допомогою React крок за кроком.

Чому варто використовувати React для генератора QR-кодів?

React — це популярна JavaScript бібліотека для створення користувацьких інтерфейсів. Її компонентна архітектура дозволяє створювати багаторазово використовуваний і модульний код, що робить її відмінним вибором для розробки генератора QR-кодів. Крім того, велика кількість бібліотек в екосистемі React спрощує завдання, такі як генерація QR-кодів.

Попередні вимоги

Перед початком роботи переконайтесь, що на вашій системі встановлено:

• Node.js та npm
• Редактор коду, наприклад, Visual Studio Code
• Базові знання React

Крок 1: Налаштування проекту React

Перший крок — створити новий React додаток. Це можна зробити за допомогою Create React App:

npx create-react-app qr-code-generator  
cd qr-code-generator

Після створення додатку необхідно встановити залежності, потрібні для генерації QR-кодів.

Крок 2: Встановлення необхідної бібліотеки

Для генерації QR-кодів буде використано популярну бібліотеку qrcode.react. Її можна встановити наступною командою:

npm install qrcode.react

Ця бібліотека надає простий компонент `` , який буде використаний пізніше.

Крок 3: Створення компонента для генератора QR-кодів

Компонент для генерації QR-кодів буде створено. Усередині папки src можна додати новий файл з ім'ям QRCodeGenerator.js.

import React, { useState } from "react";  
import { QRCodeSVG } from "qrcode.react";  

const QRCodeGenerator = () => {  
 const [inputText, setInputText] = useState("");  

 const handleChange = (event) => {  
 setInputText(event.target.value);  
 };  

 return (  
   <div>  
     <h2>Генератор QR-кодів</h2>  
     <input type="text" value={inputText} onChange={handleChange} placeholder="Введіть текст для генерації QR-коду" />  
     {inputText && <QRCodeSVG value={inputText} />}  
   </div>  
 );   
};  

export default QRCodeGenerator; 

У цьому компоненті використовується поле вводу для захоплення тексту від користувача. Компонент `з бібліотекиqrcode.react` відображається щоразу, коли користувач вводить текст.

Крок 4: Додавання компонента в додаток

Для відображення генератора QR-кодів необхідно імпортувати компонент QRCodeGenerator та відобразити його в файлі App.js:

import React from 'react';  
import QRCodeGenerator from "./components/QRCode";  

function App() {  
  return (  
    <div className="App">  
      <QRCodeGenerator />  
    </div>  
  );  
}  

export default App;

Після цих змін додаток можна запустити за допомогою:

npm start

Відкривши додаток у браузері, ви побачите генератор QR-кодів. Користувачі можуть ввести текст у поле вводу, щоб динамічно генерувати QR-код.

Крок 5: Додавання стилів (необов'язково)

Для кращого вигляду можна додати деякі стилі. Усередині файлу App.css стилі можна оновити, щоб покращити вигляд додатку:

.App {  
  font-family: Arial, sans-serif;  
  text-align: center;  
  padding: 20px;  
}  

input {  
  border: 1px solid #ccc;  
  border-radius: 4px;  
  outline: none;  
}  

input:focus {  
  border-color: #007bff;  
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);  
} 

Крок 6: Розгортання додатку

Після завершення створення генератора QR-кодів, його можна розгорнути. Платформи, такі як Vercel або Netlify, роблять процес розгортання дуже простим.
Проект можна зібрати за допомогою:

npm run build

Папка build міститиме файли, готові до продакшн середовища, які можна завантажити на хостинг-платформу.

генератор QR-кодів utilshub.com

Висновок

Процес створення генератора QR-кодів у React був описаний. За допомогою бібліотеки qrcode.react, створення QR-кодів стає простим завданням. Можливість налаштовувати та розширювати цей додаток робить його універсальним інструментом для кожного розробника. Для тих, хто шукає готове рішення, можна ознайомитись з UtilsHub QR Code Generator. Це надає зручний інтерфейс для швидкої та ефективної генерації QR-кодів. Бажаю вдалого кодування!

Перекладено з: How to Create a QR Code Generator in React