raphahsu / goodidea-react-track Goto Github PK

Q4 情境為常見的表單需求

需求

三種表單頁面，自選兩種做

• 登入 (Login) 頁面
• 結帳 (Checkout) 頁面
• Landing : 聯絡我們 (Contact) 區塊
  提供參考用的 template、shopmatic checkout page

使用者操作步驟

1. 每種頁面的表單欄位皆可供使用者輸入
2. 填寫完按 Submit Button
3. 跳出 Modal 顯示該輸入的所有欄位

提示

• 參考你常用的購物網站、SaaS 操作流程，設計操作流程和回饋訊息

溝通方式

• 對此 Issue 有疑問，直接 Comment
• 發 PR 遞交成品

加分題

• 倘若 Q5 和 Q3、Q4 為同一網站，你怎麼以 SPA (Single Page Application) 架構整理專案
• 倘若 API 尚未完成，你會怎麼模擬 AJAX Response？

預估時間

10 小時

Q3 情境是模擬你接到個品牌網站案，客戶提供設計稿 (極為陽春)

需求

1. 靜態切版 - 好想 Gitlab t2
   設計稿
2. 將靜態切版依功能劃分區塊，切成 Component

提示

• 可能會用到 Webpack 編譯，試著排除上週問題，整理筆記
• 不知道怎麼劃分時，把設計稿印出來畫個圖看看
• 環境建置的好幫手 REACT MAKER STARTER KIT
• 一般網頁怎麼載入 CSS / 圖片?
• React Component 怎麼載入 CSS / 圖片?
• 建議開個新 Branch Q3 開發

溝通方式

• 對此 Issue 有疑問，直接 Comment
• 發 PR 遞交成品

加分題

• 順便做做看 好想 Gitlab t1

預計時間

6 hr

已發pr，含建置環境步驟

Q4 情境模擬常見的清單顯示，加上搜尋功能，算是改用 React 做基本 CRUD 的練習

需求

路過的 PTT 鄉民熱心提供 好想天瓏書單API，資料太多不方便一一瀏覽，請發揮你的創意做個快搜 App，不限形式、樣式 (Search Page, Browser Extension, etc.)

• 完成書單列表

提示

• 倘若不看下面提示，根據需求，你會怎麼設計？
• 該在什麼時間點抓 API 資料？
• 可透過 fetch 或 axios 等 XHR 套件發 AJAX
• 書單列表可參考 React - Main Concept 5, 7, 8
• 搜尋可參考 React - Main Concept 6, 9

溝通方式

• 對此 Issue 有疑問，直接 Comment
• 發 PR 遞交成品

加分題

• 完成書單搜尋
• 調個你認為好用的 UI

預計時間

15 hr

需求

1. 建個 Local 開發環境
2. 印個 <h1> Hello, I'm here</h1>

寫 Code 之前的準備工作，先參考文件，嘗試自己建立 React Local 開發環境。
請以 對方能重現你的環境 為前提，在 PR 內描述步驟，並附上相關檔案或連結

提示

• React Docs

溝通方式

發 PR，同時回在 issue comment

加分題

需求相同，建個「線上發問 (Codepen, or etc.)」環境

預計時間

2 hr

需求

每個人出發點與目標不同，描述能讓我們更容易找到雙贏之路
稍微講一下你目前的

• 學習狀態、程度、已掌握哪些相關技術
• 預期兩個月後想達到什麼目標
• 期間想完成的明確專案情境 (例如: 我想做個 Pokemon Map)
• 自學方式 (類似讀書計畫，除了 Track 安排的共同主題外，你會怎麼學習)

溝通方式

直接回在 issue comment

預計時間

1 hr