如何使用React创建QR code生成器

​译者 | 赵青窕,审校 | 孙淑娟,创建二维码生成器(Quick Response Code Generator)就是将图像格式转换为文本格式进行转换。二维码(QR code)是利用图像数据来代表文本信息，它有很多应用场景，如餐厅菜单，音乐会门票，在线日历邀请、支付等场景。,在本教程中，你将学习如何使用JavaScript库React创建二维码。React为开发人员提供了重用组件的方式，使得构建前端应用程序变得轻而易举。,要充分理解本文，你需要具备以下知识和环境：,首先，打开终端并运行以下命令:,上面的命令附带了必要的文件，并安装了创建React应用程序所需的软件包。,接下来，使用下面的命令切换到自己构建的项目目录下，并运行开发服务器(Development Server)，从而可以访问http://localhost:3000，以浏览器的形式预览应用。,最后，让我们使用下面的命令安装创建二维码生成器所需的依赖库:,qrcode.react：一个React组件，用于生成二维码，并将其呈现给DOM。,二维码生成器的创建将从创建包含二维码结构的文件和组件开始。在src目录中，创建一个名为components的文件夹，并在文件夹中创建一个名为QrCode.js的文件。下面是对应的代码实现方式：,上面的代码片段做了如下操作：,在src文件夹中，创建样式表(stylessheet)styles.css，该部分负责应用程序的显示效果, 下面是对应的代码实现方式：,接下来，在app的入口app .js中导入QrCode.js文件和样式表：,完成上面步骤后，app显示如下图所示:,,用户可以选择下载生成的二维码，使得它可以应用在各种各样的用例中。从打二维码的打印到将其嵌入网站，这样的例子不胜枚举。,回到components/QrCode.js文件，让我们更新代码库，以使用refs来访问文档对象模型节点（DOM Node）。,现在，让我们更新QrCode.js文件中的downloadQRCode函数，以便能够单击下载二维码按钮并将下载后的文件保存为图像文件。,在downloadQRCode函数中，主要完成了以下任务：,最后的完整代码如下：,上述代码对应的应用程序如下图所示：,,本教程描述了创建二维码生成器的过程，以及如何下载以供后续使用。,参考资料：,二维码：,https://github.com/zpao/qrcode.react?ref=hackernoon.com,锚元素(The anchor element)：,https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?ref=hackernoon.com,二维码简介：,https://en.wikipedia.org/wiki/QR_code?ref=hackernoon.com,https://hackernoon.com/how-to-build-a-qr-code-generator-in-react,赵青窕，51CTO社区编辑，从事多年驱动开发。​