:::info 這篇是參加「Tech Book Community 線下小聚 in 台北 - 【Zet】 React Render Props」場次的小小筆記，聽了之後發現自己偶爾也會用到這些寫法，只是不知道有 pattern 可以 follow，而且途中還有安排給大家練習程式碼的時間，加深了不少印象。 感謝 Zet 的分享，也很感謝 Lois 舉辦活動，甚至還有分享心得的抽書活動，否則我還真的不知道會拖到什麼時候才來整理筆記，真的太感謝惹。 ::: :::success 【活動】：{%preview https://tech-book-community.kktix.cc/events/2025-07 %} 【共筆】：{%preview https://hackmd.io/@tech-book-community/r1j_Z5vUgg %}

專案使用者故事連結：https://www.notion.so/22f948c0fb1f80558399e9e4a58e472a 購物網站前台 【優先】 核心必做 我是網站訪客，我可以知道最新消息。（首頁-banner） 我是網站訪客，我可以知道有有那些熱門商品（首頁） 我是網站訪客，我可以看到會員見證（首頁） 我是網站訪客，我可以了解品牌理念、宗旨（首頁） 我是網站訪客，我可以了解教練團隊（首頁） 我是網站訪客，我可以知道哪裡有健身場館（首頁）

專案使用者故事連結：https://www.notion.so/2-2286e9dba91381e190d7f64e67815fd2 前台 - 訪客 【優先】 核心必備 我可以透過瀏覽首頁，也可以直接查看到所有商品，可以查看到「所有商品列表」(卡片) (首頁/探索頁面) 我可以透過點選「單一商品」，進入「詳細商品頁面」查看 (首頁/探索頁面) 不特定輪播募集商品頁面 (首頁/探索頁面) 熱門的募集商品卡片 (首頁/探索頁面) 我可以進入詳細商品頁面，可以查看到該募集商品的全部詳細資訊（包含商品名稱、照片、進度、金額、介紹等）(詳細商品頁面) 我可以點選商品的「贊助方案」按鈕，進入到贊助方案頁面 (詳細商品頁面)

:::info 【W3-1】講義https://hackmd.io/@hexschool/SkzQxaD60 【W3-2】講義https://hackmd.io/@hexschool/HylqiUqTR 【W3】小組任務https://hackmd.io/@hexschool/H1nzguOFR ::: Q1 :::info 互相分享第 5、6 堂課學習到的 1-2 個印象深刻的教學技巧

:::info 【W2-1】講義https://hackmd.io/@hexschool/S1CmE-z70 【W2-2】講義https://hackmd.io/@hexschool/ByAjgfepC 【W2】小組任務https://hackmd.io/@hexschool/r1wvpDutR ::: Checklist [x] 填寫答案 [x] 貼截圖

:::info 【W1-1】講義https://hackmd.io/@hexschool/SkSXbZMXA 【W1-2】講義https://hackmd.io/@hexschool/S1RFQbz7A 【W1】小組任務https://hackmd.io/@hexschool/Syqn3DdKR ::: Checklist [x] 組員填寫 [x] 小組活動：2024-09-07

提供 WEB 介面 分析潛在 BUG、可靠性、重覆性、技術債務、測試覆蓋率 提供程式碼改善建議 結合 CI/CD SonarQube 安裝 可以使用 Docker Desktop 來搭建https://www.docker.com/products/docker-desktop/ 在 Docker 裡面搜尋 SonarQube 後Docker

:::info 【學員課前注意事項】 說明文件https://doggy8088.github.io/gh-copilot/ ::: Summary 工具只是副駕，我們才是駕駛本人 如果 AI 不懂要幹嘛，檢查是不是給的意圖不夠明確 寫了爛 Code 就會產爛 Code QQ

React-router useNavigate import * as router from 'react-router' const navigate = jest.fn() beforeEach(() => { jest.spyOn(router, 'useNavigate').mockImplementation(() => navigate) })

2-7-1_什麼是 component 由開發者自己定義的畫面元件藍圖，負責裝載特定範圍的畫面或邏輯 根據需求抽象化設計出 component，就能將複雜的畫面拆解成可以重複使用的積木零件 抽象化根據需求將關心的特徵與行為歸納出來，設計出適用於特定情境和意義範圍的流程或邏輯，並將實作細節或複雜性封裝在內部以便重新使用 2-7-2_定義 component 可以用普通的 JavaScript 函式來定義接收 props（properties） 資料作為參數，並回傳 1 個 React element 作為畫面的結構 【注意】：命名的首字母必須為大寫

2-6-1_單向資料流 【資料驅動畫面】 單向資料流one-way dataflow 現代主流框架的設計模式（ design pattern） image 畫面結果 = 原始資料透過模板 + 邏輯所產生的延伸結果單向 不可逆

{ "list": [ { "id": "db3e77a1-3d88-411e-84c8-9e3d683185d5", "salePointId": "ad7c1b4c-fce4-11e6-a726-42010af00002", "categorySeq": 0, "categoryName": "000", "stockList": [ { "posStockGridCategoryId": "db3e77a1-3d88-411e-84c8-9e3d683185d5",

:::info 【官方文件】https://styled-components.com ::: 全域樣式 theme/GlobalStyled.jsxBaseStyle：全域設定 ResetStyle：CSS Reset import { createGlobalStyle } from 'styled-components';

Q1 :::success 【不熟的地方】 Array.find() 可以用來回傳找到的項目後面接的是 callBack function ::: const DATA1 = [4, 2, 5, 3, 4, 1, 1, 6, 5, 2, 1]; const DATA2 = [...DATA1]; const RESULT2 = [[1, 1, 1], [2, 2], [3], [4], [5, 5], [6]];

:::info 本筆記的前端框架為 React x Vite 若是 SSR 框架， 【可參考 Alice 整理的】：IIS 執行 NEXT.JShttps://enormous-english-a19.notion.site/IIS-NEXT-JS-6edd08ca5b2e48cb995af5dd521e1e9b ::: :::warning

:::success 【TL;DR】 修改後的專案模板 ::: pnpm會在硬碟建立 store 的空間來儲存套件，避免每次都要重複安裝，可以節省空間 Vite https://vitejs.dev/guide/#scaffolding-your-first-vite-project

查詢目前使用額度 https://dashboard.render.com/billing#free-plan [TOC] 說明 官方文件

資料形式 陣列物件集合 "resources": [ { "id": 1, "topics": ["HTML/CSS"], "title": "W3School CSS Tutorial", "type": "第三方技術網站",

:::info 新手村學習 React 時的小小筆記 若有寫錯的地方，還請留言告訴我惹，感謝大家 ::: [TOC] new

Q1 See the Pen Q1_sayHi by Mako (@NoNameNote) on CodePen. Q2 See the Pen Q2_sayHi-param by Mako (@NoNameNote)