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
源码文件夹。