目录
序言
例如，上一篇文章介绍了三个术语：什么是 Babel？什么是 Webpack？什么是 Npm？
本职位将以实践的方式来构建一个 React 项目，包括建筑环境、创建一个 React 项目、启动项目，如何使用 React 扩展工具包。
建筑环境
在构建 React 应用程序时，您需要先从互联网上下载所有工具，这些工具已在之前的文章中介绍过。
Node.js
Node.js 内置的 npm 服务允许我们快速下载 React 软件包和其他软件包。
安装 React 工具 创建 React App 是在计算机上安装 JavaScript 说明的过程。
过来官方网站屏幕右上角可以选择语言，界面支持繁体中文。
- LTS：稳定版本，由官方长期维护，通常持续 30 个月以上。
- Current：具有最新功能，不太稳定
如果要检查安装是否成功，无论 Window、MacOS 还是 Linux，都可以打开终端并输入以下命令来了解安装是否完成。
node -v
建立React专案
模式 1：官方 CRA 指令设置
设置好 Node 环境后，就可以构建第一个 React 项目了。React 网站虽然还有其他方法可以快速建立项目，但也有其他方法可以快速建立项目。
成功安装 Node.js 后，在终端中输入以下命令，创建 my-app 文件夹，并在相应位置放置相应文件和文件夹。
npx create-react-app my-app
这是文件夹结构，在 my-app 文件夹中有三个文件夹和三个文件。
node_modules 文件夹将放置所有软件包，通过 npm install 安装的软件包也将放置在该文件夹中。package.json 将对该项目进行一些配置。
/my-app
-/public
-/node_modules
-/src
-package.json
-README.md
-package-lock.json
启动项目
项目建成后如何启动？
可以通过以下两行命令激活它：第一行命令是进入 my-app 文件夹，第二行命令是启动项目。
cd my-app
npm start
如果成功实施运行此图像意味着我们已经成功构建了第一个 React 项目。
方法 2：自建环境
你也可以使用自建环境，包括上一篇文章中介绍的 Webpack | Npm | Babel，整个过程就是使用命令方法，添加所需的功能并构建。
什么是 Webpack？
Webpack 是一种模块化打包工具，其主要功能是将项目中的各种文件（包括 JavaScript、CSS、LESS、SCSS、JSX 等）集成到一个或多个最终文件中。这种模块化打包有助于提高开发效率，尤其是在大型项目中，我们可以将功能模块化拆分，从而实现代码重用和测试的便利性。
Webpack 不仅仅是一个打包工具，它还提供了许多强大的功能，例如代码分割（Code Splitting），它可以将代码分割成多个区块，只在需要时加载，从而加快页面加载速度。同时，Webpack 的核心理念之一模块化（Modulize）通过将大型功能拆分成较小的文件和函数，使代码的结构更易于维护和测试。
什么是 Npm？
Npm 是世界上最大的软件注册中心。各大洲的开源开发者都使用 npm 共享和借用软件包，许多公司也使用 npm 管理私人开发。
Npm 全称为 Node Package Manager，我们可以使用 Node 中的 npm cli 工具来安装和管理软件包。
例如，如果你想使用 React 套件，只需在终端输入命令，npm 就会自动在注册表中找到 react 前端框架，并将其下载到 node_modules 文件夹中。
什么是 Babel？
Babel 是一款不可或缺的工具。它的主要功能是将最新版本的 JavaScript 语法（尤其是 ECMAScript 6 (ES6) 语法）转换为浏览器可以理解和运行的旧版本 JavaScript。
ES6 引入了许多强大的功能，如箭头函数、模板字符串和解构值，但由于浏览器支持的差异，我们需要使用 Babel 进行编译，以确保跨浏览器兼容性。
在开发使用 JSX（描述 React 组件结构的 JavaScript 语法扩展）的 React 应用程序时，也需要使用 Babel 进行编译。它使在 JavaScript 中编写类似 HTML 的标记成为可能，但浏览器无法直接运行 JSX，因此需要使用 Babel 将其转换为纯 JavaScript。
React 构建补充
安装 React 开发工具（浏览器扩展）
React Developer Tools 是 Google Chrome 浏览器的一个扩展。 React 开发人员工具然后安装它（点击右上角的 "添加到 CHROME"），最后确保它已在浏览器中启用。
这可用于查找错误信息，并观察 React 应用程序在网络上执行 JavaScript 的部分日志。
安装和配置 React 开发工具
这里使用的开发工具是 VS Code，它是一个免费的编辑器，可以连接到 Visual Studio Code 下载并安装适合您计算机操作系统的版本。
VS Code 安装后并不是一个功能齐全的工具，它需要安装一些额外的扩展才能开发 React。
结论
React 白话运动已经有将近十年的历史了，而我们现在才开始构建和启动 React 项目。
我之所以这么晚才在启动项目上做这个教程，是因为在学习 React 之前，有很多概念是必须要了解的，包括 npm、node.js、webpack 和 babel，这些都是你将来可能会用到的工具。
今后的文章将继续介绍 React 相关知识和技术。
如果您有任何建议或问题，欢迎留言！
React 白話文運動系列
Babel & Webpack & NPM - React 白皮书活动 07
JavaScript 异步等待 - React 白话运动 03
简体中文 
繁體中文 
English 
한국어 
日本語 
Español