React.js快速入門 — (1)Guideline & Create-React-App
針對16.8版後的React.js所製作的新手入門上手文章
React.js是由Facebook開發。在2019開始，React.js不管是在社群上或是發展上開始達到穩定上升狀態。官方與各方面開發者對React.js開始做出變革。像是React.js發表給Function Component的Hooks功能、Redux作者不再建議對Container與Presentational Components分離或是更多新手友善的工具出現(2018年底的Create-react-app第二版)等等。
本篇是針對還未碰過Javascript View框架函式庫的新手如何上手的教學以及Guideline。是將官方文件換句話說成自己的話並且濃縮出來。順便留下我在2020年學習React.js的足跡。
在開始之前，先確保你會以下技能才能繼續學習：
1. 知道HTML、CSS、Javascript他們的職責
2. HTML的標籤
3. 略懂物件導向程式設計
該系列學習完之後，強烈建議回到React.js官方文本二刷(安裝加上主要概念章節)，完整的內容能讓自己補足看不見或是之前的疑惑。相信我，二刷的時候會比一刷少掉三分之二的時間，也讓思路更加完整。
本系列會分成五大區塊論述：
1. Create-React-App — 萬事起頭超簡單(本篇)
2. Overview — React.js的概觀
3. JSX — React.js的簡潔助手
4. Component — React.js最小組成
5. Prop&State&Hook — React.js如何存取資料
Create-React-App
以前在建置React.js的環境是件非常瑣碎的事情，除了安裝node.js與npm是必要的之外。還必須自己安裝Webpack、Babel、ESLint這些工具與設定。先簡單介紹一下這三個工具：
- Webpack：打包各式檔案，CSS、靜態檔案，或是將JSX、較新版的Javascript做預處理。
- Babel：協助編譯JSX、較新版的Javascript，盡量讓瀏覽器能夠看得懂的較舊版的Javascript。
- ESLint：協助偵錯Javascript是否有撰寫上的失誤。
這些事情對於新手而言都算難上加難，還沒碰到React.js就先陣亡。 因此，React.js就開發了Create-React-App，將這些工具都包裝協助完成環境。
安裝Create-React-App的前置步驟，就是去Node.js官網下載安裝，安裝起來就會內建 npm (協助管理Node.js函式庫)與 npx (協助運行 npm)。
接著前往終端機下指令：
npx create-react-app <我的專案名>登愣~Create-React-App幫你建立了一個你命名的專案名的資料夾，這樣就完成建置了。
接下來只要進去資料夾， npm start 就能開啟網頁囉！
預設網頁為： http://localhost:3000/
請注意：建議都使用Google Chrome，主要就是Javascript版本有些瀏覽器不支援，像是我用Edge打開會是一個空白網頁。
cd <我的專案名>
npm start更多Create-React-App詳細內容，請前往官網研討。
結語
我們完成了React.js環境的簡單建置，在下一篇開始探討React.js的檔案結構以及它被發明出來的想法介紹。
喜歡的話可以給我一點掌聲唷！
下一篇：React.js快速入門 — (2)Overview
