作者：Jing Chen
年後，接到一個任務，就是用react重新寫項目後臺的測試頁面，剛接到這個任務的時候，是一臉懵逼的，因為我沒有學過js，也沒有學過jQuery，對前端技術，完全是0的基礎，當時把我愁的頭都大了。但是也沒有辦法，硬著頭皮上，找了我們的前端做我的老師，給我推薦了兩個網站，一個是學習js基本教程，另一個是學習antd，於是就這樣從0開始學習react，感覺還是有挺多收穫的，所以把學習的過程總結下來，分享給那些和我一樣從頭學習react的同學，前面的環境搭建這種細節就不在這裡細說了，直接來點實用的吧。
React狀態機
React中有個非常重要的定義就是狀態機，與jQuery不同，通過調用setState(data, callback)方法，改變狀態，就會觸發React更新UI。大部分情況下，我們不需要提供callback函數。React會自動的幫我們更新UI。
上面這段代碼講的是如何刪除一個節點，即點擊一個button按鈕，下面的節點狀態就會改變，仔細看這段代碼就會發現，跟jQuery實現節點的刪除還是有很大的差別的。大部分的組件應該從props屬性中獲取數據並渲染。但有的時候組件得相應用戶輸入，同服務器交互，這些情況下會用到state。React的官方說法是：儘可能的保持你的組件無狀態化。為了實現這個目標，得保持你的狀態同業務邏輯分離，並減少冗餘信息，儘可能保持組件的單一職責。構建幾個無狀態的組件用來渲染數據，在這些之上構建一個有狀態的組件同用戶和服務交互，數據通過props傳遞給無狀態的組件。
Antd
提到組件，就不得不提antd，Ant Design 是螞蟻金服體驗技術部出品的一套 React 組件庫。在 React 中使用非常方便, 安裝之後只用 import 相應的組件就可以。
使用Antd的好處在於不用自己編寫基礎的組件，且Antd本身封裝了很多常用的功能，使用起來非常方便，而且能提供一個統一的樣式，這樣就不需要在調整樣式佈局上浪費大量的時間，提升開發效率。
以一個最常用的Form表單為例
如此就生成了一個最簡單的表單，但有點不同的是，在表單中輸入的值，需要我們定義一個onchange事件的回調函數，且通過event.target.value讀取用戶輸入的值（select、radio也一樣），具體實現如下：
react封裝一個組件
react最便利的地方在於允許將代碼封裝成一個組件（component），然後只需import進去後，就可以一直複用，那麼如何封裝一個屬於自己的組件呢，其實也非常簡單。react提供了一個封裝函數React.createClass，只需將代碼用這個方法包起來，就生成了一個組件類。例如，我們要封裝一個輸出“hello world！”的組件，組件名為message。
如何調用一個dialog頁面
現在把整個dialog頁面封裝成一個組件，然後在主頁面import進去即可。
如何從服務器端獲取數據
組件的數據來源，通常是通過Ajax請求從服務器獲取數據，等到請求成功，再用this.setState方法重新渲染UI。實現起來也非常簡單。
瞭解了上述的一些最基本的react用法後，就可以開始寫一些簡單的頁面了。