網站開發－紀錄（中文版）

開始學習網站開發的技術

前提：用終端機來控制電腦～ (英文關鍵字：terminal, command prompt)
1. 如何在 Windows 上面打開 terminal？
  1. Windows 還要多走一個步驟：安裝 Git (+ cygwin command line tools)
2. 如何在 MAC 上面打開 terminal？
Windows: 安裝 choco
1. node 包含一個幫我們整理所有的套件的軟體叫做 npm
2. node 也包含一個可以執行任何套件裡面的執行檔的工具叫做 npx
3. 平常準備好了一個 node 的程式之後，就可以用 npm start 來執行它

Start with create-react-app
1. npx create-react-app my-app
2. cd my-app
3. npm start
4. Test it out~
5. (Read the create-react-app docs)
In VSCode:
1. File -> New Window
2. -> Add Folder to WorkSpace
3. -> Save Workspace as...
check out file structure~
1. 每個 node 的專案都有：
  1. node_modules 的資料夾：所有我們在套用的套件都在這裡面
  2. package.json 的檔案：就是設定我們的專案
  3. package-lock.json 的檔案：不用管他～�
2. 我們的 src 的資料夾：放我們所有程式碼的地方
3. 我們的 public 的資料夾放： html, 圖片 還有其他的非程式碼的檔案。
4. public/index.html 只是我們空的 html 架構
5. src/index.js 反而是我們啟動整個網站的起點。
6. 啟動 app 的時候， index.html + index.js 會自動被融合起來。
Learn es6 (新版 JavaScript):
1. https://devhints.io/es6
Learn React
1. Codecademy: Learn React Part #1
2. Codecademy: Learn React Part #2
Add react-router
Add reactstrap (includes bootstrap)
Getting data
1. fetch
2. Codecademy 線上課程：Asynchronous JS [1h]
Design 基礎
1. Codecademy 線上課程：Responsive Design [2h]
2. Codecademy 線上課程：Color Design

接下來的步驟
1. reactstrap -> bootstrap, bootstrap button + bootstrap list
2. react-router -> Pages, routing + navigation; bootstrap navbar;
更多
1. https://www.codecademy.com/learn/complex-data-structures
2. npx create-react-app my-app

Design a pretty button that creates more buttons which create more buttons
1. When clicking the button the first time, add a new button and disable this button
2. When clicking the next button the first time, add a new button and disable this button
3. repeat...
Design a pretty timer
1. Start by googling: https://www.google.com/search?q=css+pretty+timer
2. Elements:
  1. pretty text display: display amount of elapsed seconds (一開始可以不需要分鐘之類的～)
  2. start button
  3. Pause/resume button
  4. reset button
3. JS 提示：
  1. var start = Date.now(); /* ............. */ var end = Date.now(); var elapsedSeconds = (end - start)/1000;
Design a pretty bootstrap card
1. Elements
  1. Bootstrap Alert
  2. pretty text input
  3. a scoreboard
2. Behavior
  1. The Alert shows a random word (Q: how to use JS to produce random words? （可以 google）)
  2. When typing the word within 5 seconds: (a) score += 1; (b) clear the text input; (c) show a new random word
  3. When 5 seconds elapsed and the user has not typed the word: (a) score--; (b) clear the text input; (c) show a new random word