允許使用者自由封裝元件是React非常突出的特性，使用者可將自己建立的元件像普通的HTML標籤一樣插入頁面，React.CreateClass方法就是用來建立一個元件類的。在建立和呼叫react元件時有幾點需要注意，我們在實際的demo中進行總結。
從一個簡單的例子開始，我們嘗試建立一個包含文字框和提交按鈕的元件：

    <div id="container"></div>
    <script type="text/babel">
      let InputWithButton = React.createClass({
        render:function(){
          return(
            <div
 
>
              <input type="text" value="password"/> 
              <button>Submit</button>               
            </div>
          ) 
        }
      });
      ReactDOM.render(
        <InputWithButton/>,
        document.getElementById("container")
      )
    </script
 
>

執行上述程式碼，顯示結果如下：

在上述程式碼中，需要注意以下幾點：

1. 我們建立了一個名為InputWithButton的元件類，注意此處命名首字母必須大寫，自動生成InputWithButton例項。
2. 所有的元件都必須要有自己的render方法，用以輸出元件。
3. 在建立元件類時，return的最終結果內只能包含一個頂級標籤，如果我們在上例中去掉div標籤直接返回<input>和<button>，程式碼會報錯。
4. 元件的用法與原生HTML的用法一致，直接在ReactDOM.render中插入<InputWithButton/>,注意"/"不能丟，在jsx解析時會根據"/"判斷標籤的閉合。
   另外，像原生的HTML標籤一樣，可以給元件新增屬性，參考如下程式碼：

    <div id="container"></div>
    <script type="text/babel">
      let InputWithButton = React.createClass({
        render:function(){
          return(
            <div>
              <input type="text" value={this.props.value} className="input"/>
              <button>{this.props.name}</button>
            </div>
          ) 
        }
      });
      ReactDOM.render(
        <InputWithButton name="confirm" value="password"/>,
        document.getElementById("container")
      )
    </script>

1. 如上例中呼叫<InputWithButton/>標籤時，新增的name和value屬性,在建立元件類時，可以通過this.props物件是獲取元件的屬性,在input通過this.props.value給value賦值，在button中通過this.props.name賦值，注意都要包裹在{}內。

2. 新增屬性時需要注意新增class屬性時要用className,for屬性用htmlFor,這是因為class和for是JavaScript的保留字。
   在使用this.props物件獲取屬性時，需要注意比較特殊的this.props.children，他表示元件的所有子節點。

   <div id="container"></div>
   <script type="text/babel">
     let FormList = React.createClass({
       render:function(){
         return(
           <form>
             {
               React.Children.map(this.props.children,function(child){
                 return <button>{child}</button>;
               })
             }
           </form>
         ) 
       }
     });
   
     ReactDOM.render(
       <FormList>
           <span>Submit</span>
           <span>Clear</span>
           <span>Cancel</span>  
       </FormList>,
       document.getElementById("container")
     )
   </script>

   如上程式碼，我們嘗試建立一個包含三個按鈕的form表單，在建立FormList元件類時，通過this.props.children獲取FormList下的子元素，通過React.Children.map遍歷節點。通過React專用的除錯工具，我們可以檢視FormList元件類的具體組成如下：
   

對於React的入門還是比較容易的，但想深入掌握還有些路要走，要儘快熟悉JSX的語法規則，主要參考阮一峰大神的react入門例項教程和官方文件。

原文連結:http://www.cnblogs.com/Nancy-wang/p/6995211.html