create-react-app
React技術依賴的技術棧比較多，比如，轉譯JavaScript代碼需要使用Babel，模塊打包工具要使用Webpack，定製build過程需要grunt或者gulp。create-react-app命令可以免去配置這些技術棧的麻煩，自動生成一個基本的react-app模版項目，讓開發者可以基於這個模版快速開始React應用的開發。 首先要安裝create-react-app命令：
npm install --global create-react-app
然後就可以創建了：
create-react-app <app-name>
組件
React的首要思想是通過組件（Component）來開發應用。所謂組件，簡單說，指的是能完成某個特定功能的獨立的、可重用的代碼。這與傳統的web開發方式差異很大，以前用HTML來代表內容，用CSS代表樣式，用JavaScript來定義交互行爲，這三種語言分在三種不同的文件裏面，實際上是把不同技術分開管理了，而不是邏輯上的“分而治之”。組件則是按照邏輯（功能）來組織的。
Component作爲所有組件的基類，提供了很多組件共有的功能
JSX
JSX, 是JavaScript的語法擴展（eXtension），允許在JavaScript中可以編寫像HTML一樣的代碼。在JSX中使用的“元素”不侷限於HTML中的元素，可以是任何一個React組件，React判斷一個元素是HTML元素還是React組件的原則就是看第一個字母是否大寫。
React的理念
React的理念可以歸結爲一個簡單的公式：
UI = render(data)
即render函數，與它接收的data決定了UI渲染的結果。render是一個純函數，它的輸出完全依賴輸入。 對於開發者來說，重要的是區分開哪些屬於data，哪些屬於render，想要更新用戶界面，要做的就是更新data，用戶界面自然會做出響應。所以React實踐的也是“響應式編程”（ReactiveProgramming）的思想，這也就是React爲什麼叫做React的原因。
但在數據發生變化時，React並不會重新渲染整個頁面，它利用Virtual DOM實現了只渲染差異DOM的特性，渲染效率很高。
Virtual DOM
要了解Virtual DOM，就要先了解DOM，DOM是結構化文本的抽象表達形式，這裏所謂的結構化文本即HTML文本，HTML中的每個元素都對應DOM中某個節點，HTML元素的層級關係對應DOM樹。
瀏覽器在渲染HTML的時候，會先將HTML文本解析以構建DOM樹，然後再根據DOM樹渲染UI，當要改變界面內容的時候，可以通過對DOM進行操作來實現。
Web前端開發關於性能優化有一個原則：儘量減少DOM操作。因爲DOM操作會引起瀏覽器對網頁的重新繪製，這是一個相對耗時的過程。
然後Virtual DOM就是對DOM的更高一層的抽象，當React組件發生變化時，React新舊Virtual DOM之間的差異，再根據這些差異來操作真正的DOM。
React利用函數式編程的思想以及數據驅動的模式進行Web頁面的開發，數據的變化觸發的只是Virtual DOM的變化，剩下的部分由React去完成，開發者並不需要關心。
在開發React應用的時候，開發者使用的是聲明式的語法，專注於描述操作的結果，而不用過多考慮操作的細節。
易於維護組件的設計要素
設計組件的時候，應該儘量保持一個組件只做一件事。
如果發現一個組件功能太多代碼量太大的時候，就可以考慮將其拆分了；但拆分組件時要注意，組件的粒度過粗、過細都不好，這就同“一個組件只做一件事”一樣要看具體的場景。
拆分組件時，最重要也最困難的是要確定組件的邊界，每個組件都應該是可以獨立存在的，如果兩個組件邏輯太緊密，無法清晰定義各自的責任，那也許這兩個組件本身就不該被拆開，作爲同一個組件也許更合理。
通用的軟件設計原則也適用於組件的設計：組件應該遵循高內聚、低耦合的原則。
prop和state
React組件的數據分爲兩種，prop和state，無論prop或者state的改變，都可能引發組件的重新渲染。prop是組件的對外接口，state用於存儲組件的內部狀態。
prop
一個React組件通過定義自己能夠接受的prop就定義了自己的對外公共接口。props的類型可以是任何一種JavaScript語言支持的數據類型，包括函數。 當prop的類型不是字符串類型時，在JSX中必須用花括號{}把prop值包住。 React組件不能修改傳入的prop的值。
propTypes用於定於組件的接口規範： 首先倒入PropTypes
import PropTypes from 'prop-types';
在[classname].propTypes中添加對props的限制，比如下面的代碼限制caption字段爲string類型，而且isRequired必須傳值。
Counter.propTypes = {
caption: PropTypes.string.isRequired
}
這些添加的限制，會被用於運行時和靜態代碼檢查，據此來判斷組件是否被正確地使用。 但這種限制並不是強制的，即使被違反，組件仍能正常工作，但會在瀏覽器的console裏拋出警告信息。
propTypes可以幫助在開發階段儘早發現代碼中的問題，但是最好不要帶到產品環境中，babel-react-optimize可以在發佈產品代碼時自動移除定義的propTypes。
defaultProps可以用來爲props中的字段定義缺省值：
Counter.defaultProps = {
initValue: 3
};
state
state用來記錄組件自身數據的變化。 state的初始化要在組件的構造函數中進行，通過爲this.state賦值就完成了其初始化：
this.state = {
count: props.initValue
};
組件的state必須是一個JS對象，即使組件需要的只是一個數字類型的字段，也必須把它作state的一個字段。
通過this.state可以讀取其中的值，比如this.state.count.
修改state的值必須通過this.setState()方法進行：
this.setState({ count: this.state.count + 1 });
直接修改並不會生效，這是因爲setState除了會修改state的值外，還會觸發頁面的重新渲染。
組件的生命週期
在一個React組件的生命週期中，會經歷三個過程：
- 裝載過程（Mount），也就是把組件第一次在DOM樹中渲染的過程；
- 更新過程（Update），當組件被重新渲染的過程；
- 卸載過程（Unmount），組件從DOM中刪除的過程。
裝載過程
組件第一次被渲染時，主要會調用如下函數：
- constructor
- render
- componentDidMount
constructor
並不是每個組件都需要定義自己的構造函數，在下面的情況下，組件才需要定義構造函數：
- 初始化state，如果組件包含state，就需要在構造函數初始化；
- 綁定成員函數的this環境
render
一個React組件可以忽略其他所有函數都不實現，但是一定要實現render函數，因爲父類React.Component類對除render之外的生命週期函數都有默認實現。 render函數並不做實際的渲染動作，它只是返回一個JSX描述的結構，最終由React來進行渲染。 render函數應該是一個純函數，完全根據this.state和this.props來決定返回的結果，而且不要產生任何副作用。
componentDidMount
React在根據render返回的結果來渲染頁面的時候，componentDidMount會被觸發，但它並不在render執行後立即觸發，要等React庫根據所有組件的render都執行完。
更新過程
更新過程主要會調用如下函數：
- shouldComponentUpdate
- render
- componentDidUpdate
shouldComponentUpdate
shouldComponentUpdate也是一個非常重要的函數，它的返回值是bool，決定是否應該重新渲染組件。 需要優化性能時，可以定製shouldComponentUpdate。父類React.Component中的默認實現方式是始終返回true。定製時可以對比state與props，只有變化時才更新。
卸載過程
卸載過程只涉及一個函數componentWillUnmount，當React組件要從DOM樹上刪除掉之前，對應的componentWillUnmount函數會被調用，所以這個函數適合做一些清理性的工作。 比如在componentDidMount中用非React的方法創造了一些DOM元素，如果撒手不管可能會造成內存泄露，那就需要在componentWillUnmount中把這些創造的DOM元素清理掉。
組件向外傳遞數據
通過prop可以從父組件傳遞數據給子組件，很多時候也需要將數據從子組件返回給父組件，這時仍然可以利用prop來實現。 prop支持任何類型的JavaScript對象，包括函數，函數可以像其他對象一樣作爲prop的值從父組件傳遞給子組件，又可以被子組件作爲函數調用，於是可以藉助函數將數據從子組件返回給父組件。
但這種傳遞方式在涉及到多個、多層組件之間的數據傳遞時就比較複雜了，多層組件的數據需要層層傳遞，平級組件之間的數據又需要依賴父組件的中轉，可能導致數據冗餘、數據流混亂。接下來看看redux是如何解決這類問題的。
參考書籍
《深入淺出React和Redux》 程墨