從零開始的React (1) - 環境和架構介紹篇

前言

最近有一個朋友想加入前端的行列，但他完全沒有接觸過程式(HTML、CSS 都不懂的那種)。所以我想做一個麻瓜都能懂得React系列，此系列會盡量以最詳細的方式來做介紹，其中會包含HTML、CSS、Typescript等等。

環境建置

首先我們需要下載兩樣東西:

1. Nodejs，打開連結後點擊紅框區域下載，並安裝。

2. VsCode，打開連結後點擊紅框區域下載，並安裝。

兩者在安裝過程中不用修改任何東西一直點 Next(下一步) 即可。

確認Nodsjs是否安裝成功

安裝完成後，讓我們確定Nodejs已經安裝成功，打開命令提示字元(CMD)並輸入:

如何開啟命令提示字元(CMD): Windows + Q 並輸入命令提示字元或CMD

console
1node -v

輸入完 node -v 後請按Enter

出現和下圖一樣表示你已經安裝成功(版本號不同沒有關係)。

創建React專案

打開命令提示字元(CMD)並輸入:

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

my-react-app 是你專案的名稱可以自行定義，我的專案名是 react-demo。

選擇React，如下圖:

接著選擇Typescript，如下圖:

使用VsCode開啟專案

開啟剛剛下載的VsCode，依照下圖開啟專案資料夾，資料夾路徑通常為(C:\Users\電腦的使用者名稱\專案名稱):

看到下圖表示專案已開啟

下載專案所需套件

接著我們需要下載該專案所需的套件，首先按照下圖新增一個Terminal:

接著輸入:

console
1npm i

然後等待一些時間，出現和紅框部分一樣後表示下載成功

讓該專案在網頁上呈現

要讓專案出現在網頁上，請在Terminal輸入:

console
1npm run dev

等待一些時間，出現和紅框部分一樣後表示成功

打開網址: 預設網址通常為localhost:5173/，如下圖

專案目錄結構

這裡簡單介紹一下目錄結構，看不懂沒關係之後有使用再回來看即可:

1. 資料夾node_modules: 上面透過npm i下載後的套件都會放在這裡。
2. 資料夾public: 用來放靜態檔案的地方，像是網站的圖標(icon)等等。
3. 資料夾assets: 用來存放圖片、語音、影片等等。
4. .css: 以此為結尾的檔案是用來寫css的地方。
5. .tsx: 以此為結尾的檔案是用來寫Typescript和Html的地方。
6. package.json: 管理該專案所需使用到的套件以及配置一些選項的地方。
7. vite.config.ts: 定義和調整Vite構建工具的地方。

最後

這樣就可以準備開始你的前端之旅了，下篇會學到如何更改 localhost:5173 的頁面，下次見。