React的理解 React的理解，歸納總結為以下一個公式： UI=render(data)公式表達的含義可以這麼理解：使用者看到的介面（UI），應該是一個名為render的函式執行後的結果，其只接受資料作為入參（data）。這是一個純函式，所謂的純函式，就是指沒有任何副作用，完全依賴於入參的函式，兩次函式呼叫輸入如果相同，得到的結果頁絕對相同。這樣的結果就是，最終的使用者介面，在render函式確定的情況下，完全取決於輸入資料。對於開發者來說，重要的是區分哪些屬於data，哪些屬於render，想要更新使用者介面，要做的就是更新data，使用者介面自然會做出響應，所以react也可稱為“響應式程式設計”（Reactive Programming）的思想，這也就是React名稱的由來。以下截圖為一個簡單的元件結構，可以看出裡面只有一個render函式，其返回一個DOM元素，可以得出結論：元件中其他東西可以沒有，但render一定要有，至於data資料由來，我們後面做說明

元件基本截圖

create-react-app腳手架create-react-app 是業界最優秀的 React 應用開發工具之一，本文會嘗試在 create-react-app 建立的工程中使用 antd 元件，並自定義 webpack 的配置以滿足各類工程化需求。

1、安裝webstorm + Noje.js(全域性安裝)   具體安裝步驟見官網2、全域性安裝create-react-app腳手架，執行以下命令即可     1.1 npm install --global  create-react-app 安裝以上腳手架     1.2 執行命令create-react-app my-react-demo建立react工程，前者為執行命令，後者為專案名稱     1.3 開啟生成的工程，執行 npm start 啟動工程，預設訪問地址為：http://localhost:3000     注：這裡可用cnpm代替npm        NMP安裝外掛是從NPM官網下載對應的外掛包，該網站的伺服器在國外，經常會出現下載緩慢或出現異常，這時便需要找到另外的方法提供穩定的下載，這個方法就是CNPM。阿里巴巴的淘寶團隊把NMP官網的外掛都同步到了在中國的伺服器，提供給我們從這個伺服器上穩定下載資源。        CNMP同樣是NMP的一個外掛，要安裝的話需要在CMD命令列控制檯執行以下命令：        npm install cnpm -g --registry=https://registry.npm.taobao.org        安裝完成後可以使用cnpm -v命令檢視版本號，要使用cnmp命令的話最好在安裝後重新開啟CMD命令列控制檯。cnpm的用法和npm的用法一致，只是在執行命令的時候將npm改為cnpm。

執行建立工程命令效果圖

效果圖

初始化工程結構node_modules 是所有依賴元件庫的集合，類似於後端Java的External Libraries，如下idea截圖

React圖

Java圖

public/index..html是工程啟動後頁面的入口，資料的旋渲染也是基於該入口的id=root的節點DOM元素src/index.js是react元件掛載的入口，渲染過程中獲取public/index..html的root節點，然後將資料繫結在該節點上src/App.js為測試元件package.json為依賴配置檔案以下為總結截圖

工程結構圖

package.json結構解析如右圖，package.json的主要結構，我們主要了解 dependencies 和 scriptsdependencies裡面主要是新增的依賴，key為依賴包名，value為依賴包的版本；開發者可以在這裡面配置好後執行npm install 命令後就可以下載對應的依賴，當然也可以選擇直接用命令新增依賴，命令為 npm install xxx –save ，執行後工程在下載完後，也自動將依賴新增到 dependencies，這裡注意一點，命令所新增的依賴版本都是最新版本。scripts 為指令碼物件集，react-scripts 是create-react-app 新增的一個npm包，所有的配置檔案都隱藏在node_modules/react-scripts 目錄下。這裡除了npm自帶的命令之外，開發者還可以自定義指令碼命令；工程初始化是主要為以下幾個命令

1.start 為啟動命令，執行 npm start 時工程會呼叫 react-scripts start 這個命令啟動工程2.build為構建命令，當工程需要釋出上線時，一般會執行 npm build 這個命令，工程中呼叫 react-scripts build 命令進行構建生成壓縮檔案3.test 為測試包命令，用於單元測試4.eject （彈射），這個命令比較有意思，執行它時所做的就是把隱藏在react-scripts中的一系列技術棧配置都“彈射”到應用的頂層，然後我們就可以研究這些配置細節了，還可以更靈活地定製應用的配置  注意： eject 命令是不可逆的，就想駕駛員“彈射”出駕駛艙，就等於放棄了飛機的駕駛權，是不可能在回到駕駛艙繼續駕駛的，所以在使用該命令是，最好做一份備份5.其他命令感興趣的小夥伴可以自己百度瞭解一下

以下為總結截圖

package.json圖

eject命令執行cnpm run eject 命令，進行技術棧的“彈出”，工程的結構變化如右圖；我們可以看到左側導航欄多了config目錄和scripts目錄；右側package.json 配置檔案中，scripts 裡面的命令對映也發生了改變，都對映到csripts目錄下的三個檔案，而dependencies裡面多了很多依賴，這是因為eject命令將底層的依賴都移動到了應用的頂層，讓開發者可以自由選擇在未執行以上命令之前，工程啟動的埠號為預設的3000，我們在工程是找不到該埠號的，執行eject命令後，我們可以在scripts/start.js檔案中找到了該埠號，並將之改為3030

埠號圖

config 目錄下均是一些工程初始化的配置檔案，我們暫時無需關係以下為總結截圖

eject命令後的package.json圖