如何開始React的第一步

首先:建立React專案

//建立新專案
npx install -g create-react-app`
create-react-app my-app
//進入專案目錄
cd my-app
//啟動開發用伺服器
npm start

如果npm版本是5.2.0以上的話可以使用npx快速建立專案

npx create-react-app my-app
cd my-app
npm start

若不是上述的方式

只要引入react.js、react-dom.js以及babel-standalone即可快速開始練習React。
需要babel函式庫，是因為React通常使用JSX來撰寫，能提供語意化且更易懂的標籤使提我們升撰寫效率，但需要透過babel編譯為瀏覽器看得懂的原生JavaScript語法，此外如果使用ES6語法也要透過babel編譯。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js" </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>

線上開發環境

初期學習可以透過線上的開發環境來練習，可立即看到執行的結果，缺點是能提供的開發輔助功能與開發編輯工具比起來(例如VSCode)較少。
https://codesandbox.io/

若編輯工具是VSCode，建議安裝擴充套件輔助

ESLint:除了提升程式碼品質(縮排)之外，對於剛入門的React新手滿有幫助，可幫你找出錯誤的語法，項是少了括號等等常見的錯誤。
如果是在團隊開發，請注意專案原先是否有使用ESLint，否則就像我一樣悲劇，只要被我更改過的檔案全部都會自動重新排版，就無法看出原先更改過哪些的程式碼。

Chrome 開發工具

React Developer Tools
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
此開發工具可以提升開發速度，除了查看元件，還可看到每個元件的state、props，對於偵錯是很有幫助的，可以透過這些來確認是否有正確把值塞入元件。此外還可以直接修改props的值，修改後馬上可以看到React重新渲染的結果。

Redux DevTools
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd