Skip to content

Instantly share code, notes, and snippets.

@chentsulin

chentsulin/week-3.md

Last active October 20, 2015 11:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chentsulin/8e300c9bf9fe9b906147 to your computer and use it in GitHub Desktop.
Save chentsulin/8e300c9bf9fe9b906147 to your computer and use it in GitHub Desktop.
Download ZIP
Week 3 - After class
Raw
week-3.md

Week 3

Homework Assignment

Chat Room Application

繳交方式

  • Deadline: 10/22 中午 12:00
  • 把檔案寄至 chentsulin@gmail.com，標題寫 [作業三/ 電機X XXX] (如果你已經會用 github 也可以寄 repo 連結過來)

Setup

必須注意的是，babel-core/browser.js 因為讀取本地檔案在瀏覽器會有 CORS (跨網域請求資源) 安全性問題，在 Chrome 預設是禁用的。請使用 Firefox 或參考 http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome 設定 chrome。

在下下禮拜會教大家其他的編譯方式，就不會有這個問題

Requirement

  • ChatApp 必須有 3 ~ 5 個 initial 的聊天記錄 (thread) 放在 state 裡面

左邊

  • 左邊 UI 是一個 ThreadList Component，用來一行一行顯示聊天記錄 (thread) - 這個在這個 case 沒有什麼重要功能，也可以精簡掉
  • 每一行是一個 ThreadItem Component，顯示最新的聊天記錄
  • 點擊 ThreadItem 會讓右邊切換到被點擊的 thread

右邊

  • 右邊 UI 是一個 MessageList Component，用來一行一行顯示聊天訊息 (message) - 這個在這個 case 沒有什麼重要功能，也可以精簡掉
  • 最上方顯示對方暱稱
  • 每一行是一個 MessageItem Component，顯示聊天對話訊息，要有發話人暱稱跟訊息內容
  • 可以經過下方輸入，增加新的內容進去 message list

Optional

左邊

  • ThreadItem Component 可以顯示時間跟大頭照

右邊

  • 別人發的訊息靠左邊，自己發的訊息靠右邊
  • 可以顯示圖片

Hint

  • 用 component 的角度思考
  • 先建出一個足夠顯示上述 UI 的資料當做 ChatApp initial state
  • 只有 ChatApp 是 stateful component (有 state) 的版本，其他 componet 都接收它傳下去的 props

(供 UI 參考用，不需要完成這麼多功能，借用自 sindresorhus/caprine)

示範修改 Todo 的參考步驟

  1. initialize project - https://github.com/web-seminar/hw-reference/commit/2610f3f72e203d71cc210d8cfbb31c816c56582d
  2. Step 1: break the UI into a component hierarchy - https://github.com/web-seminar/hw-reference/commit/7991db2b27f450cf407b77591c73c9d684b4fb4b
  3. Step 2: Build a static version in React - https://github.com/web-seminar/hw-reference/commit/33a975f1141fb81d5985bcde9ecf3306dcb1b68a
  4. Step 3 & 4: Identify state - https://github.com/web-seminar/hw-reference/commit/2727ebaf4c060a20aca850c3ea40eacae15f440e
  5. Step 5: Add inverse data flow -https://github.com/web-seminar/hw-reference/commit/a83017341307350150353fba0255e6522d51eda9

更進階的提示

這次作業偏難，如果已經經過一段時間思考還是無法順利的同學可以參考下方專案的 HTML, CSS 進行修改成 React 的步驟：

https://github.com/web-seminar/chatroom

然後以下這個連結要防雷，除非你看完上方連結後還是很茫然，才可以參考下方連結 (跟上方的檔案有些微差異，多了 js 的提示)：

https://github.com/web-seminar/chatroom/tree/hint

更多的參考步驟：

  • 把 html 從 index.html 搬到 ChatApp 的 render 裡面
  • ChatApp 裡面用到的 ThreadList 跟 MessageList 移到到這兩個各自的 Component 中
  • 把這兩個 Componet 裡面的內容改成一個一個的 ThreadItem 跟 MessageItem，與前面類似
  • 在 ChatApp 裡面 define state 放一個 array 來存放所有聊天記錄，跟一個 number 指向目前聊天中的 index
  • 把 ChatApp 的 state 當作 props 傳進 ThreadList 跟 MessageList，並用 array.map() 來 render 一個個的 item (可參考這裡)
  • 最後讓左邊的 ThreadItem 被點擊可以修改 ChatApp state 中 focus 的 index，右邊 input 輸入時可以加東西進去聊天記錄

Next Week Pre-reading

React

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment