1.在react底下安装环境

Image.png

Image.png
2.新建一个文件夹

Image.png
3.配置入口文件redux:staticRoot+'/redux/app'

Image.png
4.在APP.js里,如何把store放到react里面运行

Image.png

Image.png

Image.png
把这两个方法注释掉

Image.png
类里面构造器的概念:

Image.png
把所有函数接收过来再原封不动的传给构造器

Image.png
开始写数据:
//使用es6 class 去写组件时,对状态的数据赋值默认值

Image.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放在组件里面;
结构赋值可以把页面打开,就能运行起来了
触发方法的行为

Image.png
百度云链接
链接: http://pan.baidu.com/s/1bpGEhJp 密码: 4iqc
链接: http://pan.baidu.com/s/1bpGEhJp 密码: 4iqc