react 脚手架工具初始化

react 专栏的第19篇文章了，好快呀！通过前面的18篇文章，关于 react 相关最最基础的知识都学习的差不多了，但是我们在实际项目开发过程中，不会使用 js 文件引入的方式创建开发 react 项目，而是使用 react 脚手架 工具创建项目，那从今天这篇文章开始，后边的都是使用 脚手架工具创建开发 react 项目的相关知识了。

react 脚手架

1. xxx脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目。
   • 包含了所有需要的配置（语法检查、jsx编译、devServer...）
   • 下载好了所有相关的依赖
   • 可以直接运行一个简单效果
2. react 提供了一个用于创建 react 项目的脚手架库：create-react-app。
3. 项目的整体技术架构为：react + webpack + es6 + eslint。
4. 使用脚手架开发的项目特点：模块化、组件化、工程化。

创建项目并启动

1. 全局安装 npm install -g create-react-app。
2. 切换到想创建项目的目录，使用命令：create-react-app wjw-react。
3. 进入项目文件夹 cd wjw-react。
4. 启动项目 npm start。

React 脚手架项目目录结构

public 文件夹介绍

public 文件夹主要用来存放静态资源文件。比如：页面，文件，图片等静态资源。

• favicon.icon 网站页签图标
• index.html 主页面
• logo192.png logo图
• logo512.png logo图
• manifest.json 应用加壳的配置文件
• robots.txt 爬虫协议文件

【本部分相关代码资料】：我是𝒆𝒅. 的 gitee

src 文件夹介绍

• App.css App组件样式
• App.js App组件
• App.text.js 用于给App做测试
• index.css 样式文件
• index.js 入口文件
• logo.svg logo图片
• reportWebVitals.js 页面性能分析文件（需要 web-vitals 库的支持）
• setupTests.js 组件单元测试的文件（需要 jest-dom 库的支持）

【本部分相关代码资料】：我是𝒆𝒅. 的 gitee