---
tags: JavaScript, React, Environment
---
# React.js 環境架設

## 必要前置作業

### Node.js

Node.js 是能夠讓 JavaScript 直接操控你的電腦的程式, 他可以做的事情非常多:
我們將會安裝 Node.js 來使 React.js 能夠使用 Node.js 來做他需要做的事, 例如開啟網頁伺服器, 編譯程式等等...

由於 Node.js 版本眾多, 為了方便管理不同版本, 建議使用 nvm 來安裝 node.js
nvm 載點:https://github.com/coreybutler/nvm-windows/releases
windows 系統點選 .exe 檔下載後開啟安裝即可

安裝完 nvm 後, 在終端機(Terminal) 輸入以下指令:
1. `nvm install latest` 這個指令會安裝最新版本的 Node.js
2. `nvm list` 這列出 nvm 目前所有安裝過的 Node.js, 正在使用的版本前面會有 *
3. `nvm use 19.8.1` 使用某個版本的 Node.js, 19.8.1 可替換成你要使用的版本

### React.js

接下來就要正式開始建立 React 專案了, 在目前最新的官網中建議使用 `npx create-next-app` 這個指令來建置一個 React 專案. `npx` 這個指令會去網路上或是你的本機尋找後面的安裝指令, 例如上述的 `create-next-app` 會快速建立起一個 Next.js 專案, 包含必要的專案設定, 依賴套件, 啟動指令等等...,

比方來說, npx 就像是一個網購平台, 可以輕易地購買各種東西. 如果說 npx 是蝦皮購物, 那 `npx create-next-app` 就像是 `蝦皮 購買並幫我安裝一台 Panasonic 冷氣`, 連安裝都幫你包辦好了, 之後只需要會用遙控器開冷氣就行

輸入 `npx create-next-app` 會看到以下畫面:

建議先不要選擇開啟 TypeScript, 這個之後再學, 先選擇 No 的選項

### 啟動你的 React 專案
首先在 VS code 開啟你的專案資料夾: 檔案 > 開啟資料夾 > 選擇你剛剛建立的專案資料夾

接著打開終端機: 終端機 > 開啟新終端機, 或是按鍵盤快捷鍵 ctrl + \`

在終端機輸入 `npm run dev`, 這個指令會開啟一個網頁伺服器, 預設網址在 localhost:3000, 打開瀏覽器在網址列輸入 localhost:3000, 成功的話就會看到以下畫面

## 額外補充

### npm 是什麼
npm 跟 npx 類似, 也可以把它想像成一個網購平台, 使用 `npm install <package-name>` 就能輕鬆地安裝你需要的套件, 例如 `npm install dayjs`, 就會在當前項目中安裝 dayjs 這個套件.

關於 dayjs:
1. 官網: https://day.js.org/
2. 中文說明: https://www.tpisoftware.com/tpu/articleDetails/1915

### 要如何結束 React 開啟的網頁伺服器
在終端機輸入 Ctrl + c, 他會問 要終止批次工作嗎 (Y/N)? , 輸入 y 即可.

### Next.js 是什麼
Next.js 是一個基於 React.js 的網頁框架, 基本上與 React.js 無異, 但是加了許多方便的功能例如 SSR, SSG, Routing 處理...等等, 還不熟的話先無視那些額外功能, 把它當 React 就好

### TypeScript 是什麼
TypeScript 是 JavaScript 的強型別擴充, 需要對每個變數, 函式都宣告它的型別, 例如:

// JavaScript
const name = "awu"

TypeScript 中需要對變數加上型別

// TypeSript
const string name = "awu"

// JavaScript
function add(a,b){
    return a + b
}

函式則要對參數,回傳值加上型別

// TypeSript
function add(a:string, b:string ): string {
    return a + b
}