React JS 網頁開發筆記（一）
Table of contents
1 簡介
呢篇文章會講開發 React 之前我地要安裝既軟件或者工具。
2 安裝網頁瀏覽器（必須）
因為 Chrome 最多人用，所以建議一定要安裝 Chrome。
2.1 安裝 extensions（可選）
Chrome 或者 Firefox 官方應用程式商店都有以下既 extensions 或 add-ons：
- React Developer Tools
- Redux DevTools
自行下載安裝。
3 安裝 NodeJS（必須）
Modern web development 必備既工具，有別於以往既傳統 web development，淨係需要
.html、.css 及 .js 檔。而好處係好多 libraries 會被動咁幫我地 handle 曬大部分開發方面既細節，例如儲存一個 source file 既時候，網頁會自動 refresh，令我地即時見到效果。官網下載 LTS 版：Node.js - Downloads
Node.js 已經包括 npm（Node.js package manager），而 npm 都係必須既工具。
解壓縮之後，將 root folder 及
node_modules/npm/bin 設置成 PATH 環境變數一部分。然後喺 Command Prompt（Windows）或者 Terminal（macOS）執行以下指令黎確認設定成功：
node -v npm -v
4 安裝 Visual Studio Code IDE（必須）
我地可以安裝 VSCodium，佢同 Visual Studio Code 功能完全一樣，但前者既好處係佢唔會將我地既資料 send 去畀 Microsoft。
下載最新版（portable）：VSCodium/vscodium GitHub
4.1 安裝 extensions（必須）
有啲 React JS 用既 extensions 係必裝既：
- ES7 React/Redux/GraphQL/React-Native snippets
- ESLint
- Prettier
- npm
4.2 自訂配置
撳 Ctrl+
,，然後右上角既 Open Settings (JSON) 掣。以下係我既自訂配置：
1{ 2 "telemetry.enableCrashReporter": false, 3 "telemetry.enableTelemetry": false, 4 "editor.minimap.enabled": false, 5 "editor.formatOnSave": true, 6 "editor.detectIndentation": false, 7 "editor.insertSpaces": false, 8 "editor.fontFamily": "Monaco, Consolas, 'Courier New', monospace, Microsoft JhengHei", 9 "workbench.startupEditor": "newUntitledFile", 10 "workbench.editor.enablePreview": false, 11 "workbench.tree.indent": 24, 12 "workbench.list.horizontalScrolling": true, 13 "workbench.colorCustomizations": { 14 "activityBar.activeBorder": "#007ac7", 15 "activityBar.activeBackground": "#294a5b" 16 }, 17 "explorer.autoReveal": true, 18 "explorer.confirmDelete": false, 19 "explorer.openEditors.visible": 0, 20 "javascript.updateImportsOnFileMove.enabled": "always", 21 "emmet.includeLanguages": { 22 "javascript": "javascriptreact" 23 }, 24 25 "git.path": "C:/Users/Michael/Desktop/PortableGit/bin/git.exe", 26 // macOS: "/usr/bin/git" 27 "git.allowForcePush": true, 28 29 "editor.defaultFormatter": "esbenp.prettier-vscode", 30 "prettier.tabWidth": 4, 31 "prettier.printWidth": 120, 32 "prettier.useTabs": true 33}
4.3 自訂 shortcut 配置
撳左下角既 Manage 掣 > Keyboard Shortcuts，然後右上角既 Open Keyboard Shortcuts (JSON) 掣。
以下係我既自訂 shortcut 配置：
1[ 2 { 3 "key": "ctrl+d", // macOS: cmd+d 4 "command": "editor.action.deleteLines", 5 "when": "textInputFocus && !editorReadonly" 6 }, 7 { 8 "key": "ctrl+shift+k", // macOS: cmd+shift+k 9 "command": "-editor.action.deleteLines", 10 "when": "textInputFocus && !editorReadonly" 11 }, 12 { 13 "key": "ctrl+alt+up", 14 "command": "editor.action.copyLinesUpAction", 15 "when": "editorTextFocus && !editorReadonly" 16 }, 17 { 18 "key": "shift+alt+up", 19 "command": "-editor.action.copyLinesUpAction", 20 "when": "editorTextFocus && !editorReadonly" 21 }, 22 { 23 "key": "ctrl+alt+down", 24 "command": "editor.action.copyLinesDownAction", 25 "when": "editorTextFocus && !editorReadonly" 26 }, 27 { 28 "key": "shift+alt+down", 29 "command": "-editor.action.copyLinesDownAction", 30 "when": "editorTextFocus && !editorReadonly" 31 }, 32 { 33 "key": "ctrl+right", // macOS: alt+right 34 "command": "cursorWordPartRight", 35 "when": "textInputFocus && !editorReadonly" 36 }, 37 { 38 "key": "ctrl+shift+right", // macOS: shift+alt+right 39 "command": "cursorWordPartRightSelect", 40 "when": "textInputFocus && !editorReadonly" 41 }, 42 { 43 "key": "ctrl+left", // macOS: alt+left 44 "command": "cursorWordPartLeft", 45 "when": "textInputFocus && !editorReadonly" 46 }, 47 { 48 "key": "ctrl+shift+left", // macOS: shift+alt+left 49 "command": "cursorWordPartLeftSelect", 50 "when": "textInputFocus && !editorReadonly" 51 }, 52 { 53 "key": "ctrl+backspace", // macOS: alt+backspace 54 "command": "deleteWordPartLeft", 55 "when": "textInputFocus && !editorReadonly" 56 }, 57 { 58 "key": "ctrl+shift+backspace", // macOS: alt+delete 59 "command": "deleteWordPartRight", 60 "when": "textInputFocus && !editorReadonly" 61 }, 62 { 63 "key": "ctrl+delete", // macOS: alt+delete 64 "command": "-deleteWordRight", 65 "when": "textInputFocus && !editorReadonly" 66 }, 67 { 68 "key": "ctrl+,", // macOS: cmd+, 69 "command": "-workbench.action.openSettings" 70 }, 71 { 72 "key": "ctrl+,", // macOS: cmd+, 73 "command": "workbench.action.openSettingsJson" 74 } 75]
5 安裝 Create-React-App（必須）
React 有一個 npm package 可以幫我地快速生成一個 React project 既 template。
安裝 npm package 既 command：
npm install -g create-react-app
或者用
install 既 short form —— i：npm i -g create-react-app
-g 係 global 既意思，即係我地呢個 package 並唔係跟 project（喺 package.json 既 dependencies），而係一個「安裝喺我地系統既程式」既存在。5.1 快速生成 project template
執行以下 command：
create-react-app my-sample-react-project
之後 Create-React-App 就會喺 console（Windows Command Prompt、macOS Terminal 等）現時既路徑生成一個
my-sample-react-project folder，裡面有齊曬一個 React project 需要既野，包括 node_modules。5.2 試行 React project template
生成左之後，喺 project root folder 行以下 command：
npm start
5.3 了解 React project template 內既文件
| 檔案／folder | 用途 |
|---|---|
package.json | 呢個 project 要用到既 npm packages 都寫曬喺度，每當我地執行 npm i，Node.js package manager（npm）就會根據呢個檔案內既 dependency npm packages 生成 package-lock.json，然後下載所有 JavaScript libraries 到 node_modules folder |
package-lock.json | 如果想更新所有呢個 project 用到既 npm packages 佢地背後既 dependency npm packages，咁我地可以刪除呢個檔案，但就有可能會因為後面既一啲 JavaScript libraries 更新之後有 bug 而令到個 project 既 behavior 唔同左或者有野無意之間 break 左，所以刪除之前要諗清楚，刪除之後都要試清楚 |
node_modules | 我地呢個 project 用到既 JavaScript libraries，呢啲檔案都係喺 npm 既 public registry 度下載落黎，至於佢個 registry 有冇畀人 hack 過，有冇惡意代碼，到底可唔可信，呢一點就要自己考慮 |
src | 呢個 project 既所有 JavaScript source code，裡面有 Create-React-App 生成出黎既 Hello World |
public | 呢個 HTML project 既公開文件，瀏覽呢個網站既用戶可以透過 <host>/<文件名> URL 下載到 |
.git（hidden folder） | 係 Git 用黎 version control 呢個 folder 用既一啲 metadata。如果唔需要用 Git 做 version control，可以刪除。如果冇呢個 folder 而又想用 Git，可以執行 git init 生成。如果係 git clone 落黎既 project，Git 會自動生成 .git，commit 然後 push 就可以直接改到 remote repository 上既 project source code |
.gitignore | Git ignore 係我地話畀 Git 知我地邊啲 pattern 既 files 或者 folders 唔應該畀 Git 做 version control，例如 node_modules 呢個 folder 裡面既 JavaScript libraries 都係根據 package-lock.json 下載落黎／洐生出黎，咁我地冇必要 commit node_modules 上 Git repo |
README.md | Markdown 格式既 project readme 檔案，GitHub、GitLab 等等既 repository 首頁會顯示呢個檔案，可以用 Visual Studio Code 編輯 Markdown 檔案，右上角有個按鈕可以 side-by-side 一邊打字一邊睇結果 |
5.3.1 了解 src 內既文件
src folder 裡面既文件以 JavaScript .js 檔為主，亦都有啲 CSS .css 檔案：| 檔案 | 用途 |
|---|---|
index.js | 網頁既入口。唔用 React/Angular/Vue 既話，一個最 basic 最 vanilla 最 minimal 既網頁只需要一個 index.html 檔案，而我地 public/index.html 就係呢個檔案。但係 React/Angular/Vue 呢啲 modern web development library/framework 係 rely on JavaScript 去 call document.createElement(...)，然後改左 index.html 上面既一個特定 id 既 DOM element（React：<div id="root"></div>） 做我地 index.js 寫既 <App />，所以我地係唔需要改 public/index.html 裡面既 <body> 裡面既任何野，要改就改 index.js 裡面會顯示既 <App />，亦即係 src/App.js |
index.css | 呢個係 global 既 CSS |
App.js | 呢個網頁既 root element，一開始由 Create-React-App 生成出黎，可以清空 |
App.css | App.js 會 import 呢張 CSS stylesheet |
至於其他檔案，例如
App.test.js、reportWebVitals.js、setupTests.js，佢地就唔太重要，純粹 for testing，可以刪除。logo.svg 就係 Create-React-App 生成既 template 既 Hello World，清空左 App.js 之後可以刪除。