## 配置sass预编译器环境
* npm install sass-loader node-sass --save-dev
* npm run eject
* 修改webpack.config.dev.js
```
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.scss$/,
/\.json$/,
/\.svg$/
],
loader: 'url',
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
},
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "sass"]
},
```
## 编写静态页面
* HTML
* CSS
## 拆分组件
```
App-------------应用组件
TodoHeader---------------头部组件
TodoMain-----------------主体组件
TodoItem---------------------todo项组件
TodoFooter---------------尾部组件
```
## 实现静态组件
* 拆分页面
* 拆分样式(就近原则)
## 分析确定组件的state和props
* App:
* state:
* todos: [{isDone: false, title: '吃饭'}, {isDone: false, title: '睡觉'}]
* isAllChecked: boolean
* TodoHeader
* props: addTodo/func
* todoMain
* props:
* todos/array
* deleteTodo/func
* changeTodoState/func
* todoItem
* props:
* todo/object
* deleteTodo/func
* index/number
* changeTodoState/func
* TodoFooter
* props:
* isAllChecked/boolean
* doneCount/number
* totalCount/number
* deleteDone/func
* changeAllState/func
## 实现动态组件
* 动态显示初始化todos列表数据
* App state--> todos
* 初始化todos: constructor()
* todos的结构: [{title:'xx', isDone:false}, {}]
* 通过标签属性向-->TodoMain-->TodoItem传递todos
* 添加新的todo, 显示在列表首位
* 勾选指定todo
* 删除指定todo
* 显示完成的/所有的todo的数量
* 全选/全不选
* 删除所有选中的
* 父组件向子组件传递数据
* 数据(包含对数据操作的函数)都在父组件里
* 数据只能是当前组件和子组件使用, 不能给兄弟组件使用
* 共同的数据放在父组件上, 特有的数据放在自己组件内部
* 一般数据---> 用于组件页面显示
* 函数数据--->调用执行
* 父子组件的通信
* ES6新语法
* const/let
* 解构赋值: let {a, b} = this.props
* 箭头函数:
* 组件的自定义方法: xxx = () => {}
* map/filter的回调方法: (item, index) => {}
* 优点:
* 简洁
* 没有自己的this,使用引用this查找的是外部this
* 扩展运算符(...)
解构对象: const MyProps = {}, <Xxx {...MyProps}>
## 项目打包运行
* 项目编译打包并运行
* npm run build--->打包生成build文件夹及资源
* npm install -g pushstate-server //安装一个全局静态服务器
* pushstate-server build //部署运行build文件夹
* 访问: http://localhost:9000
* 配置sass预编译器环境2
* 使用工具包: create-react-app-sass
* npm install create-react-app-sass --save-dev
* 修改package.json
```
"scripts": {
"start": "react-scripts-with-sass start",
"build": "react-scripts-with-sass build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
```
* 在js中引入样式文件时, 不引入*.scss文件, 而是引入*.css文件
* 原因: 在构建项目时, 会先将.scss文件转译为.css文件
* 编译打包运行
* 实现组件间通信方式2:
* 使用消息订阅(subscribe)-发布(publish)机制
* 工具库: PubSubJS
* 下载: npm install pubsub-js --save
* 使用:
```
import PubSub from 'pubsub-js' //引入
PubSub.subscribe('delete', function(data){ }); //订阅
PubSub.publish('delete', data) //发布消息
```