6、React脚手架

1、介绍

React脚手架名称：create-react-app。

什么是React脚手架：FaceBook的React团队官方出的一个快速构建React单页面应用的工具，用来帮助开发者创建一个基于React库的模板项目，项目引入了React及其它基础的依赖库（React、babel、webpack、eslint等），并且已经配置好了所需的环境，可以零配置直接运行

为什么使用React脚手架：

• 无需配置开箱即用。
• 集成配置了开发服务器（devServer），方便开发调试。
• 模板项目源码目录解构清晰，方便添加自己的功能逻辑。

2、安装

安装React脚手架要求nodejs最低版本为14。

安装命令：npm i -g create-react-app。

校验是否安装成功：create-react-app -V。

3、创建脚手架项目

使用脚手架创建模板项目：create-react-app 项目名，（例如 create-react-app hello-react）。

命令运行结束后，会在当前目录生成一个项目名的目录，这个文件夹就是脚手架创建的React模板项目。

切换到脚手架创建的模板项目，运行npm start命令，打开浏览器访问http://localhost:3000，即可看到模板项目的欢迎页面。

4、脚手架项目结构

.git、.gitignore

脚手架创建的React模板项目，默认为其创建了git仓库。.git文件夹默认为隐藏状态。

package.json、package-lock.json

package.json：前端依赖包管理文件，用于定义项目所需的各种第三方前端依赖包

package-lock.json：用于锁定package.json文件中依赖包的版本号。

node_modules

根据package.json文件中的依赖包定义，下载的依赖包文件，本文件夹不需要提交git仓库。

README.md

本项目的介绍文件，描述了本项目如何调试运行、编译打包、展示配置等等。

public

静态资源文件夹。

src

源码文件夹。