建置一個React前端網站

August 12, 2022

更新Node.js

這段請隨著Node.js的版本更新調整。

本文章撰寫的時候，我希望安裝Node.js 16 版，因為此時需要如此才能順利建置React APP。

NVM用於安裝多個版本的Node.js這是在非主流Linux上必要的措施。

sudo apt install curl
cd ~
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

啟動NVM

source ~/.profile

安裝Node.js 16

 nvm install 16

啟動Node.js 16

nvm use 16

檢查版本

node -v
npm -v

建立一個空資料夾

mkdir my-react
cd my-react

在資料夾中安裝React建置工具

npm install create-react-app

建立React App資料夾，並且初始化：

npx create-react-app my-react-app

進入專案資料夾

cd my-react-app

啟動React專案

npm start

啟動後就會自動在預設瀏覽器開啟整個專案了。

有個已經設置好的建置指令:

npm run build

接著會生成出一個build資料夾，裡頭就有編譯好的 HTML, CSS, JS 了。

安裝伺服器軟體。

npm install -g serve

將剛剛建置好的build資料夾當作靜態網頁根目錄執行。

serve -s build