ReactJS 安装和设置教程
ReactJS 安装和设置教程
React 是目前最流行的用于构建 UI 的 JavaScript 库之一——在可预见的未来，这种趋势似乎将持续下去。在本文中，我们将专注于快速、轻松地设置 React 的方法，以便我们可以直接开始编码！
为什么反应？
对于初学者来说，React 允许我们通过使用 Virtual DOM 来构建极其快速的 Web 应用程序——它本质上只呈现它需要的东西。为直接使用 DOM .
React 还提倡基于组件的工作流程，这意味着您的 UI 本质上只是组件的集合。这带来了奇妙的建筑体验！由于您将使用模块化进行构建，因此您的代码将处于整洁的独立块中。它在团队工作时也非常有用，个人可以在项目的一部分上工作，同时仍然可以集体工作以完成项目。
安装和设置
有很多方法可以启动和运行 React。首先，我们来看看 CodeSandbox 和 CodePen。如果您想立即开始使用代码，这是一个不错的方法！
然后，我们将专注于使用 Create React App 启动一个 React 项目——它为您的项目提供了一个很棒的起点，而无需花时间设置构建环境。
在 CodeSandbox 中做出反应
CodeSandBox 是一个在线代码编辑器，您可以使用它来立即启动和运行 React 项目。
去 密码箱 并单击反应。
立即，您将处于已配置了 React 环境中 创建反应应用 结构体。我们将在本文中进一步研究这种结构！如果您想在不设置本地安装的情况下开始编码，这是一个很好的方法！传输、捆绑和依赖管理等任务都是自动化的，您可以轻松共享您一直在处理的任何内容的链接！
在 CodePen 中反应
CodeSandBox 的替代方案是 代码笔 .许多开发人员使用 CodePen 通过为快速代码演示创建“笔”来展示他们的工作，或者在涉及多个文件时创建“项目”。 CodeSandbox 对于使用 React 来说绝对是更丰富的功能，但是，CodePen 也是一个很好的解决方案。
我在这里创建了一个 CodePen React 启动器：
codepen.io/rembertdesigns/pen/VwxLoNQ
创建反应应用
创建反应应用 是一个工具（由 Facebook 的开发人员构建），它可以在构建 React 应用程序时为您提供一个巨大的开端。它处理所有的配置，所以你不需要知道任何 Babel 或 Webpack。您只需运行初始安装，您将立即进入本地开发环境！
使用 Create React App 安装
我们需要做的就是打开我们的终端，然后运行以下命令：
npx 创建反应应用程序<app-name>
在哪里 <app-name> 是，当然，你的应用程序的名称！
我用 npx 因为它将下载并运行 Node.js 命令而无需安装它们。如果你没有安装 Node，你可以 在这里下载 .
所以继续运行上面的命令开始安装！
安装可能需要几分钟才能完成。现在它正在安装构建您的项目所需的所有依赖项，并且它还在生成您的初始项目结构。
成功！现在您可以打开您的项目文件夹并查看创建的文件结构。
此外，还为您创建了一个 Git 存储库。并且添加了几个命令 包.json 文件：
npmstart 启动开发服务器，包括在您进行编辑时自动重新加载页面npmrun build 将应用程序捆绑到静态文件中以用于生产到构建文件夹中npmtest 使用 Jest 启动测试运行器npm运行弹出将您的应用程序从 create-react-app 设置中弹出，这使您可以自定义项目配置
启动您的 Create React 应用程序
现在，让我们启动我们的本地服务器！从您的应用程序文件夹中，运行：
npm 开始
您的应用程序将在浏览器中启动 本地主机：3000 .
现在你完成了！每次你开始一个新项目时 创建反应应用 ，您将拥有最新版本的 React、React-DOM 和 React-Scripts。现在让我们简要介绍一下它的一些功能 创建反应应用 .
创建反应应用程序功能
正如您将在生成的 包.json ，有许多命令可用于您的应用程序 - 现在让我们来看看这些。
生产大楼
当需要从开发转移到生产时，您可以通过运行 npm 运行构建 .一个 建造 文件夹将生成包含要在生产服务器上使用的所有静态文件。
这 建造 命令本身会将您的 React 代码转换为浏览器可以理解的代码（使用 Babel）。它还将通过将所有 JavaScript 文件捆绑到一个文件中来优化文件以获得最佳性能，该文件将被缩小以减少加载时间。
测试你的应用
包括在 创建反应应用 是 是 ，它允许你通过运行来测试你的代码 npm 测试 .它将以类似的方式启动 npm 开始 因为它会在您每次进行更改时重新运行您的测试。
如果您还没有运行单元测试，您可以安全地将其归档为“现在很高兴知道”。对于那些对使用 Jest 测试组件感兴趣的人，您需要为所需文件添加后缀 .spec.js 或者 .test.js , 或将您的测试文件放在一个 __测试__ 文件夹。 Jest 将为您指定的文件运行测试。
弹出
每当您使用 创建反应应用 ，您的构建设置无法更改，因为它们已在 react-scripts 中预先配置。但是，通过运行 npm 运行弹出 , 你可以完全控制你的 创建反应应用 配置。
配置将被复制到您的应用程序目录中 配置 文件夹，并将您的脚本放入 脚本 文件夹。然后，您可以根据自己的喜好编辑 Webpack、Babel 和 ESLint 配置。
笔记 : 运行弹出是永久性的！仅当您准备好单独行动时才这样做（您知道自己在做什么！）。
错误信息
另一个有用的功能包含在 创建反应应用 是生成到控制台和浏览器窗口的内置错误消息。
拼写错误和语法错误将引发编译错误。如果你有一堆错误，你会得到一个覆盖分解每个。
概括
我们去吧！我们已经了解了如何在 CodeSandbox 和 CodePen 中开始使用 React。我们已经研究了如何设置本地开发环境 创建反应应用 .您无需花费任何时间安装依赖项或配置构建过程——您可以直接开始编码！
结论
如果你喜欢这篇博文，请关注我 推特 我每天都会在这里发布有关技术相关的事情！
让我们联系
最初发表于 https://dev.to 2022 年 9 月 6 日。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
