React 是一个使用 JavaScript 构建用户界面的开源库。它由 Facebook 开发，目的是提供一种高效、灵活且易于维护的方式来构建单页应用程序或动态网站。
在本文中，我们将介绍如何使用 create-react-app 工具来快速创建一个 React 项目。create-react-app 是一个官方提供的命令行工具，可以自动配置一个现代化的前端开发环境，包括 webpack、Babel、ESLint 等。使用它可以避免繁琐的配置步骤，让开发者更专注于业务逻辑的实现。
准备工作
在使用 create-react-app 之前，我们需要先安装 Node.js 和 npm。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，npm 是 Node.js 的包管理器，用于安装和管理第三方模块。
安装 Node.js 和 npm 可以通过官方网站下载安装包，也可以使用包管理器进行安装。在本文中，我们以 macOS 系统为例，使用 Homebrew 包管理器进行安装：
---- ------- ----
安装完成后，可以使用以下命令检查是否安装成功：
---- -- --- --
创建项目
使用 create-react-app 命令创建一个新的 React 项目非常简单，只需要执行以下命令：
--- ---------------- ------
其中，my-app 是项目的名称，可以根据实际情况进行修改。npx 是 npm 5.2+ 版本中提供的一个命令，用于执行本地安装的 Node.js 模块。如果你的 npm 版本低于 5.2，可以使用以下命令创建项目：
--- ------- -- ---------------- ---------------- ------
执行完命令后，create-react-app 会自动下载并安装相关的依赖包，整个过程可能需要一些时间。安装完成后，进入项目目录：
-- ------
运行项目
使用 create-react-app 创建的 React 项目已经自带了一个开发服务器，可以使用以下命令启动项目：
--- -----
执行完命令后，可以在浏览器中访问 http://localhost:3000 查看项目运行效果。此时，我们可以看到一个简单的 React 应用程序，页面上显示了 "Welcome to React" 的文本。
项目结构
使用 create-react-app 创建的 React 项目的目录结构如下：
-------
---------
-------------
------------
----------
-------
----------
-----------
----
-------
------
-----------
---------
--------
--------
----------------其中，public 目录中的 index.html 是应用程序的入口文件，src 目录中包含了所有的应用程序代码。我们可以打开 src/App.js 文件，查看应用程序的代码实现。
示例代码
下面是一个简单的 React 组件，它显示了一个包含 "Hello, World!" 文本的页面：
------ ----- ---- --------
-------- ----- -
------ -
-----
---------- -----------
------
--
-
------ ------- ----其中，<div> 和 <h1> 是 JSX 语法中的元素，它们将被转换为 JavaScript 代码。在 JSX 中，我们可以使用 JavaScript 表达式来动态生成元素，例如：
-------- ----- -
----- ---- - --------
------ -
-----
---------- ------------
------
--
-在上面的代码中，name 变量的值将会被动态地插入到页面中。
总结
本文介绍了如何使用 create-react-app 工具快速创建一个 React 项目，以及项目的基本结构和运行方式。希望本文能够帮助初学者快速入门 React，并且了解到如何使用 create-react-app 工具来提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f978b4d10417a22254da60