【React入門實例（運行於瀏覽器duan）】

1、HTML模板

 

2、ReactDOM.render()

ReactDOM.render是React的最基本方法，用於將模板轉換爲HTML語言，並插入指定的DOM節點。

ReactReactDOM.render(
    <h1>Hello,World!</h1>,
    document.getElementById('example')   
);

上面代碼將一個 h1 標題，插入 example 節點，運行結果以下：

HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是jsx的語法，它容許 HTML 與 JavaScript 的混寫

3、JSX語法

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

JSX 容許直接在模板插入 JavaScript 變量。若是這個變量是一個數組，則會展開這個數組的全部成員，如：

運行結果以下：

4、組件

React代碼容許將代碼封裝成組件，而後像插入普通HTML標籤同樣，在網頁中插入這個組件。React.createClass方法就用於生成一個組件類

上面代碼中，變量 HelloMessage 就是一個組件類。模板插入 <HelloMessage /> 時，會自動生成 HelloMessage 的一個實例（下文的"組件"都指組件類的實例）。全部組件類都必須有本身的 render 方法，用於輸出組件。

注意：組件類的第一個字母必須大寫，不然會報錯，好比HelloMessage不能寫成helloMessage。另外，組件類只能包含一個頂層標籤，不然也會報錯。

運行結果以下：

添加組件屬性，有一個地方須要注意，就是 class 屬性須要寫成 className ，for 屬性須要寫成 htmlFor ，這是由於 class 和 for 是 JavaScript 的保留字。

5、this.props.children

this.props的屬性和組件的屬性一一對應，可是this.props.children例外，它是表示組件的全部子節點

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

須要注意的是：this.props.children 的值有三種可能：若是當前組件沒有子節點，它就是 undefined ;若是有一個子節點，數據類型是 object ；若是有多個子節點，數據類型就是 array 。因此，處理 this.props.children 的時候要當心。

6、PropTypes

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

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

上面的Mytitle組件有一個title屬性。PropTypes 告訴 React，這個 title 屬性是必須的，並且它的值必須是字符串。如今，咱們設置 title 屬性的值是一個數值。

這樣一來，title屬性就通不過驗證了。控制檯會顯示一行錯誤信息。

此外，getDefaultProps 方法能夠用來設置組件屬性的默認值。

上面代碼會輸出"Hello World"。

7、獲取真實的DOM節點

組件並非真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫作虛擬 DOM （virtual DOM）。只有當它插入文檔之後，纔會變成真實的 DOM 。根據 React 的設計，全部的 DOM 變更，都先在虛擬 DOM 上發生，而後再將實際發生變更的部分，反映在真實 DOM上，這種算法叫作 DOM diff，它能夠極大提升網頁的性能表現。

可是，有時須要從組件獲取真實 DOM 的節點，這時就要用到 ref 屬性：

上面代碼中，組件 MyComponent 的子節點有一個文本輸入框，用於獲取用戶的輸入。這時就必須獲取真實的 DOM 節點，虛擬 DOM 是拿不到用戶輸入的。爲了作到這一點，文本輸入框必須有一個 ref 屬性，而後 this.refs.[refName] 就會返回這個真實的 DOM 節點。

須要注意的是，因爲 this.refs.[refName] 屬性獲取的是真實 DOM ，因此必須等到虛擬 DOM 插入文檔之後，才能使用這個屬性，不然會報錯。上面代碼中，經過爲組件指定 Click 事件的回調函數，確保了只有等到真實 DOM 發生 Click 事件以後，纔會讀取 this.refs.[refName] 屬性。

8、this.state

組件免不了要與用戶互動，React 的一大創新，就是將組件當作是一個狀態機，一開始有一個初始狀態，而後用戶互動，致使狀態變化，從而觸發從新渲染 UI 

 

上面代碼是一個 LikeButton 組件，它的 getInitialState 方法用於定義初始狀態，也就是一個對象，這個對象能夠經過 this.state 屬性讀取。當用戶點擊組件，致使狀態變化，this.setState 方法就修改狀態值，每次修改之後，自動調用 this.render 方法，再次渲染組件。

因爲 this.props 和 this.state 都用於描述組件的特性，可能會產生混淆。一個簡單的區分方法是，this.props 表示那些一旦定義，就再也不改變的特性，而 this.state 是會隨着用戶互動而產生變化的特性。

9、表單

用戶在表單填入的內容，屬於用戶跟組件的互動，因此不能用 this.props 讀取

 

上面代碼中，文本輸入框的值，不能用 this.props.value 讀取，而要定義一個 onChange 事件的回調函數，經過 event.target.value 讀取用戶輸入的值。textarea 元素、select元素、radio元素都屬於這種狀況