1、組件

 1 <!-- React 允許將代碼封裝成組件（component），然後像插入普通 HTML 標簽一樣，在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類 -->
 2         var HelloMessage = React.createClass({
 3           render: function() {
 4             return <h1>Hello {this.props.name}</h1>
 5           }
 6         })
 7
 
     <!-- 變量 HelloMessage 就是一個組件類。模板插入 <HelloMessage /> 時，會自動生成 HelloMessage 的一個實例（下文的"組件"都指組件類的實例）。所有組件類都必須有自己的 render 方法，用於輸出組件。 -->
 8         ReactDOM.render(
10           <HelloMessage name="John" />,
11           document.getElementById(‘example‘)
12         )

2、組件要註意的兩個規則（a.組件名的第一個字母，必須大寫，否則會報錯，b.組件類只能包含一個頂層標簽，否則也會報錯）

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 讀取。 -->

3.this.props.children的使用和註意事項

　　a.this.props.children 的值有三種可能：如果當前組件沒有子節點，它就是 undefined ;如果有一個子節點，數據類型是 object ；如果有多個子節點，數據類型就是 array 。所以，處理 this.props.children 的時候要小心。

　　b.React 提供一個工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map 來遍歷子節點，而不用擔心 this.props.children 的數據類型是 undefined 還是 object。更多的 React.Children 的方法。

 1 var NyComponent = React.createClass({
 2             render: function () {
 3                 return(
 4                     <ol>
 5                         <!-- this.props 對象的屬性與組件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性。它表示組件的所有子節點  -->
 6                             React.Children.map(this.props.children, function(child) {
 7                                 return <li>{child}</li>
 8                             })
 9                         }
10                     </ol>)
11             }
12         })
13         <!-- 上面代碼的 NyComponent 組件有兩個 span 子節點，它們都可以通過 this.props.children 讀取 -->
14         <!-- 這裏需要註意， this.props.children 的值有三種可能：如果當前組件沒有子節點，它就是 undefined ;如果有一個子節點，數據類型是 object ；如果有多個子節點，數據類型就是 array 。所以，處理 this.props.children 的時候要小心。 -->
15         <!-- React 提供一個工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map 來遍歷子節點，而不用擔心 this.props.children 的數據類型是 undefined 還是 object。更多的 React.Children 的方法， -->
16         ReactDOM.render(
17             <NyComponent>
18                 <span>hello</span>
19                 <span>world</span>
20             </NyComponent>,
21             document.getElementById(‘container‘)
22         )

4.PropTypes

　　a.組件的屬性可以接受任意值，字符串、對象、函數等等都可以。有時，我們需要一種機制，驗證別人使用組件時，提供的參數是否符合要求。

　　b.組件類的PropTypes屬性，就是用來驗證組件實例的屬性是否符合要求

 1 <!-- 組件的屬性可以接受任意值，字符串、對象、函數等等都可以。有時，我們需要一種機制，驗證別人使用組件時，提供的參數是否符合要求。 -->
 2         <!-- /組件類的PropTypes屬性，就是用來驗證組件實例的屬性是否符合要求 -->
 3         var MyTestComponent = React.createClass({
 4             propTypes: function () {
 5                 title: React.PropTypes.string.isRequired
 6             },
 7             render: function () {
 8                 return <h1> {this.props.title} </h1>
 9             }
10         })
11         <!-- 上面的Mytitle組件有一個title屬性。PropTypes 告訴 React，這個 title 屬性是必須的，而且它的值必須是字符串。現在，我們設置 title 屬性的值是一個數值。 -->
12         <!-- 這樣一來，title屬性就通不過驗證了。控制臺會顯示一行錯誤信息。 -->
13         var data = 123
14         ReactDOM.render(<MyTestComponent title={data}/>,document.getElementById(‘container‘))
15         <!-- 此外，getDefaultProps 方法可以用來設置組件屬性的默認值。 -->
16         var MyTitle = React.createClass({
17           getDefaultProps : function () {
18             return {
19               title : ‘Hello World‘
20             };
21           },
22 
23           render: function() {
24              return <h1> {this.props.title} </h1>;
25            }
26         });
27 
28         ReactDOM.render(
29           <MyTitle />,
30           document.body
31         );

react入門----組件的基礎用法