把字體搞大，看清楚點

入門級別

1.0 hello world

有圖有真相把！

Browser.js 的作用是將 JSX 語法轉為 JavaScript 語法，，ReactDOM.render 是 React 的最基本方法，用於將模板轉為 HTML 語言，並插入指定的 DOM 節點。

2.0jsx語法可以和js混寫

map 的用法，

map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理後的值。

3.0 直接插入一個變量

4.0 組件

要點：1.0

React.createClass 方法就用於生成一個組件類

2.0

所有組件類都必須有自己的 render

3.0

組件類的第一個字母必須大寫，否則會報錯，比如HelloMessage不能寫成helloMessage。另外，組件類只能包含一個頂層標簽，否則也會報錯

4.0

組件可以加入任意屬性，組件的屬性可以在組件類的 this.props 對象上獲取，比如 name 屬性就可以通過 this.props.name 讀取

5.0

添加組件屬性，有一個地方需要註意，就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。

6.0 this.props.children 屬性。它表示組件的所有子節點

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

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

5.0

PropTypes

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

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

Mytitle組件有一個title屬性。PropTypes 告訴 React，這個 title 屬性是必須的，而且它的值必須是字符串。現在，我們設置 title 屬性的值是一個數值

這時候他就報錯了

我們修改var data = ‘123‘,就沒報錯啦！

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

6.0

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

需要註意的是，由於 this.refs.[refName] 屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以後，才能使用這個屬性，否則會報錯。上面代碼中，通過為組件指定 Click 事件的回調函數，確保了只有等到真實 DOM 發生 Click 事件之後，才會讀取 this.refs.[refName] 屬性。註意註意，這裏有一個warn 哈哈，解決不了，看看下面繼續學習怎麽樣，身為一個合格的程序員，控制臺有一個紅色的都是你的錯。

7.0 this.state

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

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

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

8.0表單

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

9.0 很重要的就是生命周期，如果你不知道，為啥重要，那你就先記住，必須記住機機型啦！

組件的生命周期分成三個狀態：

• Mounting：已插入真實 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真實 DOM

React 為每個狀態都提供了兩種處理函數，will 函數在進入狀態之前調用，did 函數在進入狀態之後調用，三種狀態共計五種處理函數。

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

此外，React 還提供兩種特殊狀態的處理函數。

• componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用
• shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時調用

10.0ajax

組件的數據來源，通常是通過 Ajax 請求從服務器獲取，可以使用 componentDidMount 方法設置 Ajax 請求，等到請求成功，再用 this.setState 方法重新渲染 UI

React 本身沒有任何依賴，完全可以不用jQuery，而使用其他庫。

10.1我們甚至可以把一個Promise對象傳入組件

代碼從Github的API抓取數據，然後將Promise對象作為屬性，傳給RepoList組件。

如果Promise對象正在抓取數據（pending狀態），組件顯示"正在加載"；如果Promise對象報錯（rejected狀態），組件顯示報錯信息；如果Promise對象抓取數據成功（fulfilled狀態），組件顯示獲取的數據。

（媽的竟然有一個警告，我知道這個警告，但是目前我不知道怎麽解決，哈哈），
以後解決。

其實就是加一個索引就能解決，並不是唯一解決辦法，但是個很好的解決方法。

這些，就是一些很基礎的東西啦！很重要的，

react從0到0（再尼瑪學不會自己就去吃屎吧（我不是針對看到這篇文章的人，我只針對自己））