1.在react底下安装环境
![5640239-8b1624da831743e4.png](https://upload-images.jianshu.io/upload_images/5640239-8b1624da831743e4.png)
Image.png
![5640239-1afc761e96cc9ab5.png](https://upload-images.jianshu.io/upload_images/5640239-1afc761e96cc9ab5.png)
Image.png
2.新建一个文件夹
![5640239-0b6ef799a1b5cb03.png](https://upload-images.jianshu.io/upload_images/5640239-0b6ef799a1b5cb03.png)
Image.png
3.配置入口文件redux:staticRoot+'/redux/app'
![5640239-d2fe48382f2db677.png](https://upload-images.jianshu.io/upload_images/5640239-d2fe48382f2db677.png)
Image.png
4.在APP.js里,如何把store放到react里面运行
![5640239-b6f5c7856d0bca1b.png](https://upload-images.jianshu.io/upload_images/5640239-b6f5c7856d0bca1b.png)
Image.png
![5640239-ca14928263a81a03.png](https://upload-images.jianshu.io/upload_images/5640239-ca14928263a81a03.png)
Image.png
![5640239-af62d09a8fcf29e3.png](https://upload-images.jianshu.io/upload_images/5640239-af62d09a8fcf29e3.png)
Image.png
把这两个方法注释掉
![5640239-52631cfb617c1b07.png](https://upload-images.jianshu.io/upload_images/5640239-52631cfb617c1b07.png)
Image.png
类里面构造器的概念:
![5640239-651529c22312b71b.png](https://upload-images.jianshu.io/upload_images/5640239-651529c22312b71b.png)
Image.png
把所有函数接收过来再原封不动的传给构造器
![5640239-25e032c3cd88c7a7.png](https://upload-images.jianshu.io/upload_images/5640239-25e032c3cd88c7a7.png)
Image.png
开始写数据:
//使用es6 class 去写组件时,对状态的数据赋值默认值
![5640239-c6b709972a255de6.png](https://upload-images.jianshu.io/upload_images/5640239-c6b709972a255de6.png)
Image.png
在按钮上加上一个事件
![5640239-99cdd5da1f71ef87.png](https://upload-images.jianshu.io/upload_images/5640239-99cdd5da1f71ef87.png)
Image.png
匿名函数导致函数传过去就是空的
所以,用什么?
传过去是add的行为;
点击按钮触发行为,触发数据,去store里面拿到新的数据,调用一次传一个行为
MVC的架构思想:
包装组件,包装store;
import { createClass, PropTypes } from 'react';
// React createClass
const AppComponent = createClass ({
//设置 props 数据类型
propTypes : {
value: PropTypes.number.isRequired,
onIncreaseClick: PropTypes.func.isRequired
},
render : function() {
const { value, onIncreaseClick } = this.props;
return (
<div>
<span>{ value }</span>
<button onClick={ onIncreaseClick }> Click </button>
</div>
);
}
});
export { AppComponent };
自己封装一个onclick放在组件里面;
结构赋值可以把页面打开,就能运行起来了
触发方法的行为
![5640239-03391087748c9d13.png](https://upload-images.jianshu.io/upload_images/5640239-03391087748c9d13.png)
Image.png
百度云链接
链接: http://pan.baidu.com/s/1bpGEhJp 密码: 4iqc
链接: http://pan.baidu.com/s/1bpGEhJp 密码: 4iqc