or
or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up
Syntax | Example | Reference | |
---|---|---|---|
# Header | Header | 基本排版 | |
- Unordered List |
|
||
1. Ordered List |
|
||
- [ ] Todo List |
|
||
> Blockquote | Blockquote |
||
**Bold font** | Bold font | ||
*Italics font* | Italics font | ||
~~Strikethrough~~ | |||
19^th^ | 19th | ||
H~2~O | H2O | ||
++Inserted text++ | Inserted text | ||
==Marked text== | Marked text | ||
[link text](https:// "title") | Link | ||
 | Image | ||
`Code` | Code |
在筆記中貼入程式碼 | |
```javascript var i = 0; ``` |
|
||
:smile: | ![]() |
Emoji list | |
{%youtube youtube_id %} | Externals | ||
$L^aT_eX$ | LaTeX | ||
:::info This is a alert area. ::: |
This is a alert area. |
On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?
Please give us some advice and help us improve HackMD.
Syncing
xxxxxxxxxx
[FE302] React 基礎:hooks(1)
[FE302] 2. React 基礎
[FE302] 2-1 環境建置——Create react app
現成線上環境:CodeSandBox
優點:debug 分享方便
缺點:
在自己電腦上建置環境
自己建置環境:webpack、React、Babel
現成建置環境:npm modules – Create-react-app
一拿到專案,先看
README.md
,再看package.json
環境建置起來後(可以從
localhost:3000
看到)專案拿到的一開始,先看
README.md
,再看package.json
README.md
package.json
可以看用哪些 npm、測試怎麼使用
開啟
./src/index.js
前面環境建置好後,就可以開始寫 react app:
發現
<App />
這個 component 從./App.js
引入,所以就來看看這個檔案:可以發現在
http://localhost:3000
的網頁內容來自此處,可以相對應修改,然後在http://localhost:3000
會做相應改變。嘗試修改
app.js
,再觀察 localhost:3000 及 terminal:app.js
http:localhost:3000
因為在 create-react-app 有預設 ESLint,所以 ESLint 的 warning & 提示都會在 terminal 出現。
建立 component
Title
return(內容)
在 React 中,可以以()
括號包起來<Title />
如果沒有要輸入任何參數,直接/>
關起來即可。component 內沒有參數輸入
props.children
2. 解構賦值
[FE302] 2-2 初探 React 中的 style
有三種方法:
import './App.css'
2-2-1.
import './App.css'
像之前的用法一樣,引入 CSS ,然後就可以使用
2-2-2. inline-style
2-2-2-1 React 寫 CSS:inline-style 一:寫在
style
內補充:
直接在 JSX 內的 HTML 標籤內加入 style 屬性(如:style={}),但有幾點需要注意:
JSX 中的 inline style 要放入 object(物件),在 JSX 中只要和 JS 有關的參數,都要加上
{}
(style={}
的外層大括號)只能傳入該元素支援的 inline-style
不能使用「偽元素(
after
)」或「hover
」因為是 JavaScript 程式碼,需改為小寫駝峰命名(例如:
titleStyle
)React CSS 建立的 object 命名慣例為:小寫鴕峰。
在 React 寫一個 Object 名字為 titleStyle。然後在 React 內的 JSX 中有一個屬性為
style
專門寫 CSS 的內容,可以使用兩個方法寫 CSS:<h1 style={<CSS 的 object>}
:直接另外新增個 CSS object,然後以{}
放入。(在 JSX,只要和 JS 有關的,放進去都要以{}
包起來)<h1 style={{ height: '10%' }}
:外層大括號為要傳入的參數(JSX 語法),內層為要傳入的 object (大括號)。2-2-2-2 React 寫 CSS:inline-style 二:寫在
className
內為什麼不能用 class?
在 JSX 語法很特別的原因是不能直接傳 class,因為
class
在 JavaScript 是保留字,所以不希望用class
,所以改用className
,2-2-3
styled-component
syntax
`` 是 template literals(樣版字面值),也可以當成
function code
使用,安裝
import 套件
示範
可以發現:
Description
這個 component 會預設 className(HOBA-D),這個 className 就是style-component
幫我加的。原理:動態產生 className ,然後動態產生 CSS 放在 HTML tag 上。
示範 2
將
Title
也改成styled-component
,滑鼠移過去變成紅色,hover 效果。
實做 todolist
styled-component
會自己加 prefix 不用擔心有網路兼容性問題styled-component
也可以加入props
(properties 屬性)一般會將重複的再寫成一個 component:
[FE302] 2-2 styled component 實戰
此章節介紹比較進階,在切版時會用到的用法:
推薦官方文件:
Styled-component Basics
2-2-1 第一個常用的:Restyle
Restyle,在原本的

Button
component 上再加上 CSS 放在刪除按鈕上:如果今天想加上
<TodoItem>
的黑色背景:背景底色沒有變,因為

styled-component
背後的原理是透過傳ClassName
所以要在原本的
Component
傳入一個參數{className}
,然後把這個{className}
放在想放的地方:變成說某一個

GreyTodoItem
變成某一個 class 有這個background: grey;
,然後再看要把這個 class 給誰,這邊示範是給ItemWrapper
。也可對象為
styled-component
,直接如上方寫即可,他會直接處理好;也可以對一般的component
做一樣的事情(傳入{className}
),2-2-2 第二個常用的:Media Queries (MQ)
通常習慣從 mobile 寫起,先看 mobile 版面,參考W3 School: Media Queries
從手機版變到平版(最小 768 px)時,字體會從

20px
變成16px
。但是每個 component 都要加上 MQ(Media Queries),很麻煩,通常會建立一個
constants/constants.js
常數名稱的資料夾。style.js
2-2-3 Advanced:theming
global
的參數,在App.js
就能用到。theme
傳遞變數的功能,來達到我們之前寫 SASS 的變數功能。可以調整主色,如果哪天想要調整主題色,就可以使用這個來調整主題色,從主題色紅色改藍色等等。
使用
<ThemeProvide theme={theme}>
,傳入global
參數:然後另外設 object,代入如下一段 code(
App.js
)透過
index.js
的<ThemeProvider theme={theme}>
傳入的theme
變數:記得在 CSS 每個後面加分號,不然會沒有效果。
styled-component
需要的也可以去官方網站補充
如果後面切版太多 component,可以另建檔案,把 component 獨立出來:
export default function TodoItem() {}
範例:
將 App.js 分開,拆到
TodoItem.js
[FE302] 2-3 [一探 JSX 背後的秘密]
為什麼可以使用
return()
,就建立起來了呢?背後其實是通過 Babel 轉換而來:
試試看 使用被 Babel 轉成的 JS:
示意:
其實是一個 function,把
object
、children
、另外如果 childredn 裡面是另外一個 component 的話:
再在裡面做一次
React.createElement()
在 React 17 以前:
每個有使用到
JSX
的地方,都要import React from 'react';
,因為他會使用到React.createELement()
的語法,不然會壞掉在 React 17 之後:
Babel 會幫我們做
[FE302] 2-4 [初探 State]
UI 只是 State 的 mapping。
畫面永遠由 state 產生。
UI = f(state)
在 React 要使用 State,需要引入 React modules。
React.useState()
的state
就是一個hook
。← React 16.8 → 才出現 hooks,在 function component 使用
state
syntax:
在 component 中,有兩種:
試試看做一簡單的 state 點擊後會增加次數
點擊
increment
按鈕後,會實行handleButtonClick
的 function,也就是會執行SetCounter(counter + 1)
,然後在畫面上的counter:
顯示數字會+1。再點擊一次,變成+1,從 9 變成 10
原理解釋:
React 流程
mount
(瀏覽器 render 出來畫面)以下圖解釋:
setCounter(counter+1)
)useState 傳入陣列,再搭配
.map()
,把每一個 array element render 成 component。array.map()
react 沒有迴圈,只能用 map,好處是可以把每一個 array element map 成 component。就是可以 render 很多component。
所以在 React 如果要 render 一系列的資料,就會使用
.map
來做。錯誤訊息:
Warning: Each child in a list should have a unique "key" prop.
在使用
.map()
產生component
時,需要產生key
讓react
去辨別是哪一個 item,先以{index}
為 key,但不推薦名稱命名為index
。當 React 判定 old statue = new state,就不會更新
statue is immutable
如何改 state?
[FE302] 2-4 [再探 State]
state 分成兩種:
複習 useState,
controller component & uncontrolled
1. controlled state
所有在 UI 上會動的東西 幾乎都是個state
其實在輸入
qwer
時,也會在 React 的 state,可以在自己的裡面控制。,如下範例的無法輸入任何字母、數字進去,沒辦法改變這個 state
但是輸入了,什麼都沒有改變,因為 state 沒有變,還是
''
空字串state 還是狀態不會變(immutable),要怎麼改變 state 呢?
可以在
<input type='text '>
裡面加入onChange
的事件。onChange={handleInputChange}
onCLick={handleButtonClick}
命名慣例:handle 開頭。
那加上了
onChange={handleInputChange}
,就要來實作功能:每輸入一個字母,就會

console.log(e.target.value)
,會把新輸入的 value 印出來現在要改成
setValue
改變 state 的值:今天輸入 a,觸發了
handleInputCHange
事件,此時e.target.value
為 a,所以value
值為 a,只要 state 改變,就會 rerender,現在<input value={value} />
的{value}
變成 a。今天我再來輸入 b,觸發
handleInputCHange
事件,此時e.target.value
為 ab,所以value
值為 ab,只要 state 改變,就會 rerender,現在<input value={value} />
的{value}
變成 ab。透過這個方式,就可以把
input
的 state 值,放入 state 內。小結:放在
controlled state
裡面2. uncontrolled state
第二種是 uncontrolled state
React 官方教學
什麼是 component?props?
其中前面提到:
{props.children}
,不太懂為什麼要使用props.children
。所以從Components 與 Props介紹起:
component 組件
就很像 CSS 切版的概念,將各小區塊的 UI寫在 JavaScript,還可以有著 JavaScript 的輔助,套用到程式的邏輯。
如何建立一個 component?
建立一個 component 最簡單的方法就是
現在我們用一個 function 叫做 Welcome 輸入一個 React 參數 props,回傳一個 React element(
<h1> hello, {props.name}</h1>
)。現在做好了一個 component,這樣就可以用程式的邏輯,將 UI 放在 JavaScript 上,我們會希望這個
{props.name}
如變數一般,可以替換。回顧一下,先前我們要在
ReactDOM.render()
插入 component 時,都是只有加入 component,沒輸入參數,所以使用的時候,就會如以下情形:如果今天想要替換 Welcome component 裡面的變數的話,就可以這樣寫:
props
是指prperties
屬性,這個用 function Welcome 符合 React component 的規則,也回傳了一個React element
(<h1> hello, {props.name}</h1>
),其中properties
為屬性。這邊自定義一個
name
的屬性(properties),我覺得應該是長相挺像HTML 標籤
,然後寫在標籤裡面的名稱,很像是自定義的屬性,然後將
React element
放到ReactDOM.render()
的 JSX 裡面:現在知道怎麼使用跟建立自定義
component
,然後先前說的React component
的概念很像是把他分成很多個 UI 小區塊,再利用 JavaScript 程式的語法跟邏輯寫好 HTML、CSS 等等,現在切出了一塊小的 UI,但是如果這些小的 UI 組件,如果又像是 HTML 一樣,有幾個寫幾次的話,那就不符合有程式邏輯的寫法,所以現在要說明的就是以程式邏輯的寫法,寫 HTML 重複性的組件(component)。(1) 建立:利用 function component or class component(ES6)定義跟建立一個 component
(2) 使用:
<Welcome />
,如果有輸入參數的話就是像以上的範例:<Welcome name='Sara' />
,(3) 使用方法有幾種:
ReactDOM.render()
的 JSX 裡面。上面提到了怎麼使用 Component 並 render 到頁面上,就像是上圖的
TodoList
只有一個 component。不過前面提到其實
component
就像是 UI 一小塊一小塊的切版那樣,所以component
裡面可能還會有component
,然後要靈活運用相似的區塊,讓裡面的 component 也要可以輸入參數改變值,所以下面需要學習怎麼讓 component 裡面還有 component 並可以傳入參數,就像是上圖的 todolist 在待辦清單的部分,有待辦事項、刪除按鈕、新增的輸入框等,由幾個小組件組成。下面以React 官方文件的範例為練習
概念矯正
react element
另外在從 Hooks 開始,讓你的網頁 React 起來系列 第 5 篇也提到:
但此時就在想,為什麼可以用
()
包起來呢?在React 介紹 JSX中有提到:舉例:在第 10 ~ 14 行,可以發現將 JSX 「多行」內容(JSX內容:
<h1>Hello, {formatName(user)}!</h1>
)以()
包起來,這樣可以省去自動分號補足的麻煩此外這個例子還示範了在 JSX 內容,可以
嵌入呼叫 JavaScript function (formatName(user)) 的回傳值
小結:
()
包覆,並令成變數,進階一步在 JSX 的內容裡,利用{}
來插入一些 JavaScript 的變數(如:<h1>Hello {name}</h1>
或者是 function裡回傳的值(如:<h1>hello functionName(user))</h1>
。JSX 本身也是 expression
在經過編譯的 JSX expression 會變成 JavaScript 的 function,表示也可以使用
if
、for
中使用 JSX:在 JSX 中指定屬性
可以在 JSX 指定 HTML tag 內的屬性(attribute),有兩種方法:
不建議在 JSX 內的屬性混用
{}
及"string"
。在 JSX 中指定 Children
也可以在 JSX 內指定要哪些子 HTML tag 標籤,像是原本我們在 JavaScript 是:
只有將一個
<img>
包成 JSX。現在也可以在裡面指定子標籤:
React element(JSX 表示物件)
參考:JSX 介紹
舉例:
等同於以下:
感覺使用
React.createElement
是將其拆解,然後官方文件上寫說會「會進行一些檢查以幫助你寫出沒有 bug 的程式」,會產生類似的物件(下面這個已經簡化過):Render Element——
React element 是單純的 object,可以從前一篇章介紹
JSX 表示物件——element
複習起,然後在建立 React 應用程式的最小單位是「(React)element」。
React element
是immutable
,那要怎麼更新?官網以
setInterval
在每秒來重新 render 當前時間。那這樣React element
是 immutable,也不能總用setInterval
來更新吧?後面會提到一個
stateful component
的概念。resources referenct
React Function Components
tags:
MTR05
Lidemy 學習筆記