現在最熱門的前端框架，毫無疑問是 React 。
上周，基于 React 的 React Native 發布，結果一天之內，就獲得了 5000 顆星，受矚目程度可見一斑。
React 起源于 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。做出來以后，發現這套東西很好用，就在2013年5月開源了。

如果你沒安裝 git， 那就直接下載 zip 壓縮包。

上面代碼有兩個地方需要注意。首先，最后一個 <script>
標簽的 type
屬性為 text/babel
。這是因為 React 獨有的 JSX 語法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel"
。
其次，上面代碼一共用了三個庫： react.js
、react-dom.js
和 Browser.js
，它們必須首先加載。其中，react.js
是 React 的核心庫，react-dom.js
是提供與 DOM 相關的功能，Browser.js
的作用是將 JSX 語法轉為 JavaScript 語法，這一步很消耗時間，實際上線的時候，應該將它放到服務器完成。
$ babel src --out-dir build

上面命令可以將 src
子目錄的 js
文件進行語法轉換，轉碼后的文件全部放在 build
子目錄。
二、ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用于將模板轉為 HTML 語言，并插入指定的 DOM 節點。
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example'));

上面代碼將一個 h1
標題，插入 example
節點（查看 demo01
），運行結果如下。

上面代碼體現了 JSX 的基本語法規則：遇到 HTML 標簽（以 <
開頭），就用 HTML 規則解析；遇到代碼塊（以 {
開頭），就用 JavaScript 規則解析。上面代碼的運行結果如下。

上面代碼的arr
變量是一個數組，結果 JSX 會把它的所有成員，添加到模板，運行結果如下。

上面代碼中，變量 HelloMessage
就是一個組件類。模板插入 <HelloMessage />
時，會自動生成 HelloMessage
的一個實例（下文的"組件"都指組件類的實例）。所有組件類都必須有自己的 render
方法，用于輸出組件。
注意，組件類的第一個字母必須大寫，否則會報錯，比如HelloMessage
不能寫成helloMessage
。另外，組件類只能包含一個頂層標簽，否則也會報錯。
var HelloMessage = React.createClass({ render: function() { return <h1> Hello {this.props.name} </h1><p> some text </p>; }});

上面代碼會報錯，因為HelloMessage
組件包含了兩個頂層標簽：h1
和p
。
組件的用法與原生的 HTML 標簽完全一致，可以任意加入屬性，比如 <HelloMessage name="John">
，就是 HelloMessage
組件加入一個 name
屬性，值為 John
。組件的屬性可以在組件類的 this.props
對象上獲取，比如 name
屬性就可以通過 this.props.name
讀取。上面代碼的運行結果如下。

上面代碼的 NoteList
組件有兩個 span
子節點，它們都可以通過 this.props.children
讀取，運行結果如下。

上面的Mytitle
組件有一個title
屬性。PropTypes
告訴 React，這個 title
屬性是必須的，而且它的值必須是字符串。現在，我們設置 title
屬性的值是一個數值。
var data = 123;ReactDOM.render( <MyTitle title={data} />, document.body);

這樣一來，title
屬性就通不過驗證了。控制臺會顯示一行錯誤信息。
Warning: Failed propType: Invalid prop title of type number supplied to MyTitle, expected string.

更多的PropTypes
設置，可以查看官方文檔。
此外，getDefaultProps
方法可以用來設置組件屬性的默認值。
var MyTitle = React.createClass({ getDefaultProps : function () { return { title : 'Hello World' }; }, render: function() { return <h1> {this.props.title} </h1>; }});ReactDOM.render( <MyTitle />, document.body);

上面代碼會輸出"Hello World"。
七、獲取真實的DOM節點
組件并不是真實的 DOM 節點，而是存在于內存之中的一種數據結構，叫做虛擬 DOM （virtual DOM）。只有當它插入文檔以后，才會變成真實的 DOM 。根據 React 的設計，所有的 DOM 變動，都先在虛擬 DOM 上發生，然后再將實際發生變動的部分，反映在真實 DOM上，這種算法叫做 DOM diff ，它可以極大提高網頁的性能表現。
但是，有時需要從組件獲取真實 DOM 的節點，這時就要用到 ref
屬性（查看 demo07 ）。
var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); }});ReactDOM.render( <MyComponent />, document.getElementById('example'));

上面代碼中，組件 MyComponent
的子節點有一個文本輸入框，用于獲取用戶的輸入。這時就必須獲取真實的 DOM 節點，虛擬 DOM 是拿不到用戶輸入的。為了做到這一點，文本輸入框必須有一個 ref
屬性，然后 this.refs.[refName]
就會返回這個真實的 DOM 節點。
需要注意的是，由于 this.refs.[refName]
屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個屬性，否則會報錯。上面代碼中，通過為組件指定 Click
事件的回調函數，確保了只有等到真實 DOM 發生 Click
事件之后，才會讀取 this.refs.[refName]
屬性。
React 組件支持很多事件，除了 Click
事件以外，還有 KeyDown
、Copy
、Scroll
等，完整的事件清單請查看官方文檔。
八、this.state
組件免不了要與用戶互動，React 的一大創新，就是將組件看成是一個狀態機，一開始有一個初始狀態，然后用戶互動，導致狀態變化，從而觸發重新渲染 UI （查看 demo08
）。
var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, render: function() { var text = this.state.liked ? 'like' : 'haven't liked'; return ( <p onClick={this.handleClick}> You {text} this. Click to toggle. </p> ); }});ReactDOM.render( <LikeButton />, document.getElementById('example'));

上面代碼是一個 LikeButton
組件，它的 getInitialState
方法用于定義初始狀態，也就是一個對象，這個對象可以通過 this.state
屬性讀取。當用戶點擊組件，導致狀態變化，this.setState
方法就修改狀態值，每次修改以后，自動調用 this.render
方法，再次渲染組件。
由于 this.props
和 this.state
都用于描述組件的特性，可能會產生混淆。一個簡單的區分方法是，this.props
表示那些一旦定義，就不再改變的特性，而 this.state
是會隨著用戶互動而產生變化的特性。
九、表單
用戶在表單填入的內容，屬于用戶跟組件的互動，所以不能用 this.props
讀取（查看 demo9
）。
var Input = React.createClass({ getInitialState: function() { return {value: 'Hello!'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function () { var value = this.state.value; return ( <div> <input type="text" value={value} onChange={this.handleChange} /> <p>{value}</p> </div> ); }});ReactDOM.render(<Input/>, document.body);

上面代碼中，文本輸入框的值，不能用 this.props.value
讀取，而要定義一個 onChange
事件的回調函數，通過event.target.value
讀取用戶輸入的值。textarea
元素、select
元素、radio
元素都屬于這種情況，更多介紹請參考官方文檔。
十、組件的生命周期
組件的生命周期分成三個狀態：
Mounting：已插入真實 DOM
Updating：正在被重新渲染
Unmounting：已移出真實 DOM

React 為每個狀態都提供了兩種處理函數，will
函數在進入狀態之前調用，did
函數在進入狀態之后調用，三種狀態共計五種處理函數。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

此外，React 還提供兩種特殊狀態的處理函數。
componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用
shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時調用

這些方法的詳細說明，可以參考官方文檔。下面是一個例子（查看 demo10
）。
var Hello = React.createClass({ getInitialState: function () { return { opacity: 1.0 }; }, componentDidMount: function () { this.timer = setInterval(function () { var opacity = this.state.opacity; opacity -= .05; if (opacity < 0.1) { opacity = 1.0; } this.setState({ opacity: opacity }); }.bind(this), 100); }, render: function () { return ( <div style={{opacity: this.state.opacity}}> Hello {this.props.name} </div> ); }});ReactDOM.render( <Hello name="world"/>, document.body);

上面代碼在hello
組件加載以后，通過 componentDidMount
方法設置一個定時器，每隔100毫秒，就重新設置組件的透明度，從而引發重新渲染。
另外，組件的style
屬性的設置方式也值得注意，不能寫成
style="opacity:{this.state.opacity};"

而要寫成
style={{opacity: this.state.opacity}}

這是因為 React 組件樣式是一個對象，所以第一重大括號表示這是 JavaScript 語法，第二重大括號表示樣式對象。
十一、Ajax
組件的數據來源，通常是通過 Ajax 請求從服務器獲取，可以使用 componentDidMount
方法設置 Ajax 請求，等到請求成功，再用 this.setState
方法重新渲染 UI （查看 demo11
）。
var UserGist = React.createClass({ getInitialState: function() { return { username: '', lastGistUrl: '' }; }, componentDidMount: function() { $.get(this.props.source, function(result) { var lastGist = result[0]; if (this.isMounted()) { this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }); } }.bind(this)); }, render: function() { return ( <div> {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>. </div> ); }});ReactDOM.render( <UserGist source="https://api.github.com/users/octocat/gists" />, document.body);

上面代碼使用 jQuery 完成 Ajax 請求，這是為了便于說明。React 本身沒有任何依賴，完全可以不用jQuery，而使用其他庫。
我們甚至可以把一個Promise對象傳入組件，請看Demo12
。
ReactDOM.render( <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />, document.body);

上面代碼從Github的API抓取數據，然后將Promise對象作為屬性，傳給RepoList
組件。
如果Promise對象正在抓取數據（pending狀態），組件顯示"正在加載"；如果Promise對象報錯（rejected狀態），組件顯示報錯信息；如果Promise對象抓取數據成功（fulfilled狀態），組件顯示獲取的數據。
var RepoList = React.createClass({ getInitialState: function() { return { loading: true, error: null, data: null}; }, componentDidMount() { this.props.promise.then( value => this.setState({loading: false, data: value}), error => this.setState({loading: false, error: error})); }, render: function() { if (this.state.loading) { return <span>Loading...</span>; } else if (this.state.error !== null) { return <span>Error: {this.state.error.message}</span>; } else { var repos = this.state.data.items; var repoList = repos.map(function (repo) { return ( <li> <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars)
{repo.description} </li> ); }); return ( <main> <h1>Most Popular JavaScript Projects in Github</h1> <ol>{repoList}</ol> </main> ); } }});