在使用react前简单介绍一下react，以前常用jquery操作dom，开销较大，使用react的虚拟dom可以减少开销，另外react实现了功能模块化，减少了前端数据处理逻辑与界面渲染逻辑的复杂性。在学习react之前需要学习ES6语法。另外react是可以后端渲染的，使用node.js实现后端渲染，使用前端渲染还是后端渲染根据实际需求来选择，前端渲染速度较慢，但后端渲染会增加服务器压力。
我先搭建环境运行第一个react程序如下：
(1)首页index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react</title>
</head>
<body>
<div id="root">
</div>
<script src="../src/js/jquery.min.js"></script>
<script src="../src/js/react.production.min.js"></script>
<script src="../src/js/react-dom.production.min.js"></script>
<script src="../src/js/redux.min.js"></script>
<script src="../src/js/react-redux.min.js"></script>
<script src="../src/js/babel.min.js"></script>
<script src="../src/index.js" type="text/babel"></script>
</body>
</html>
其他jquery、react、redux、babel自行下载即可
（2）index.js
class Clicks extends React.Component{
constructor(props){
super(props) //js规定子类中若想使用this必须super()，继承父类的，react中想要使用props的话，也必须继承父类的props属性
//this.props = porps; //如此方式会导致ReferenceError: "porps is not defined" react-dom.production.min.js:117:150错误，应为react-dom需要React.Component中的props，自定义的无法满足条件
this.a = 3;
this.state = {val:1};
}
b = 5; //声明变量，指向都是this
fnct = () =>{ //箭头函数的this使用的是外部this，不用想其他函数一样bind(this)
alert(this.a+" "+this.refs.tx.value+" "+this.b+" "+this.props.val.tr) //refs用于组件内部引用dom
this.state.val ++;
this.setState(this.state)
}
render(){
return (<div>
<input type="text" ref="tx" style={{width:100}} value={this.props.val.te} />
<input type="text" style={{width:50}} value={this.state.val} />
<button onClick={this.fnct}>click</button>
</div>);
}
}
ReactDOM.render(<Clicks val={{te: 123, tr:"tr"}} />, $("#root")[0]);
class ReduxTest extends React.Component{
constructor(props) {
super(props)
}
render(){
return (<div>test</div>);
}
}
ReactDOM.render(<ReduxTest/>,$("#example")[0])
//结构合并产生一个新值(不会改变原对象)
// let str = {a:1,b:2,c:3}
// let str2 = {c:1,d:4}
// console.log({...str,...str2})
//console.log(str)
要注意的是：
（1）使用ES6语法时，import导入其他js文件时需要使用type=“module”，不可以使用type="text\babel",此处存在冲突，可以使用webpack打包解决该问题。
（2）另外由于我react中使用了JSX，故需要使用babel。
（3）使用ReacDOM.render()渲染组件react组件需要使用首字母大写，渲染html元素需要首字母小写。
（4）reactDom使用style需要使用类似于style={{width:500}}表达式不可以使用style="width:500px"。
（5）class、for等html标识需要换成className、htmlfor，如className={class}，自定义属性需要以"data-"前缀开始。
（6）ref属性可以方便在组件中对其他元素的引用this.refs.xxx即可。
（7）使用箭头函数可以不需要再bind(this)，箭头函数直接使用的外部this。