React 教學系列文 0.5 - 設置環境

了解了 React 的角色以及為何要學 React 後，下一步就是要來設置能寫 React 的環境。

如果你還不清楚 React 是什麼，可以先看上一篇文章：為甚麼要學 React？React 和 Vue、原生 JS 的差別？

設置 React 環境的步驟不會很難，只要照著以下的步驟就能順利設置環境，步驟分為：

1. 下載並安裝 Node.js
2. 使用 Terminal 建置 React 環境

接著就可以運行 React 開始寫程式了，沒錯就這麼簡單～

下載並安裝 Node.js

到 Node.js 的官網，點擊畫面中的 Download Node.js，下載完後行安裝即可。

安裝過程基本上就是一直按“繼續”就好，不需要額外什麼設定。

等他安裝完後這一部就完成了，我們可以在終端機中輸入 node -v 和 npm -v 確認 Node.js 和 npm 已正確安裝。

如果你是 Mac 用戶，推薦你使用 Warp 這個終端機，而如果你是 windows 用戶，可以使用 windows terminal，下載後打開即可在裡面輸入：

node -v

npm -v

如果正確安裝，他會顯示你的 node 和 npm 版本。

當然，你也可以直接使用 vs code 內建的 terminal 來執行命令，只要按 ctrl + ` 就可以打開並輸入命令。

接著就是來建置 React 環境。

建置 React 環境

有兩種方法可以建置 React：

• 使用 create-react-app 指令
• 使用 vite 工具 (推薦)

第一種是官方的指令，第二個則是使用現在流行的工具來更快建置 React 專案，兩個各有優缺點，但現在只是要練習，推薦直接使用第二種更快速的方式

使用 Create React App 建置 React 環境

1. 全局安裝 Create React App: 在終端機中執行以下命令：-g 的意思是 global，也就是在電腦上安裝這個指令。

npm install -g create-react-app

2. 建立新的 React 專案:接著使用指令創建你的 react app

create-react-app your-app-name

3. 進入專案目錄:移動到你的 react app 目錄

cd your-app-name

4. 啟動開發伺服器:

npm start

接下來來看用 vite 的方式～

使用 Vite 建置 React 環境。

使用 vite 建置 React 的方法簡單一點，步驟是：

1. 使用 Vite 建立新的 React 專案: 在終端機中執行以下命令：

npm create vite@latest my-app --template react

2. 進入專案目錄:

cd my-app

3. 安裝相依性:

npm install

4. 啟動開發伺服器:

npm run dev

到這邊就建置完成了，非常簡單吧！