這次我們來講解第三節知識，考慮了下，先不去講什麼理論了，畢竟網上一搜一大堆，而且理論真心看不太懂啊！！！

今天我們就直接上實例嘍！

大家HIGH起來！！！（想了好久，還是沒捨得刪這句話）

1.根據下圖配置自己的文件

2.我們先用原始方法

額，忘記告訴大家做什麼項目了，那就在這補上吧，咱們先做一個小Demo，既然react是FB的，那我們就做個評論框好了。

搭建一個跟這個頁面一樣的模型，當然你要做的更好看，就按你的來吧！

我們考慮一下，要是按照原始的方法來怎麼寫？

var container = document.querySelector(".container");
        var mytext =  document.querySelector("textarea");
        var btn = document.querySelector(".btn");
        var Thtml;
        btn.onclick = function(){
         Thtml = mytext.value;
           var newNode = document.createElement("p");
           newNode.innerHTML = Thtml;
           container.appendChild(newNode);
           mytext.value = '';
        };

寫完後應該是這樣的：

在下麵的輸入框輸入，點擊POST，則上面的div中就添加一條（至於樣式就不要糾結了哈）

3.React方法

我們使用react來達到同樣的效果。

var TweetBox = React.createClass({
        render: function() {
            return (
                <div className="main">
                    <div className="container"></div>
                    <div>
                        <textarea></textarea>
                        <input type="button" className="btn" value="Post"/>
　　　　　　　　　　  </div>

                </div>
            );
        }
    });
    React.render(
    <TweetBox />,
    document.body
    );

這裡要註意兩點：

1. 很多文檔都是從內部引用的，這裡專門從外部引用，在引用時一定要在<script>標簽里註明類型

2.React中元素的class需要寫成className

3.請規範你的代碼輸入（這句話有點裝13了），單標記標簽後面一定要拿" / "封閉，別怪我沒給顏色標註啊！

同樣的，我們獲得了與用html代碼輸入一樣的內容：

接下來我們來編寫功能，這裡大家最好先去react官網將所有api看一遍，這樣看下麵的內容能更快的瞭解。

4.React編寫詳解

我個人理解的就是react是將所有大的東西細分成小的組件，然後再拼接起來（六神合體雷神王，嗚嗚嗚嗚嗚...） 

我們來簡單分析一下，這個功能大約能分成幾部分。

應該是這樣三部分是吧...

所以我們在編寫時，也應該分為三部分，所以我們的示例代碼應該變成這樣：

其實這裡的Listdiv就相當於

<div class="container"></div>

而Editdiv就是

<div>
    <textarea></textarea>
    <input type="button" class="btn" value="Post">
</div>

同樣的他們被class名為main的div包裹。

下麵我們就來編寫裡面的組件，不過在那之前我們先將當前初始狀態處理一下：

好的，雖然有註釋，但我們還是逐行翻譯一下：

getInitialState,用於定義初始狀態，也就是一個對象，這個對象可以通過 this.state 屬性讀取，也就是我們例子中的this.state.data（todo），todo是自己命名的一個存儲名，大家自己隨便取啊（避開關鍵字）

handleChange（這個名字也是自己隨便取的），這個方法是用來跟蹤數據的變化，將這個方法綁定到onChange（名字隨便取）里

我們開始定義子組件吧：
　　Editdiv：

這裡我們看到了主要的方法handleAdd，我們就來分析一下：

preventDefault，阻止元素髮生預設的行為

ref，React用來獲取dom元素而添加的一個屬性，給你需要獲取的元素上面添加這個屬性，通過ref的值來獲取到這個元素，使用this.refs.xxx.getDOMNode方法

這裡我們將取到的元素（textarea）的值放入newthing中

rows，獲取到輸入的值，這裡用到了props方法（網上有很多關於props和state方法的用法，大家去看看，這個真的很重要，這裡在講解這個的話篇幅就太長了，需要的話，大家可以留言，我會專門抽出一個專題的）

在下麵就是給input中添加onClick（駝峰式寫法）方法，觸發的函數就是我們剛編寫的handleAdd

　　Listdiv：

這個組件就簡單的多了，創建class名為container的div，再在裡面添加一個遍歷map方法，返回一個被P元素包裹的值

OK，這裡我們就大功告成了，下麵貼下全部代碼：

var TweetBox = React.createClass({
    // 初始化數據，data的數據由state來控制
    getInitialState: function() {
        return {
            data: []
        };
    },
    // 接收一個傳入的數據，並將它實時更新到組件的 state 中，以便組件根據數據重新render
    // 只要改變了 state ，react自動執行 render 計算
    handleChange: function (rows) {
        this.setState({
            data: rows
        });
    },
    render: function() {
        return (
            <div className="main">
                {
                    /*展示框*/
                }
                <Listdiv todo={this.state.data}/>
                {
                    /*輸入框與提交按鈕*/
                }
                
                <Editdiv onAdd={this.handleChange} todo={this.state.data}/>                
            </div>
        );
    }
});
// 輸入框與提交按鈕
var Editdiv = React.createClass({
    handleAdd: function (e) {
        e.preventDefault();
        // 通過 refs 獲取dom元素，然後獲取輸入的內容
        var inputDom = this.refs.inputnew.getDOMNode();
        var newthing = inputDom.value.trim();
        // 獲取傳入的TweetBox數據
        var rows = this.props.todo;
        if (newthing !== '') {
            // 更新數據，並使用 onAdd 更新到 TweetBox 組件的 state 中
            rows.push(newthing);
            this.props.onAdd(rows);
        }
        inputDom.value = '';
    },
    render: function(){
        return (
            <div>
                <textarea ref="inputnew"></textarea>
                <input type="button" className="btn" onClick={this.handleAdd} id="todo-new" value="Post"/>
            </div>
        )
    }
});
// Listdiv 組件用於展示列表
var Listdiv = React.createClass({
    render: function(){
        return (
            <div className="container">
            {
                this.props.todo.map(function (item) {
                    return (
                        <p>{item}</p>
                    );
                }) 
            }
            </div>
        )
    }
});
React.render(
    <TweetBox />,
    document.body
);

現在真心是越來越難，可能更新就慢了。以前光看別人寫的，自己寫了才發現整理一篇文章真的不容易啊！！！

結尾名言：我們都會變，樣子不變，心也會變，許許多多舊友，早已變得如陌生人一般，皆因他們有不同的角色要扮演，去適應生活與環境所需，不得不變。

參考資料： React官網 

　　　　　 React.js的介紹-針對瞭解jQuery的工程師 （很好的文章，如果你對jquery比較瞭解，那麼從這裡去瞭解react會讓你更加容易）