進階/全文搜尋
IP : 216.73.216.108
首頁 電腦 詳目頁
0人評分過此書

在React生態圈打滾的一年feat.TypeScript

作者
：
黃冠霖（神Q超人） (著)
出版社
：
博碩文化股份有限公司
出版日期
：
2020/10/01
閱讀格式
：
PDF
書籍分類
：
電腦 ; 學術書
學科分類
：
科學類
ISBN
：
9789864345335
系統程式 軟體研發 行動資訊

本館館藏

借閱規則
當前可使用人數 30 人
借閱天數 14 天
線上看 0 人
丨
借閱中 0 人

計次服務

借閱規則
借閱天數 14 天
選擇分享方式

推薦本館採購書籍

您可以將喜歡的電子書推薦給圖書館，圖書館會參考讀者意見進行採購

讀者資料
圖書館 ：
* 姓名 ：
* 身分 ：
系所 ：
* E-mail ：
※ 我們會寄送一份副本至您填寫的Email中
電話 ：
※ 電話格式為 區碼+電話號碼(ex. 0229235151)/ 手機格式為 0900111111
* 請輸入驗證碼 ：
更新驗證碼
一本記載了關於React開發生態圈的技術書籍
不只說明應該下載哪些工具以及如何使用，更要你了解為何需要它
◎清楚表達每個步驟或重點程式碼背後的意義
◎從無到有開發，只需一台電腦就能一同探索React生態圈
◎精選兩個實戰範例，不論是開發網站或發布元件到npm，皆一網打盡

本書內容改編自第11屆IT邦幫忙鐵人賽的ModernWeb組佳作網路系列文章《在React生態圈內打滾的一年feat.TypeScript》，有別於以往只告訴你用create-react-app快速建立React專案的教學，從最基本的Webpack、Babel配置開始，告訴你該如何依照需求建立適合自己的React專案，避免初學者陷入「知其然卻不知所以然」的情況。

除了基本的React專案之外，也介紹了如何為嘔心瀝血打造的元件撰寫單元測試，以及如何在React專案中導入TypeScript等技巧，讓你在開發上更無往不利。

【四大重點】
◎從頭開始了解React生態圈，明白工具為何存在
本書的一大重點是「先釐清問題後解決」，因為不論是ReactRouter、Redux、單元測試或TypeScript，每個工具的出現都有它的意義。在使用這些工具之前，必須先清楚知道它們幫助了你什麼，才能解決正確的問題。

◎從Reactv16入門，直接以最新的Hooks開發
本書直接從Hooks學習React的元件開發，同時也考慮到React生態圈內其他套件對於Hooks的支援，除了展示套件的基本用法之外，也介紹了Hooks的寫法，讓你不會迷失在快速進化的前端技術之中。

◎從「前端」角度介紹「單元測試」，替你的程式碼上道防護網
「思考單元測試的意義以及測試的方法」是本書的精華內容之一，本書從原生的JavaScript到React元件，介紹了各種情境以及測試案例的寫法，不斷帶出「究竟什麼樣的測試案例才是有價值的」，讓「單元測試」這個技能不再像是謎一般的存在。

◎介紹如何導入TypeScript並運用，提升前端開發的守備範圍
近年來逐漸火熱的TypeScript，是由微軟所研發出來的新語言，本書將說明如何一步步將TypeScript導入至React專案，更重要的是釐清TypeScript可以在開發中發揮什麼幫助或解決什麼問題。
  • CHAPTER 00 開發React 專案的事前準備
    • 0.1 事前準備
    • 0.2 世界最大的套件庫npm
      • 0.2.1 下載安裝NVM ─Windows 篇
      • 0.2.2 下載安裝NVM ─ macOS 篇
      • 0.2.3 NVM的基本指令介紹
      • 0.2.4 透過npm 下載及管理套件
      • 0.2.5 npx 又是什麼？
    • 0.3 選擇順眼又順手的編輯器
      • 0.3.1 下載Visual Studio Code
  • CHAPTER 01 從無到有建立React 的開發環境
    • 1.1 為什麼需要了解開發環境？
      • 1.1.1 create-react-app 的優點與缺點
    • 1.2 建立React 專案最簡單的方法─ create-react-app
      • 1.2.1 用create-react-app 建立專案
      • 1.2.2 解析create-react-app 的專案路徑
      • 1.2.3 如何執行、打包及測試create-react-app 的專案
      • 1.2.4 create-react-app 的eject
    • 1.3 用Webpack 打包你的心血結晶
      • 1.3.1 下載Webpack 並配置設定檔
      • 1.3.2 打包第一個JavaScript 檔案
      • 1.3.3 Webpack 如何尋找匯入套件的位置
    • 1.4 ES6 不支援？ JSX 瀏覽器看不懂？靠Babel 編譯吧！
      • 1.4.1 Babel 與Webpack 的搭配使用
      • 1.4.2 編譯React 的語法糖JSX
    • 1.5 善用SCSS 讓CSS 寫法更上一層樓
      • 1.5.1 在Webpack 加入SCSS 的編譯設定
    • 1.6 加上webpack-dev-server 提高開發速度
      • 1.6.1 下載webpack-dev-server 與設置方式
  • CHAPTER 02 從Hooks 開始的React 新生活
    • 2.1 打開通往React 世界的大門
      • 2.1.1 下載React 與基本應用
      • 2.1.2 React 專案結構
    • 2.2 關於JSX 一口氣全說完
      • 2.2.1 什麼是JSX ？
      • 2.2.2 關於元件（Component）
      • 2.2.3 替JSX 加上CSS
      • 2.2.4 元件的Props
      • 2.2.5 迴圈（Loop）
      • 2.2.6 判斷式（if...else...）
    • 2.3 用useState 管理元件的State
    • 2.4 掌管元件一切作用的useEffect
    • 2.5 從React.memo、useMemo 和useCallback 優化效能
      • 2.5.1 React.memo
      • 2.5.2 useMemo 與useCallback
    • 2.6 製作一個自己的Hooks 掌管共用邏輯
  • CHAPTER 03 用Router 來控制元件的呈現
    • 3.1 為什麼需要Router 以及什麼是SPA（Single-Page Application）？
    • 3.2 Router 的基本用法
      • 3.2.1 BrowserRouter 與HashRouter 的區別
      • 3.2.2 Router 鐵三角─ Switch、Route、Link
    • 3.3 透過URL 傳遞參數給元件─ match
    • 3.4 使用Hooks 讓控制Router 寫法更簡潔
      • 3.4.1 useHistory
      • 3.4.2 useParams
  • CHAPTER 04 用Redux 管理更龐大的State
    • 4.1 Redux 的基本介紹
      • 4.1.1 為什麼需要Redux ？
      • 4.1.2 Reudx 的特色與介紹
      • 4.1.3 也許你聽過npm uninstall redux
    • 4.2 Redux 的資料架構及狀態管理篇
      • 4.2.1 Redux 的數據流架構
      • 4.2.2 Redux 的基本用法─狀態管理篇
      • 4.2.3 結合多個Reducer 到Store
    • 4.3 Redux 的事件觸發篇
      • 4.3.1 Redux 的事件架構
      • 4.3.2 Redux 的基本用法─事件觸發篇
    • 4.4 用Hooks 取代connect 麻煩的寫法
      • 4.4.1 useSelector
      • 4.4.2 useDispatch
    • 4.5 製作一個logger 來了解Middleware
      • 4.5.1 Middleware 是什麼？
      • 4.5.2 用Middleware 製作一個Logger
    • 4.6 用Redux Thunk 來處理非同步事件
      • 4.6.1 同步與非同步的Action creator
      • 4.6.2 Redux Thunk 基本用法
  • CHAPTER 05 為程式碼做單元測試
    • 5.1 單元測試基本介紹
      • 5.1.1 為什麼要為程式做測試？
      • 5.1.2 關於自動化測試
      • 5.1.3 什麼是單元測試？
    • 5.2 Jest 的基本用法
      • 5.2.1 第一個測試案例與測試環境配置
      • 5.2.2 對類別（Class ）進行測試
      • 5.2.3 測試後產生的覆蓋報告
    • 5.3 善用Mock 取代真實環境
      • 5.3.1 相當危險的測試替身
      • 5.3.2 用Mock 取代真實環境
    • 5.4 導入@testing-library/react 測試元件
      • 5.4.1 @testing-library/react 的基本介紹和元件的測試
      • 5.4.2 在測試中Mock 掉SCSS
      • 5.4.3 測試元件最重要的事
    • 5.5 測試使用了Redux 的元件
    • 5.6 如何對Router 使用單元測試
    • 5.7 為你的自定義Hooks 做測試
  • CHAPTER 06 為React 專案導入TypeScript
    • 6.1 TypeScript 是什麼？能吃？
      • 6.1.1 在JavaScript 中的小問題
      • 6.1.2 TypeScript 的基本介紹
      • 6.1.3 TypeScript 的基本型別註記
    • 6.2 把TypeScript 放進React 專案裡
      • 6.2.1 安裝TypeScript
      • 6.2.2 處理第三方JavScript 套件
      • 6.2.3 讓TypeScript 讀懂JSX
      • 6.2.4 解決使用Redux 的型別問題
      • 6.2.5 設置Webpack 與Baebl 打包編譯
      • 6.2.6 SCSS 的型別處理
      • 6.2.7 處理TypeScript 的測試環境
    • 6.3 在React 中使用TypeScript 的那些事
      • 6.3.1 用Type 讓元件的Props 一目瞭然
      • 6.3.2 TypeScript 的型別推斷
      • 6.3.3 React 提供的預設型別
      • 6.3.4 自定義Hooks 的型別設置
  • CHAPTER 07 實際演練─雖然很俗氣，但還是從待辦事項開始
    • 7.1 待辦事項
      • 7.1.1 起手專案架構
      • 7.1.2 從頁面開始思考資料結構
      • 7.1.3 建立保管資料的自定義Hooks
      • 7.1.4 根據畫面設定事件邏輯
      • 7.1.5 拆分畫面的元件
      • 7.1.6 待辦事項的版面配置
      • 7.1.7 待辦事項的標題
      • 7.1.8 待辦事項的篩選條件區
      • 7.1.9 渲染待辦事項的列表
      • 7.1.10 待辦事項的表單處理
      • 7.1.11 調整待辦事項列表的樣式
      • 7.1.12 如果沒有Hooks ─導入Redux
      • 7.1.13 用Router 導向待辦事項資訊
    • 7.2 在GitHub 上讓你的作品發光發熱
      • 7.2.1 GitHub 基本介紹
      • 7.2.2 註冊GitHub 及建立程式碼儲存庫
      • 7.2.3 安裝Git 以及Git 基本用法
      • 7.2.4 開啟Git Pages 讓所有人知道你多猛
  • CHAPTER 08 實際演練─製作一個可重用的元件發布到npm 上
    • 8.1 可重用的程式碼
      • 8.1.1 可重用的方法
      • 8.1.2 可重用的元件
    • 8.2 將可重用的元件發布到npm
      • 8.2.1 起手專案架構
      • 8.2.2 打造一個可重用的按鈕
      • 8.2.3 發布前的配置設定
      • 8.2.4 發布套件到npm 與下載使用
      • 8.2.5 npm套件的更新與刪除
      • 8.2.6 製作美美的套件說明文件
  • 出版地 ： 臺灣
  • 語言 ： 繁體中文
在React生態圈打滾的一年feat.TypeScript

評分與評論

請登入後再留言與評分
幫助
您好，請問需要甚麼幫助呢?
使用指南
借閱規則 使用教學
常見問題
下載書紐教育版

客服專線：0800-000-747

服務時間：週一至週五 AM 09:00~PM 06:00

聯絡我們
loading