使用 React 构建二维码生成器

golang学习网今天将给大家带来《使用 React 构建二维码生成器》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

介绍

在本教程中，我们将使用 react 创建一个 qr 代码生成器 web 应用程序。对于那些希望了解集成 api、管理状态和生成动态内容的人来说，该项目是理想的选择。

项目概况

二维码生成器允许用户通过输入内容、调整大小和选择背景颜色来创建二维码。它利用公共 api 生成 qr 码并将其显示在屏幕上。用户可以出于各种目的生成、查看和下载二维码。

特征

• 内容输入：用户可以输入想要编码成二维码的内容。
• 动态大小：动态调整二维码的大小。
• 背景颜色自定义：选择二维码的背景颜色。
• api 集成：从公共二维码生成 api 获取二维码。
• 下载选项：允许用户下载生成的二维码。

使用的技术

• react：用于构建用户界面和管理组件状态。
• css：用于设计应用程序的样式。
• javascript：用于处理 api 请求和应用程序逻辑。

项目结构

项目组织如下：

├── public
├── src
│   ├── components
│   │   ├── qrcode.jsx
│   ├── app.jsx
│   ├── app.css
│   ├── index.js
│   └── index.css
├── package.json
└── readme.md

关键部件

• qrcode.jsx：管理qr码生成和显示。
• app.jsx：渲染主布局和 qrcode 组件。

代码说明

二维码组件

qrcode 组件处理 qr 码生成逻辑并管理生成的 qr 码的显示。

import { usestate } from "react";
import axios from "axios";

const qrcode = () => {
  const [content, setcontent] = usestate("");
  const [size, setsize] = usestate(300);
  const [bgcolor, setbgcolor] = usestate("ffffff");
  const [qrcode, setqrcode] = usestate(
    "https://api.qrserver.com/v1/create-qr-code/?data=qr%20code%20generator&size=300x300&bgcolor=ffffff"
  );

  const generateqr = () => {
    axios
      .get(
        `https://api.qrserver.com/v1/create-qr-code/?data=${content}&size=${size}x${size}&bgcolor=${bgcolor}`
      )
      .then((res) => {
        setqrcode(res.config.url);
      });
  };

  return (
    <div classname="qr-code">
      <div classname="input-box">
        <div classname="input-container">
          <input
            type="text"
            value={content}
            onchange={(e) => setcontent(e.target.value)}
            placeholder="enter content"
          />
        </div>

        <div classname="input-color">
          <h4>background color:</h4>
          <input
            type="color"
            value={`#${bgcolor}`}
            onchange={(e) => setbgcolor(e.target.value.substring(1))}
          />
        </div>
        <div classname="input-dimension">
          <h4>dimension:</h4>
          <input
            type="range"
            min="200"
            max="600"
            value={size}
            onchange={(e) => setsize(e.target.value)}
          />
        </div>
        <button classname="generate-btn" onclick={generateqr}>
          generate qr
        </button>
      </div>
      <div classname="output-box">
        <div classname="qr-image">
          {qrcode && <img src={qrcode} alt="generated qr code" />}
        </div>
        {qrcode && (
          <div classname="download-btn">
            <a href={qrcode} download="qrcode.png">
              <button type="button">download</button>
            </a>
          </div>
        )}
      </div>
    </div>
  );
};

export default qrcode;

该组件管理 qr 码内容、大小、背景颜色和生成的 qr 码 url 的状态。它从 api 获取 qr 码并显示它们。

应用程序组件

app 组件渲染 qrcode 组件并为布局提供页眉和页脚。

import qrcode from './components/qrcode'
import "./app.css"

const app = () => {
  return (
    <div classname='app'>
      <div classname="header">
        <h1>qr code generator</h1>
      </div>
      <qrcode />
      <div classname="footer">
        <p>made with ❤️ by abhishek gurjar</p>
      </div>
    </div>
  );
}

export default app;

该组件设置整体布局并包含 qr 代码生成器。

css 样式

css 设计应用程序以确保界面干净且用户友好。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: arial, sans-serif;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background-color: #134b70;
  color: white;
}

.header {
  width: 100%;
  text-align: center;
}

.header h1 {
  font-size: 30px;
}

.qr-code {
  background-color: #000000;
  display: flex;
  align-items: flex-start;
  padding: 60px;
  gap: 100px;
  border-radius: 10px;
  font-family: arial, sans-serif;
  box-shadow: rgba(231, 231, 231, 0.35) 0px 5px 15px;
}

.input-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.input-container,
.input-color,
.input-dimension {
  margin: 10px 0;
  gap: 40px;
}

input[type="text"] {
  padding: 10px;
  font-size: 16px;
  width: 450px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input[type="color"] {
  padding: 5px;
  width: 450px;
}

input[type="range"] {
  width: 450px;
}

.generate-btn {
  padding: 15px 40px;
  width: 450px;
  font-size: 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 50px;
}

.generate-btn:hover {
  background-color: #45a049;
}

.output-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-image img {
  border: 1px solid #000000;
}

.download-btn {
  margin-top: 20px;
}

.download-btn button {
  width: 300px;
  padding: 12px 40px;
  font-size: 16px;
  background-color: #1171b1;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.download-btn button:hover {
  background-color: #134b70;
}

.footer {
  width: 100%;
  padding: 20px;
  text-align: center;
}

样式确保布局简洁，具有用户友好的视觉效果和响应式设计。

安装与使用

要开始此项目，请克隆存储库并安装依赖项：

git clone https://github.com/abhishekgurjar-in/qr_code_generator.git
cd qr-code-generator
npm install
npm start

这将启动开发服务器，并且应用程序将在 http://localhost:3000 上运行。

现场演示

在这里查看二维码生成器的现场演示。

结论

qr code generator 项目是如何在 react 中集成 api 和管理动态内容的实际示例。它提供了一个简单而有效的工具来生成二维码，具有用户友好的界面。

制作人员

• 灵感：该项目的灵感来自于为各种应用程序轻松生成二维码的需求。

作者

abhishek gurjar 是一位 web 开发人员，热衷于创建交互式且有用的 web 应用程序。您可以在 github 上关注他的工作。

今天关于《使用 React 构建二维码生成器》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！