└── README.md


/README.md:
--------------------------------------------------------------------------------
 1 | # 使用 React 撰寫一個計數器
 2 | 
 3 | ## 各單元使用的連結
 4 | 
 5 | ### 在沒有 React 以前...，用原生 JavaScript 做一個簡單的計數器
 6 | 
 7 | - [原生 JavaScript - 計數器起始樣板](https://codepen.io/PJCHENder/pen/OJMyGmK)：這個樣版已經包含最基本的 HTML 和 CSS 樣式，讀者可以從這個樣板開始練習。
 8 | - [原生 JavaScript - 計數器成品](https://codepen.io/PJCHENder/pen/VwevJrz)：使用原生 JavaScript 撰寫技術器功能
 9 | 
10 | ### 把 HTML 寫在 JavaScript 中！？ - JSX 的概念
11 | 
12 | - [React Hello World 樣板](https://codepen.io/PJCHENder/pen/bGbMQQw)：React 官方提供的 Hello World 起始樣板
13 | 
14 | ### 在 JSX 中帶入變數與表達式
15 | 
16 | - [在 JSX 中使用變數與表達式](https://codepen.io/PJCHENder/pen/zYrrWEx)
17 | 
18 | ### 將計數器改用 JSX 來寫
19 | 
20 | - [React Hello World 樣板](https://codepen.io/PJCHENder/pen/bGbMQQw)：React 官方提供的 Hello World 起始樣板
21 | - [原生 JavaScript - 計數器成品](https://codepen.io/PJCHENder/pen/VwevJrz)：可在這裡複製 CSS 樣式
22 | - [React 計數器 - JSX 部分](https://codepen.io/PJCHENder/pen/WNrxEBe)：本單元完整程式碼
23 | 
24 | ### 在 JSX 中套用 CSS 樣式
25 | 
26 | - [在 JSX 中套用 CSS Class](https://codepen.io/PJCHENder/pen/pogybWq)：本單元完整程式碼
27 | 
28 | ### 建立第一個 React 元件
29 | 
30 | - [建立第一個 React 元件](https://codepen.io/PJCHENder/pen/WNrxZxQ)：本單元完整程式碼
31 | 
32 | ### 與使用者互動 - React 中的事件處理
33 | 
34 | - [SyntheticEvent](https://reactjs.org/docs/events.html)：列出所有 React 中可以綁定在 HTML 元素上的事件
35 | - [在 React 元件中綁定事件](https://codepen.io/PJCHENder/pen/pogbWQr)：本單元完整程式碼
36 | 
37 | ### React 元件中的資料狀態 - useState 的使用
38 | 
39 | - [useState 的基本使用](https://codepen.io/PJCHENder/pen/dyGXZYb)：本單元完整程式碼
40 | 
41 | ### 條件轉譯的使用（conditional rendering）
42 | 
43 | - [條件轉譯的使用](https://codepen.io/PJCHENder/pen/NWxrXzm)：本單元完整程式碼
44 | - [邏輯運算子](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) @ MDN
45 | 
46 | ### 動態添加 CSS 樣式來隱藏 HTML 元素
47 | 
48 | - [使用 inline-style 來隱藏 HTML 元素](https://codepen.io/PJCHENder/pen/abdZqwY)：本單元完整程式碼
49 | - [使用 CSS Class 來隱藏 HTML 元素](https://codepen.io/PJCHENder/pen/xxZOYzJ)：本單元完整程式碼
50 | 
51 | ### 事件處理器的重構
52 | 
53 | - [從 JSX 中拆分事件處理器的邏輯](https://codepen.io/PJCHENder/pen/gOPMzmz)：本單元完整程式碼
54 | - [簡化事件處理器的語法](https://codepen.io/PJCHENder/pen/qBbNYVr)：本單元完整程式碼
55 | - [進階寫法：讓函式執行後回傳另一個函式](https://codepen.io/PJCHENder/pen/OJMXZGq)：本單元完整程式碼
56 | 
57 | ### JSX 中迴圈的使用
58 | 
59 | - [透過迴圈產生多個計數器吧](https://codepen.io/PJCHENder/pen/abdZKeQ)：本單元完整程式碼
60 | 
61 | ## 版權
62 | 
63 | - 計數器畫面由 Oleg Frolov 所設計，可參考 [https://dribbble.com/shots/5539678-Stepper-VI](https://dribbble.com/shots/5539678-Stepper-VI)
64 | - 畫面中的圖示來自 FontAwesome ([https://fontawesome.com/icons](https://fontawesome.com/icons))
65 | 


--------------------------------------------------------------------------------