如何创建一个React项目（官方脚手架 create-react

官方脚手架 create-react-app 基于 webpack 进行打包构建。
好处：

• 在项目初始化的时候，就会把以后能用到的工具或者插件，全部一次性的进行下载和安装。
• 项目开发中，我们就减少了很多因工具不足而带来的麻烦事非常简单。

使用步骤：

1. 脚手架下载安装

执行脚手架下载安装项目命令：npx create-react-app my-app

2. 项目启动

根据提示信息，我们在命令行中执行下面的命令，即可启动运行项目代码：

cd my-app
npm start

运行成功后后，我们能够看到项目给出的相关提示信息，如下：

至此，我们就顺利的搭建好了 React 的开发环境。

项目搭建成功运行之后会出现一个初始化界面：

目录结构与运行关系

项目搭建完成之后，我们再来看一下项目的目录结构，与其他的框架不同，React 的目录极为简单：

那么这三个红框里面的到底是什么呢？我们来简单做个解释。

• index.html 文件 : 这是项目的入口文件，所有的代码运行，都是从这个文件开始的，React 框架代码，也是从这个文件中载入的；

• index.js 文件：这是框架的入口文件，React 是组件形式的，所有组件，都会通过 index.js 文件载入；

• App.js 文件：这是 React 框架给我们的组件示例代码，一般也作为加载其他组件的主入口文件；

这三者的关系是这样的：index.html 作为项目入口文件，加载 index.js ；index.js 文件作为框架的入口文件，加载 App.js ；App.js 作为组件的主入口文件，加载其他组件。