在使用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。