2-概覽
什麼是 React
React 用於構建用戶界面，它是一種聲明式的，高效靈活的 JavaScript 庫。
React 有擁有衆多組件，現在我們要從 React.Component 子類開始：
code
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Example usage: <ShoppingList name="Mark" />很快我們就會用到些有趣的、看起來很像 XML 的標籤。你的組件會告訴 React 你想渲染什麼。然後，當你組件中的數據變化時，React 將立刻更新數據，並將其渲染出來。
這裏，ShoppingList 是一個 React 組件類。組件接受參數，調用 props，並通過 render 方法返回視圖層，將內容展示出來。
render 會返回 React 元素 ：它是輕量化的描述，描述了你想渲染的那個東西。
React 拿到這個描述，並把它渲染到屏幕上。大多數 React 開發者使用一種特殊的語法：JSX，它讓我們可以更容易地寫這樣的結構。在構建的時候，<div />語法會被轉換爲React.creatElement('div')。所以上面這個例子等同於：
code
return React.createElement('div', {className: 'shopping-list'},
React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);如果你對 creatElement() 感興趣，請在 API 引用中進一步查看詳情。在本教程中，我們不會直接用到它，而是會繼續使用 JSX。
在 JSX 中，不論任何 JavaScript 表達式，你都可以把它放進花括號中。每個 React 元素都是真實的 JavaScript 對象，你可以用來存儲變量，或者傳入你的程序。
雖然 ShoppingList 組件只會渲染內建的 DOM 組件，但你其實可以很容易地構建自定製的 React 組件：只需要寫 <ShoppingList /> 就可以。每個組件都被包裹着，所以它們能獨立運行。這個機制讓你得以用簡單的組件來構建複雜的 UI。
開始編寫
我們從這個例子開始：初始代碼。
這份代碼已經提供程序的外殼和樣式。你只需要填充其中的 JavaScript 就可以。
注意，我們有三個組件：
- Square
- Board
- Game
Square 組件會渲染一個單獨的 <button /> , Board 組件會渲染出9個這樣的小方格，Game 組件渲染出一塊棋盤，它有一些佔位符，待會兒我們會在裏頭填入東西。到現在，組件還都不是交互式的。
通過 Props 傳數據
開始在實踐中學習吧！試着從 Board 組件傳一些數據到 Square 組件中去。
在 Board 組件中的 renderSquare 方法裏，改寫代碼，把 value 值傳給 Square 組件：
code
class Board extends React.Component {
renderSquare(i) {
return <Square value={i} />;
}接着，改寫 Square 組件中的 render 方法，用 {this.props.value} 替代 {/* TODO */}，來顯示出那些傳進來的數據：
code
class Square extends React.Component {
render() {
return (
<button className="square">
{this.props.value}
</button>
);
}
}更改前：
更改後：
交互式組件
這一步，讓 Square 組件實現這樣的效果：你點擊它，就會填進去一個 “X”。試着修改 Square 組件的 render() 函數返回的 button 標籤，改成這樣：
code
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => alert('click')}>
{this.props.value}
</button>
);
}
}現在，如果你點擊小方格，瀏覽器應該會跳出一個彈窗。
這裏使用了JavaScript的新語法：箭頭函數。需要注意的是，我們把一個函數作爲 cnClick 的屬性傳了進去。如果執行的是 onClick={alert('click')}，那麼，彈窗會立即出現，而不是在點擊後纔出現。
React 組件能夠通過在 constructor 中設置 this.state 來擁有狀態（state），這種狀態是組件私有的。現在，我們把小方格里的當前值存入 state，然後在小方格 被點擊時，改變這個值。
首先，在類中，添加一個 constructor，來初始化 state。
code
class Square extends React.Component {
constructor() {
super();
this.state = {
value: null,
};
}
render() {
return (
<button className="square" onClick={() => alert('click')}>
{this.props.value}
</button>
);
}
}在 JavaScript 類中，定義子類的 constructor 的時候，需要顯示地調用 super() 函數。
現在，改寫 Square 組件的 render 方法，以實現點擊後，把當前狀態值顯示出來的功能：
- 把
<button>標籤中的this.props.value換成this.state.value - 把
() => alert()事件處理器改爲() => this.setState({value: 'X'})
現在的 button 標籤看起來是這個樣子：
code
class Square extends React.Component {
constructor() {
super();
this.state = {
value: null,
};
}
render() {
return (
<button className="square" onClick={() => this.setState({value: 'X'})}>
{this.state.value}
</button>
);
}
}無論何時調用 this.setState，組件都會立即觸發更新，使 React 合併傳進來的新狀態，並渲染組件和它的子組件。渲染後， this.state.value 的值會變成 X，所以格子裏會出現 X。
點擊任何一個小方塊，都會出現 X。
開發者工具
Chrome 和 Firefox 的 React 擴展開發者工具能夠讓你在瀏覽器中檢查 React 組件樹。
它能讓你檢查組件樹中任何一個組件的屬性和狀態。
安裝之後，單擊頁面中的任何元素，點擊 “Inspect” 來打開開發者工具，React 標籤就會出現在標籤欄最右處。
然而，需要注意的是，要想在 CodePen 中使用，還需要以下步驟：
1.登錄或者註冊你的郵箱(防止垃圾郵件)
2.點擊 “Fork” 按鈕
3.點擊 “Change View”，接着選擇 “Debug mode”
4.在新打開的標籤中，開發者工具裏就應該有 React 標籤了