---
# System prepended metadata

title: 用 React 實作電商網站
tags: [Projects, React-Shopping-Mall]

---

# 用 React 實作電商網站

[View the book with "<i class="fa fa-book fa-fw"></i> Book Mode".](https://hackmd.io/@hot50773/react-shopping-mall)

> [color=#3ba7be]
> :star:User Story
> 
> 1. 使用者可以瀏覽商品，並加到購物車
> 2. 使用者可以查看購物車
> 3. 提供後端 API，前端透過 API 向後端要資料
> 
> :star:TODO
> - 結帳功能
> - 單元測試
> - React Debug Tool
> - Redux

專案總覽
---
- [目錄](https://hackmd.io/sQWjj3CcRYS2n133H7g0Nw)
- [使用 Create React App 建立專案](https://hackmd.io/Rd1M7zBwR-6Wvna9TiUe-A)
- [建立商品總覽]
- [建立單一商品的資訊頁](https://hackmd.io/K1459CuQREmjmoV8BgtjuQ)
- [建立後端 API]
- [建立前端路由](https://hackmd.io/dISTfwpqQXyf7SQJpQ_ncw)
- [在 Google App Engine 部署專案](https://hackmd.io/@hot50773/rkfdmDUnI)
- [美化網站介面](https://hackmd.io/V3sclEWbQpi4VYNtFHTNMQ)
- [建立購物車畫面]
- [實現購買功能](https://hackmd.io/SqFWzFmISAqjwNIji00uDw)

React 觀念
---
- [React 生命週期](https://hackmd.io/mK6IUhJlTgORYQv_GACaKQ)
- [在 Class Component 使用 State](https://hackmd.io/BYrRgGhLSO-S5SiJWkATLg)
- [React Hook - useEffect 進階用法](https://hackmd.io/UCTdG2W_SAeVfrM671E-8A)


Google Cloud Platform
---
- [用 Brew 安裝 Google Cloud SDK](https://hackmd.io/H5xv2cv9Tt-uIsCTYdHfFA)
- [Google App Engine 指令速記](https://hackmd.io/XGASHcgdSiuB5MiD5pfHuA)

其他筆記
---
- [Axios 介紹](https://hackmd.io/QPeTxN4SQQy0werj5Dy3UQ)
- [箭頭函式的各種寫法](https://hackmd.io/MDeR_BaoStGMwvq2kwPqBw)
- [HackMD 疑難排解](https://hackmd.io/lYxq7KIxQR-cx6wrqfmijQ)

###### tags: `Projects`, `React-Shopping-Mall`
