React 是一种广泛应用于前端开发的 JavaScript 库，能够更加便捷、高效地构建 Web 应用。这篇文章将引导你从头到尾搭建一个 React 项目，通过这个过程，你可以学到如何使用 React 脚手架搭建项目，从而更加深入的学习和掌握 React 技术。
为什么要使用 React 脚手架
在开始之前，我们先需要了解一下为什么要使用 React 脚手架。React 脚手架是一个预设的脚手架环境，能够省去我们很多配置和安装步骤，让我们专注于编写应用程序的业务逻辑。React 脚手架能实现以下优势：
- 快速搭建项目。
- 自动化构建，包括打包、压缩和发布等。
- 统一的开发规范，提高团队协作的效率。
很多开发者在使用 React 时，都会选择使用脚手架的方式。这里我们将选用 Create React App 这款著名的脚手架工具。
Create React App 安装
在开始之前，我们需要先安装 Node.js 如果你的电脑上还没有安装的话，可以去 Node.js 官网 下载.
安装完成后，你可以在命令行中使用 npm 命令来安装 Create React App。打开终端窗口，输入以下命令：
npm install -g create-react-app
在安装完成后，我们就可以使用 create-react-app 命令来创建我们的 React 项目：
create-react-app my-app
通过上述命令我们就创建好了一个名为 my-app 的 React 项目，其中的内容即 Create React App 预设的项目基础内容和目录结构。
目录结构
让我们来看看创建好的 React 项目的目录结构。
-- -------------------- ---- -------
-------
--- ---------
--- -------------
--- ------------
--- -------
- --- -----------
- --- ----------
- --- -------------
--- ----
--- -------
--- ------
--- -----------
--- ---------
--- --------
--- --------
--- ----------------- README.md：项目说明文件。
- node_modules：存储项目依赖库的相关文件，该目录可以使用 npm 命令进行管理。
- package.json：记录项目的元数据信息，如项目名称、作者、版本号等。该文件还可以用来管理项目的依赖包版本，还可以配置 npm 的脚本来进行构建等工作。
- public：公共资源目录，包括网页入口文件 index.html 以及 favicon.ico 和 manifest.json 等文件。
- src：项目源代码目录，存放 React 组件、js、css 等文件。其中，index.js 文件是程序的入口。
运行项目
Create React App 给我们预设了很多的工作，让我们能够很快的启动项目。在项目的根目录下运行如下命令即可运行项目：
cd my-app npm start
这时候，打开 http://localhost:3000/ 即可访问到我们的 React 程序了。
在启动项目的过程中，Create React App 还提供了自动刷新的功能。这个过程是通过 webpack-dev-server 实现的，能够检测项目源代码的变化并自动重新加载网页。当我们修改源代码后，保存文件，网页会自动重载，从而使我们的修改生效。
创建自己的 React 组件
接下来我们创建一个简单的组件。在项目的 src 目录下新建一个名为 HelloWorld.js 的文件。文件的内容如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---------- ------- --------------- -
-------- -
------ -
---- -----------------------
---------- -----------------------
------
--
-
-
------ ------- -----------在上述代码中，我们定义了一个名为 HelloWorld 的 React 组件，组件渲染出一个带有标题的 div 元素。该 div 元素显示的标题为 Hello, {this.props.name}!，其中this.props.name的值由组件的属性决定。
接下来，我们在 src/index.js 文件中包括这个组件。修改 src/index.js 文件的内容，增加如下内容：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ -------------- ------ ---------- ---- --------------- ------ - -- ------------- ---- ------------------ --------------------------- ------------ --- --------------------------------- ---------------------------
在这段代码中，我们导入了 HelloWorld 组件，并通过 ReactDOM.render 方法将组件渲染到 React 程序的根节点上。在此，我们将 name 的属性传递给 HelloWorld 组件，其值为 React。
运行项目，并访问 http://localhost:3000/ 。如果出现 Hello, React! 的字样，那么这个组件就已经正常渲染出来了。
总结
通过本文的介绍，我们学习了如何使用 Create React App 快速搭建一个 React 项目，了解了 React 项目的基本目录结构和组件编写与使用，希望能够对大家掌握 React 开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64866a2448841e98944fa7cb