（九）React使用脚手架创建
（九）React使用脚手架创建
简介：
脚手架简介：（umi的使用需要查看）
- xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
1. 包含了所有需要的配置（语法检查、jsx编译、devServer…）
2. 下载好了所有相关的依赖
3. 可以直接运行一个简单效果 - react提供了一个用于创建react项目的脚手架库: create-react-app
- 项目的整体技术架构为: react + webpack + es6 + eslint
- 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化（使用了全自动的开发工具，编译，压缩，）
可以看下 UMI框架 https://www.jianshu.com/p/dc493809a2fd
创建：
创建的方式有很多种 可以参考这个 https://www.jianshu.com/p/68e849768d8e
在这里使用 create-react-app tanks 进行创建
SPA应用（vue react） 单页面应用 去看看angular的
创建完成的基础目录简介：
书写简介：
其实这一段是没法说的，需要正常流程编码的时候才会知道，就是你创建组件的时候时候需要注意什么。这里只是稍微按照自己的来写一下
在src里面 一般都是创建components 来创建组件，
然后后面的组件都是按文件夹下开始区分出来，里面放置相应的css文件 或者less文件 一般都是使用less文件 ，因为在进行加载区分的时候，会出现冲突，就像是vue里面的scoped，所以写less的时候都先写上总的名称进行同统一。所以一般的组件组成就是两个。
创建的组件的时候，可以创建js文件，但是还是要创建jsx文件，后期会使用tsx。
页面的简介：react也是spa的应用，index.html作为公共页面，APP.jsx作为公共的组件进行使用也及时后期的路由承接组件，index.js作为入口文件，其实看做是相关index.html的配置文件，更是加载了APP.jsx的组件
样式的模块化：
在使用css引入的时候，要是组件会有叠加，样式的名称会有冲突，解决方案是用less 或者 sass ，在写样式的时候再最外层写上样式的总名称
或者使用样式的模块化：
给css文件命名的时候 ，写上 index.module.css
然后在jsx的引入的时候 写上import hello from './index.module.css'
然后在写className的时候 写 className={hello.class名称} 达到区分的目的
组件化编码流程（视频建议）
- 拆分组件: 拆分界面,抽取组件
- 实现静态组件: 使用组件实现静态页面效果
- 实现动态组件
3.1 动态显示初始化数据
3.1.1 数据类型
3.1.2 数据名称
3.1.3 保存在哪个组件?
3.2 交互(从绑定事件监听开始)
