第九节:React 脚手架

1. React脚手架

1.1 react 脚手架的理解

1. 脚手架: 用来帮助程序员快速创建一个模板项目,包含了所有需要的依赖配置,和工程配置

2. react 提供了一个用于创建react项目的脚手架库 create-react-app

3. 项目的整体技术架构: react + webpack + es6 + eslint

4. 使用脚手架开发项目的特点: 模块化,组件化,工程化

   工程化: 就是通过一个命令 就能将项目打包编译

1.2 使用create-react-app 创建基于脚手架的react运用

1. 全局安装

   npm install create-react-app -g
   

2. 创建项目

   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

作用(当前项目的描述文件)

1. 标识, 标记当前项目信息(name, version)
2. 依赖, 当前项目所有需要依赖的包(dependencies,运行依赖, devDependencies开发依赖)
3. 打包/运行, 项目打包运行的命令(script ,脚本命令,通过 npm run .. 来运行)

3. 脚手架的脚本命令

1. yarn start: 启动一个开发环境下的应用服务器, 方便开发调试
2. yarn build: 用于构建发布项目的命令
3. yarn test: 用于测试代码,一般不推荐使用
4. yarn eject 反编译当前项目, 获取webpack控制权, 一但使用就回不去为了,一般不推荐使用