開啟 terminal

首先開啟 編輯器
範例中使用的是 vs code
可以在這裡下載跟安裝
開啟 terminal 快捷鍵為 ctrl + ~
或直接點擊編輯器下方

安裝node / npm

首先要安裝 node / npm / npx(版本5.X以上合併)
在這裏下載跟安裝
如果已安裝過，可以在 terminal 內查看版本

如果不想用 npm 也可以用 yarn
基本上大同小異，這邊會以 npm 做示範

create react app

• 可簡稱為 CRA
• 從 command-line 快速建立 React 專案的骨架
• 讓測試跟部署變得更容易

一些常用到的 cmd 指令

切換資料夾

安裝 package / 移除

安裝 create react app

有兩種建立方法 用 npx 或 npm
npx 或 npm

方法 1

在 terminal 內輸入，appName 是安裝的目標資料夾名字

npx create-react-app appName

方法 2

在 terminal 內輸入，appName 是安裝的目標資料夾名字
第一行 安裝 npm package 只要一次
這裏 appName 是資料夾名字，之後每次要 create 新的 app 就執行這行

sudo npm i -g create-react-app 
create-react-app appName 

create 時該目錄內需要為空，不可以有其他 react app ，否則會失敗

npm 跟 npx 差別為，
npm 需要先 install package globally 後才能進行 create
而 npx 不用安裝 package 就能直接執行 (execute)

關於兩者之間的更詳細的比較可以參考這篇內容

輸入之後 開始進行安裝
就可以先放空跟去泡咖啡

要等一陣子..

2022補充 更新 npm 版本與 node 版本

如果安裝的 npm 跟 node 版本不夠新，會無法執行 create-react-app
這時候就要更新 npm 跟 node
依序執行
先清空 npm 的快取值（-f 表示強制）

sudo npm cache clean -f

然後安裝新的版本

npm install -g npm

最後把 node 穩定版本也更新上去

sudo n stable

如果遇到 Error npm is known not to run on Node.js vXXXX ... 這個錯誤就表示 node 版本太舊了
去 官網 下載並更新版本就可以了

安裝完成時會顯示這個畫面

接下來輸入

npm start

通常這時候會自動開啟瀏覽器，或是在網址列中輸入 localhost 3000
畫面出現**旋轉的 react logo **就表示成功執行

如果你看到的是這樣的畫面，那就表示成功建立了 react 的專案
最後，如果要終止 npm start的話，按下 ctrl+c 就可

但要是 npm start 後跑出一堆紅字的話..請待下回分曉