六角學院課程範例（React）

使用 React + Vite 開發的課程範例。

課程內容詳情可見 六角學院。

範例說明

此專案是使用 Vite 並搭配 React 開發的課程範例，使用 Bootstrap 作為 CSS 框架，並使用 Redux Toolkit 作為狀態管理工具，為了運行於 GitHub Pages，所以使用 createHashRouter 作為路由。

Note createHashRouter 意思是指 URL 中會有 # 符號，例如：https://example.com/#/about。

要求環境

• Node.js v20 以上
• npm v10 以上

Scripts

使用 npm 指令操作。

還原套件

# 安裝套件
npm install

啟動開發伺服器

# 啟動開發伺服器
npm start

佈署 GitHub Pages

# 佈署到 GitHub Pages
npm run deploy

檢查程式碼

# 檢查程式碼
npm run lint

打包程式碼

# 打包程式碼
npm run build

使用套件

• React DOM
• React Router
• Redux Toolkit
• React Hook Form
• React Loading
• React Router DOM
• Prop Types
• CkEditor5
• ESLint（風格：Airbnb）
• Axios
• Bootstrap5
• Bootstrap Icons
• Sass
• DotEnv
• gh-pages

ESlint

• 使用 Airbnb 風格
• 設定檔：.eslintrc.js
• 忽略檔案：.eslintignore