由於即將參加專案的緣故，需要了解學習 React 這個庫。所以今天開始了 React 的學習之旅。由於我有著 Angular 和 Vue 的背景，相信學習 React 不會有太大的困難。
React 不同於 Angular，React 僅僅是一個構建動態 UI 的庫。但是早有聽說它的程式碼構建方式有點古怪，而且是典型的函數語言程式設計，所以就認真的研究了一下其中的奧祕。
Step 1：安裝Create-react-app工具並初始化開發環境create-react-app 工具可以結合npm 和 node.js 非常方便的構建出一個 React 應用。這裡不建議直接在你的HTML檔案裡通過 <script></script>的方式匯入 react 的js檔案，因為那樣會使得你的程式碼結構非常混亂，而且也不符合目前現金的MVC的開發架構。
關於 create-react-app的安裝方式和說明，請參閱 React的官方文件，地址為：
https://zh-hans.reactjs.org/docs/create-a-new-react-app.html當完成第一步的安裝後，會得到一個初始化的專案，裡面含有很多檔案，下面是初始專案的目錄結構
注意：你的頁面檔案其實是在 public 資料夾下的 index.html
React 這個庫其實是用來構建資料驅動的動態的UI介面，一般不要用react去寫一些靜態頁面，有點大材小用。
React 去開發動態UI介面時，主要的思想是通過JSX語法定義元素，然後將元素放置在元件中，最後配合 ReactDOM 類的 render 方法來渲染該元素，將渲染後形成的動態的DOM新增到 html 裡的某個div中去。
執行初始化專案後，會看到一個 React 的logo
而且明顯的看到這個頁面是有 CSS 效果的。那麼它是怎麼被渲染出來的呢？我在研究了專案的檔案和程式碼之後，發現了一些線索。下面就讓我們一起來順通摸瓜。
Step 3：小試牛刀src / App.js
在這個js檔案中，分別定義了元素和元件。可以從程式碼看出來，元素是用來定義頁面的內容或者顯示的元素的。而元件的基本構成是需要元素來幫忙的，即元件中如果沒有明確指明元素，那麼程式則無法執行。還要注意在程式碼的最後一行，一定到通過 export 這句話將函式式元件匯出，這樣其他檔案才能看到這個元件，並使用。
src / App.css
這個CSS檔案與普通的CSS沒有什麼不同。要注意的地方就是裡面的類選擇器或者 id 選擇器需要與元素裡的 className相對應，否則效果沒法生效。
src / index.js
注意在這個檔案的頂部，需要從 App.js 檔案匯入 App 這個元件。在 <>標籤中可以寫入元件名，React 約定自定義的元件名稱第一個字母必須大寫，比如這裡的 <App />。還有就是通過 document.getElementById() 方法去 index.html 檔案中找到 ID 是 root 的標籤。這就是渲染的最後過程，即將元件渲染為最終的html，然後加入到 root 這個根 DOM 裡面去。
public / index.html
這裡在 body 標籤裡面應該有一個 id 為 root 的 div 標籤，這樣 index.js 檔案裡的 render 才能夠找到這個標籤，並將渲染好的內容新增進去。
注意在 src 裡的 index.js 必須與 public 裡的 index.html 名稱一致。
心得體會通過這次的小試牛刀，徹底打消了我對React技術的排斥情緒。以前稍微解除過這個React，發現它的這種構建網頁的方式有些古怪。但是有了 Angular 和 Vue 的經驗後，回過頭來再看React，發現這三個前端技術有著很多的相似之處。它們都是將檢視與資料或者狀態進行了分離，都是通過元件化的風格來構建頁面，有了元件化的思想和程式碼設計風格，日後的元件複用就可以輕鬆的實現了。
再談一談我對React的感覺吧。這次構建的元件僅僅是展示了內容而已，並沒有涉及到State、事件處理、表單的資料處理等方面，這是以後要了解的東西。React關注的點我感覺其實是頁面上能夠與使用者互動的部分，比如動態資料顯示、表單、不同條件下呈現不同的內容。更多的是在開發Web應用，而不僅僅是一個頁面或者網站。