首先萬事皆有源，react的github地址附上：https://github.com/facebook/react
其次，推薦個寫的不錯的react學習博客http://www.ruanyifeng.com/blog/2015/03/react.html
看完這些之後。可以再來看本人學習的過程，本人也是在看了上面的博客然後結合官網的例子，繼續學習的。
推薦幾個react必備網址：
- https://codepen.io/gaearon/pen/JbbEzX react在線效果查看器，如果只想看看react代碼的效果，直接在這裏查看就可以了
- http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&code= 可以將react風格的代碼編譯成比較容易理解的js代碼
https://www.w3ctech.com/topic/1496 使用開發工具時，如Webstorm的配置和注意事項。
有了以上的基礎，開始繼續學習react。
在用webstorm編輯react代碼時，可能會出現下面情況：
雖然也根據很多教程做了相應的IDE修改，但是還是報錯。找不到好的解決辦法，唯一的辦法，就是將html代碼和js代碼分離。然後引入js代碼的時候使用<script src="index.js" type="text/babel"></script>注意type屬性。
接下來正式繼續學習…
本DEMO實例主要熟悉下react的生命週期
主要的生命週期可以參考https://segmentfault.com/a/1190000004168886
首先是本教程demo中所有的html頁面，都是一樣的代碼，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<script src="index.js" type="text/babel"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>js代碼如下：
var count =0;
var HeloChild = React.createClass({
//先申明 才能使用
render : function(){
//屬性改變調用render
return(<a>{this.props.childProps}</a>);
}
});
var HelloMessage = React.createClass({
getDefaultProps :function(){
console.log("getDefaultProps");
//在create的時候就創建如果後面有直接賦值的屬性就會覆蓋此處
//所有實例共用此屬性
return {title : 'Hello World tqy'};
},
getInitialState : function(){
//每個實例調用一次
count++;
console.log("getInitialState");
console.log(count);
return {mystate:"mystate",
childProps:"childProps"
};
},
render: function() {
//狀態改變調用render
return (<div><h1 onClick={this.callback}>Hello {this.props.name+this.props.title }{ this.state.mystate+"\n"}</h1>
<HeloChild childProps={this.state.childProps}></HeloChild>
</div>
);
},
//函數的兩種寫法
componentDidMount(){
console.log("componentDidMount");
},
callback : function(event){
console.log("click");
this.setState({mystate: "mystateCCCCCCC",childProps:"childProps22"});
}
});
ReactDOM.render(
//組件&組件之間不能嵌套
<div><HelloMessage name="aaa" title="bbbb"/><HelloMessage></HelloMessage></div>,
document.getElementById('example')
);在瀏覽器中訪問控制檯結果如下：
可以看到，getDefaultProps方法只會調用一次，並且是在createclass的時候就調用；而getInitialState方法會在每個實例創建的時候，都調用一次。componentDidMount方法也打印了兩次。
詳細頁面如下：
其餘生命週期的方法，也都大同小異，大家可以自行實踐。
如果最後的方法變成：
ReactDOM.render(
//組件組件之間不能嵌套
<div><HelloMessage><HelloMessage name="aaa" title="bbbb"/></HelloMessage></div>,
document.getElementById('example')
);則效果如下
可見，嵌套的只顯示最外層的HelloMessage。