我们将使用 Facebook 提供的官方脚手架工具 Create React App 快速创建和初始化一个新的 React 应用程序项目。Create React App 简化了配置过程，使我们能够专注于编写 React 代码，而不需要手动配置 Webpack 或 Babel 等工具。

安装脚手架工具

npm i -g create-react-app

在控制台输入这段指令用来全局安装 Create React App 这个脚手架工具。这是 Facebook 提供的一个官方脚手架工具，用于快速创建和初始化一个新的 React 应用程序项目。它简化了配置过程，让你可以直接开始编写 React 代码，而不需要手动配置 Webpack 或 Babel 等工具。

可以通过npm config ls 这段指令打印配置信息：

然后可以根据prefix打印出的地址在电脑上查找到我们安装的位置。

create-react-app --version

通过这段指令可以查看我们安装好的的脚手架的版本号：

创建项目

create-react-app react-1

通过这个指令可以创建项目，后面react-1这个是我们的项目名，可以按照自己要去取。

像这样就创建好了一个react项目模板了。

解析项目模板

可以看到当我们创建好一个项目模板他会给我们这么些文件和文件夹。

首先看到的是node_modules 文件夹，它是用于存储项目依赖的所有第三方模块或者库。就是相当于把react源码给我们下载来了

然后就是public文件夹：

可以看到index.html： 这是React应用的入口HTML文件，所有由React应用生成的内容都会被注入到这个HTML文件的<div id="root">（或者其他你指定的容器元素）中。而别的都是一些静态资源和文件。总结就是public文件夹就是静态资源目录

然后就是src文件夹，它是开发目录，代码的主战场，几乎所有你编写的代码和应用程序逻辑都会存放在这里。

1. App.css：这是一个CSS样式表，用于定义App.js组件的外观和布局。
2. App.js：这是React应用程序中的主要组件之一，它可能包含其他子组件，并负责渲染页面的主要内容。
3. App.test.js：这是一个测试文件，用于编写针对App.js组件的功能性和单元测试。
4. index.css：这是整个应用程序的全局样式表，其中包含了应用于所有页面的通用样式规则。
5. index.js：这通常是应用程序的入口点，它导入并挂载App组件到HTML文档中。
6. logo.svg：这是一个矢量图形文件。
7. reportWebVitals.js：这是一个文件，用于收集和报告有关用户体验的关键指标，如加载时间、交互延迟
8. setupTests.js：这是一个配置文件，用于设置测试环境并在运行测试之前执行一些初始化任务。

最后就是两个json文件了：

下面那个package.json文件是项目描述文件，通俗一点讲它就是项目的说明书，它上面的那个json文件就是它的文件说明书。

ok这些做完这些你就可以开始你的react之旅了