1. React脚手架
1.1 react 脚手架的理解
脚手架: 用来帮助程序员快速创建一个模板项目,包含了所有需要的依赖配置,和工程配置
react 提供了一个用于创建react项目的脚手架库
create-react-app项目的整体技术架构: react + webpack + es6 + eslint
-
使用脚手架开发项目的特点: 模块化,组件化,工程化
工程化: 就是通过一个命令 就能将项目打包编译
1.2 使用create-react-app 创建基于脚手架的react运用
-
全局安装
npm install create-react-app -g -
创建项目
create-react-app hello
也可以使用npx命令进行安装
$ npx create-react-app myreact
2. 工程目录
2.1 工程目录了解
|-- node_modules // 工程所依赖的包目录
|-- public // 静态资源目录
--| index.html // 项目主页面
--| favico.io // 项目图标
--| mainifest.json // 移动端配置文件
|-- src // 项目开发目录, 内部的代码会被webpack编译
--| index.js // 应用的入口文件
--| App.js // 应用的根组件
--| index.css // index.js入口模块里的CSS
--| App.css // APP组件的样式文件
|-- .gitignore // git管理忽略文件
|-- package.json // 应用描述文件
|-- README.md // 应用说明文件
2.2 package.json
作用(当前项目的描述文件)
- 标识, 标记当前项目信息(name, version)
- 依赖, 当前项目所有需要依赖的包(dependencies,运行依赖, devDependencies开发依赖)
- 打包/运行, 项目打包运行的命令(script ,脚本命令,通过 npm run .. 来运行)
3. 脚手架的脚本命令
-
yarn start: 启动一个开发环境下的应用服务器, 方便开发调试 -
yarn build: 用于构建发布项目的命令 -
yarn test: 用于测试代码,一般不推荐使用 -
yarn eject反编译当前项目, 获取webpack控制权, 一但使用就回不去为了,一般不推荐使用
