https://github.com/happyloa/hex2024-react-training-week4
六角 2024 React 作品實戰冬季班第四週作業 - 元件化
https://github.com/happyloa/hex2024-react-training-week4
axios bootstrap5 components gh-pages json jsx map react soc swagger-ui vite
Last synced: 3 months ago
JSON representation
六角 2024 React 作品實戰冬季班第四週作業 - 元件化
- Host: GitHub
- URL: https://github.com/happyloa/hex2024-react-training-week4
- Owner: happyloa
- Created: 2025-01-17T07:41:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-24T07:23:56.000Z (over 1 year ago)
- Last Synced: 2025-03-15T16:43:05.391Z (over 1 year ago)
- Topics: axios, bootstrap5, components, gh-pages, json, jsx, map, react, soc, swagger-ui, vite
- Language: JavaScript
- Homepage: http://hex2024-react-training-week4.worksbyaaron.com/
- Size: 1.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 六角 2024 React 作品實戰冬季班第四週作業 - 元件化
- [線上部署連結](http://hex2024-react-training-week4.worksbyaaron.com/)
- [作業範例](https://github.com/hexschool/react-training-chapter-2024)
- [註冊連結、測試管理平台](https://ec-course-api.hexschool.io/)
- [API 文件](https://hexschool.github.io/ec-courses-api-swaggerDoc/)
## 使用技術
- [Vite](https://vitejs.dev/)
- [React](https://react.dev/)
## 開發環境設置
建議使用 [VSCode](https://code.visualstudio.com/) 搭配 [ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
## 快速開始
**專案設置（Project setup）**
將專案複製到本地端
```sh
$ git clone https://github.com/happyloa/Hex2024-React-Training-Week4.git
```
套件安裝
```sh
$ cd hex2024-react-training-week4
$ npm install
```
**執行專案（Start the server）**
```sh
$ npm run dev
```
在瀏覽器上輸入
```
http://localhost:5173/
```
即可在本地端預覽專案
## 專案結構
位於 `src`
結構說明
```
src
├── App.jsx 負責發出 http 請求並透過 props 傳遞結果給子元件的主要元件
└── main.jsx React 的主要元件
```
## 元件檔案（Components）
位於 `src/components` 與 `src/assets`
結構說明
```
src/components
├── Login.jsx 登入表單
├── ProductList.jsx 商品列表
├── Pagination.jsx 分頁元件
├── AddNewModal.jsx 新增商品 Modal
├── EditModal.jsx 編輯商品 Modal
├── DeleteModal.jsx 刪除商品 Modal
└── ProductModal.jsx Modal 父元件，依照狀態來呈現對應的 Modal
```
```
src/assets
└── style.css 網站整體的樣式設定
```
## 靜態檔案
位於 `public`
結構說明
```
public
├── CNAME 網站的 DNS CNAME 紀錄
└── favicon.ico 網站 favicon
```
## 使用的套件 & 工具
- [axios](https://axios-http.com/)
- [Bootstrap](https://getbootstrap.com/)
- [gh-pages](https://www.npmjs.com/package/gh-pages)
- [ChatGPT 4o](https://openai.com/)