ReactJS 實踐入門 React Js Foundations Building User Interfaces with Reactjs: An Approachable Guide

目    錄

 

 

 

 

第1章  Hello,World！ 1

1.1  在沒有工具鏈的情況下

如何使用React 1

1.2  使用Create React App

和JSX創建交互式

“Hello,World”應用程序 6

1.3  本章小結 7

第2章  React基礎 9

2.1  React名稱的由來 9

2.2  UI層 10

2.3  虛擬DOM 11

2.4  React的原理 12

2.4.1  關於組件 12

2.4.2  組合與繼承 13

2.4.3  React是聲明式的 13

2.4.4  React是慣用語 14

2.4.5  為什麽要學習React 15

2.4.6  React與其他框架的

比較 15

2.4.7  React不是什麽 17

2.5  本章小結 18

第3章  JSX 21

3.1  JSX不是HTML 21

3.2  什麽是JSX 26

3.2.1  JSX的工作方式 26

3.2.2  轉譯器 28

3.3  JSX的語法基礎 29

3.3.1  JSX是JavaScript XML 29

3.3.2  避免使用保留字 30

3.3.3  JSX使用駝峰式命

名法 30

3.3.4  為DOM元素中的自定義

屬性加上data-前綴 30

3.3.5  JSX布爾屬性 31

3.3.6  使用花括號包含

JavaScript字面量 31

3.3.7  何時在JSX中使用

JavaScript 32

3.3.8  JSX中的條件 32

3.3.9  JSX中的表達式 34

3.3.10  在JSX中使用子

元素 35

3.3.11  React Fragment 36

3.3.12  本章小結 37

第4章  組件 39

4.1  什麽是組件 39

4.2  組件和元素 40

4.2.1  組件定義元素 40

4.2.2  元素調用組件 41

4.3 內置組件 42

4.3.1  HTML元素組件 42

4.3.2  Attributes和Props 46

4.4  用戶定義的組件 50

4.5  組件類型 51

4.5.1  類組件 51

4.5.2  逐步瞭解React類

組件 60

4.5.3  函數組件 67

 

4.5.4  函數組件和類組件的

區別 75

4.6  React子組件 75

4.6.1  this.props.children 75

4.6.2  Children的用法 76

4.7  組件的生命周期 79

4.7.1  掛載 79

4.7.2  更新 80

4.7.3  卸載 82

4.7.4  錯誤處理 82

4.7.5  提高性能並避免錯誤 82

4.8  渲染組件 87

4.8.1  用ReactDOM渲染 87

4.8.2  虛擬DOM 88

4.8.3  其他渲染引擎 89

4.9  組件的術語 91

4.10  本章小結 92

第5章  React DevTools 93

5.1  安裝和入門 93

5.2  檢查組件 95

5.2.1  使用組件樹 96

5.2.2  搜索組件 97

5.2.3  篩選組件 99

5.2.4  選擇組件 100

5.3  在DevTools中編輯組件

數據 101

5.4  使用額外的DevTools

功能 103

5.5  性能分析 104

5.6  本章小結 106

第6章  React數據流 107

6.1  單向數據流 107

6.1.1  理解單向數據流 108

6.1.2  為什麽使用單向

數據流 109

6.2  Props 110

6.2.1  組件接收Props 110

6.2.2  Props可以是任何數據

類型 110

6.2.3  Props是只讀的 111

6.2.4  使用PropType驗證

傳入的Props 112

6.2.5  默認Props 123

6.3  ReactState 127

6.3.1  什麽是state 127

6.3.2  初始化state 127

6.3.3  state和props的區別 130

6.3.4  更新狀態 130

6.3.5  狀態中應包含的

內容 140

6.3.6  構建Reminders應用

程序 141

6.3.7  狀態中不應包含的

內容 147

6.3.8  放置狀態的位置 147

6.3.9  狀態提升 148

6.3.10  關於key Prop 154

6.3.11  篩選提醒 160

6.3.12  實現isComplete

更改功能 164

6.4  轉換為類組件 166

6.5  本章小結 173

第7章  事件 175

7.1  React中事件的運行

機制 175

7.2  什麽是SyntheticEvent 177

7.3  使用事件偵聽器屬性 178

7.4  Event對象 178

7.5  支持的事件 180

7.6  事件處理函數 184

7.6.1  編寫內聯事件處理

程序 184

7.6.2  在函數組件中編寫

事件處理程序 185

7.6.3  在類組件中編寫

事件處理程序 186

7.6.4  綁定事件處理程序

函數 187

7.6.5  將數據傳遞給

事件處理程序 190

7.7  本章小結 191

第8章  表單 193

8.1  表單具有狀態 193

8.2  受控輸入與非受控輸入 194

8.2.1  更新受控輸入 195

8.2.2  控制函數組件中的

輸入 195

8.2.3  控制類組件中的輸入 196

8.3  提升輸入狀態 197

8.4  使用非受控輸入 199

8.5  使用不同的表單元素 200

8.5.1  控制input元素 200

8.5.2  控制textarea元素 201

8.5.3  控制select元素 201

8.6  阻止默認操作 202

8.7  本章小結 203

第9章  ref 205

9.1  什麽是ref 205

9.2  如何在類組件中

創建ref 206

9.3  如何在函數組件中

創建ref 206

9.4  使用ref 206

9.5  創建回調ref 208

9.6  何時應使用ref 209

9.7  何時不應使用ref 210

9.8  示例 210

9.8.1  管理焦點 210

9.8.2  自動選擇文本 210

9.8.3  控制媒體播放 212

9.8.4  設置滾動位置 212

9.9  本章小結 213

第10章  樣式化React 215

10.1  樣式的重要性 215

10.2  將CSS導入HTML

文件 216

10.3  在組件中使用普通的舊

CSS 216

10.4  編寫內聯樣式 218

10.4.1  JavaScript樣式

語法 219

10.4.2  為什麽使用內聯

樣式 220

10.4.3  為什麽不使用內聯

樣式 220

10.4.4  使用樣式模塊改進

內聯樣式 220

10.5  CSS模塊 221

10.5.1  命名CSS模塊

文件 222

10.5.2  高級CSS模塊

功能 223

10.6  CSS-IN-JS和樣式化

組件 224

10.7  本章小結 226

第11章  hook介紹 227

11.1  什麽是hook 227

11.2  為什麽要引入hook 227

11.3  使用hook的規則 228

11.4  內置hook 229

11.4.1  使用useState管理

狀態 229

11.4.2  使用useEffect鏈入

生命周期 233

11.4.3  使用useContext訂閱

全局數據 240

11.4.4  將邏輯和狀態與

useReducer相結合 241

11.4.5  使用useCallback緩存

回調函數 242

11.4.6  使用useMemo緩存

計算值 245

11.4.7  使用useRef訪問

子對象 246

11.4.8  使用useImperativeHandle

自定義公開值 247

11.4.9  使用useLayoutEffect

同步更新DOM 248

11.5  編寫自定義hook 248

11.6  使用UseDebugValue標記

自定義hook 250

11.7  查找並使用自定義

hook 252

11.7.1  use-http 252

11.7.2  react-fetch-hook 252

11.7.3  axios-hook 252

11.7.4  react-hook-form 253

11.7.5  @rehooks/local-

storage 253

11.7.6  use-local-storage-

state 254

11.7.7  其他有趣的hook 254

11.7.8  hook列表 254

11.8  本章小結 254

 

第12章  路由 257

12.1  什麽是路由 257

12.2  React中路由的用法 259

12.3  使用React Router 260

12.3.1  安裝並導入

react-router-dom 260

12.3.2  路由器組件 261

12.3.3  鏈接到路由 263

12.3.4  創建路由 268

12.3.5  location、history和

match對象 274

12.4  React Router hook 280

12.4.1  useHistory 281

12.4.2  useLocation 281

12.4.3  useParams 281

12.4.4  useRouteMatch 281

12.5  本章小結 281

第13章  錯誤邊界 283

13.1  錦囊妙計 283

13.2  什麽是錯誤邊界 284

13.3  實現錯誤邊界 286

13.3.1  構建自己的

ErrorBoundary組件 286

13.3.2  安裝預先構建的

ErrorBoundary組件 295

13.4  錯誤邊界無法捕獲的

錯誤 296

13.4.1  使用try/catch捕獲

錯誤邊界中的錯誤 296

13.4.2  使用react-error-boundary

捕獲事件處理程序中的

錯誤 297

13.5  本章小結 298

第14章  部署React 299

14.1  什麽是部署 299

14.2  構建應用程序 299

14.2.1  運行build腳本 300

14.2.2  檢查build目錄 300

14.2.3  filenames的由來 302

14.3  部署的應用程序有何

不同 303

14.4  開發模式與生產模式 303

14.5  發布到Web上 304

14.5.1  Web服務器托管 304

14.5.2  節點托管 304

14.5.3  使用Netlify進行

部署 305

14.6  本章小結 308

第15章  從頭開始初始化React

項目 309

15.1  構建自己的工具鏈 309

15.1.1  初始化項目 310

15.1.2  HTML文檔 310

15.1.3  主JavaScript文件 311

15.1.4  根組件 311

15.1.5  在瀏覽器中運行 312

15.2  Webpack的工作原理 315

15.2.1  加載器 315

15.2.2  插件 315

15.3  自動化構建過程 316

15.3.1  製作HTML模板 316

15.3.2  開發服務器和熱

重載 317

15.3.3  測試工具 317

15.3.4  創建npm腳本 321

15.4  構建源目錄 322

15.4.1  按文件類型分組 322

15.4.2  按功能分組 323

15.5  本章小結 323

 

第16章  獲取和緩存數據 325

16.1  異步代碼：與時間

有關 325

16.2  JavaScript永不休眠 326

16.3  在React中如何運行異步

代碼 329

16.4  獲取數據的方法 331

16.5  使用Fetch獲取數據 332

16.6  使用axios獲取數據 332

16.7  使用Web Storage 334

16.7.1  Web Storage的兩個

屬性 334

16.7.2  何時使用

Web Storage 335

16.7.3  何時不使用

Web Storage 335

16.7.4  Web Storage是

同步的 335

16.7.5  使用localStorage的

示例 336

16.7.6  使用localStorage

存儲數據 336

16.7.7  從localStorage

讀取數據 337

16.7.8  從localStorage中

刪除數據 339

16.8  本章小結 339

第17章  Context API 341

17.1  什麽是prop drilling 341

17.2  Context API如何解決

問題 342

17.2.1  創建Context 342

17.2.2  創建Provider 343

17.2.3  使用Context 343

17.3  Context的常見用例 345

17.4  不適用Context的情況 345

17.5  合成模式作為Context的

替代方案 346

17.6  示例應用程序：用戶偏好

設置 349

17.7  本章小結 351

第18章  React Portal 353

18.1  什麽是Portal 353

18.1.1  如何創建Portal 353

18.1.2  為什麽不直接渲染

多個組件樹 356

18.2  常見用例 357

18.2.1  模態對話框的渲染與

交互 357

18.2.2  使用模態管理鍵盤

焦點 362

18.3  本章小結 363

第19章  React中的無障礙性 365

19.1  為什麽無障礙性

很重要 365

19.2  無障礙性基礎 366

19.2.1  Web內容無障礙性

指南(WCAG) 366

19.2.2  Web無障礙計劃-無障礙

富互聯網應用程序

(WAI-ARIA) 367

19.3  在React組件中實現無障

礙性 367

19.3.1  React中的ARIA

屬性 367

19.3.2  語義化的HTML 368

19.3.3  表單無障礙性 369

19.3.4  React中的焦點

控制 369

19.3.5  React中的媒體

查詢 371

19.4  本章小結 373

第20章  高級主題 375

20.1  測試 375

20.1.1  Mocha 376

20.1.2  Enzyme 376

20.1.3  Chai 377

20.2  服務器端渲染 379

20.2.1  Flux 380

20.2.2  Redux 380

20.2.3  GraphQL 382

20.2.4  Apollo 383

20.2.5  React Native 383

20.2.6  Next.js 384

20.2.7  Gatsby 384

20.3  需要關註的人 384

20.4  有用的鏈接和資源 385

20.5  本章小結 385