前端首選: React+Redux開發最漂亮的介面 | 誠品線上

前端首選: React+Redux開發最漂亮的介面

內容簡介

內容簡介 本書特別推薦給欲使用React、Redux、Babel與Webpack來架設Web應用程式的程式設計師，此技術堆疊的特點如下：●清爽的元件程式結束了全螢幕HTML標籤與類別名稱的噩夢。●宣告式地將資料對映為介面，減少了煩瑣的DOM操作。●高階函數、管線、Currying等函數式程式設計思想的運用，使得複雜邏輯的處理變得相當簡單。●自動化建置編譯技術，降低了原始程式碼與靜態資源的管理成本。適用：熟悉JavaScript程式設計，有興趣使用React與Redux來架設Web應用的程式設計師與相關從業人員

作者介紹

作者介紹 ■作者簡介劉一奇

產品目錄

產品目錄 第一部份 基礎篇Chapter 01 技術簡介ReactReduxNode與Universal繪製BabelWebpack歸納Chapter 02 在Nodejs中執行React實例撰寫React元件在Nodejs中繪製元件使用Babel編譯執行Nodejs程式Require Hook簡介使用Require Hook的步驟歸納Chapter 03 在瀏覽器中執行React實例元件重複使用在瀏覽器中繪製React元件使用Webpack 包裝編譯在瀏覽器中執行歸納Chapter 04 開發伺服器和熱更新 (hot reloading)實例安裝設定Babel使用react-hmre預設react-hmre的功能設定Webpack設定Express伺服器歸納Chapter 05 React 的創新語法：JSX實例JSX簡介JSX常用語法類似HTMLJavaScript運算式樣式註釋陣列HTML標籤vs React元件歸納Chapter 06 React的資料載體：state、props與context實例StateProps使用props驗證props組合使用state與propsContext使用props傳遞資料使用context傳遞資料Props與context的適用場景在React開發者工具中檢視歸納Chapter 07 React的兩個物件：ReactElement與元件實例實例ReactElementJSX中的閉合標籤是ReactElementReactElement是什麼ReactElement的兩種類型React元件的繪製流程元件實例元件實例簡介元件、ReactElement與元件實例的區別元件實例的生滅：生命週期函數React元件中的this歸納Chapter 08 初識Redux實例ActionReducer定義純函數不能修改參數stateStore職能建立取得與監聽發起action歸納Chapter 09 Action建立函數與Redux Thunk中介軟體實例Action建立函數撰寫發起意義Redux Thunk中介軟體功能安裝啟動歸納第二部份 進階篇Chapter 10 React與Redux的連接：手動連接實例手動連接的步驟撰寫React元件撰寫Redux將Redux手動連接到React元件手動連接的缺點歸納Chapter 11 React 與Redux的連接：使用react-redux連接實例連接步驟多種寫法連接原理Provider工作原理connect工作原理展示元件與容器元件歸納Chapter 12 實現復原（Undo） 重做（Redo）實例復原（Undo） 重做（Redo）Redux開發者工具安裝使用Redux並不「低效」歸納Chapter 13 測試實例測試工具MochaEnzymeExpect測試action建立函數測試React元件測試容器元件測試reducer純函數執行測試指令稿歸納Chapter 14 Redux的全域狀態與React元件的內部狀態實例全域狀態與內部狀態的定義全域狀態完全替代了內部狀態？全域狀態與內部狀態的適用場景歸納Chapter 15 React與Redux中的陣列處理實例reduce()概述語法範例filter()概述語法範例map()概述語法範例every()概述語法範例some()概述語法範例展開運算子概述語法範例歸納Chapter 16 Redux的大舞台：非同步實例JavaScript事件驅動程式設計PromiseRedux中的非同步非同步action建立函數非同步請求前後的state變化State tree結構檢視state tree如何建置state tree非同步與變化準備工作追蹤非同步與變化歸納Chapter 17 自訂Redux中介軟體實例中介軟體的功能中介軟體的撰寫中介軟體的執行自訂API 中介軟體歸納Chapter 18 Universal繪製實例公用一套程式服務端繪製用戶端繪製歸納第三部份 擴充篇Chapter 19 Universal繪製神器：Webpack同構工具實例Webpack同構工具的功能服務端呼叫用戶端呼叫真實場景設定伺服器的入口獨立開發伺服器設定Webpack設定Webpack同構工具在服務端和用戶端使用require()歸納Chapter 20 多頁面的實現：路由實例路由也是元件路由比對使用Link 和IndexLink 導覽服務端路由歸納Chapter 21 多頁面下的非同步作業實例redux-amrc功能設定使用Action與stateAPI多頁面下的非同步作業撰寫測試API預載資料手動載入資料操作資料歸納Chapter 22 使用Bootstrap實例bootstrap-loader基本用法設定PostCSS與Autoprefixer簡介用法React-Bootstrap歸納第四部份 實戰篇Chapter 23 架設大型專案實例開發伺服器開發環境下的Webpack設定Webpack同構工具的設定獨立的開發伺服器啟動開發伺服器前端伺服器設定前端伺服器使用元件繪製HTML頁面啟動前端伺服器API伺服器設定API伺服器啟動API伺服器生產環境下的建置編譯編譯執行Nodejs生產環境下的Webpack設定公用程式工具集路由與頁面品質保障測試Airbnb程式開發標準除錯機EditorConfig歸納Chapter 24 表單實例高階元件ReduxForm設定簡單表單同步驗證表單非同步失焦驗證表單傳送表單到伺服器歸納Chapter 25 圖表與表格實例圖表元件表格元件從伺服器取得資料歸納Chapter 26 使用者認證實例撰寫認證APIExpress-session中介軟體載入目前認證狀態登入與登出API許可權保護發送cookie撰寫用於認證的action建立函數登入頁面和導覽列前端路由保護歸納Chapter 27 部署實例Heroku平台安裝工具並登入準備程式部署程式其他操作持續整合與生產相關的問題歸納Chapter 28 其他資源線上文件參與社區活動

商品規格

最佳賣點

最佳賣點 : √React與Redux的基礎知識介紹。
√透過精彩的官方範例學習React與Redux。
√優秀協力廠商的相關擴充學習。
√架設大型Web應用程式實戰。
全書不僅止於介紹技術的使用方法，更詳析其背後的理念與智慧。除此之外，全書除了第1章和第28章外，每章節都

試閱文字

推薦序 : 自序
致讀者
本書是為想以React、Redux、Babel和Webpack來架設Web 應用程式的程式設計師所準備的。與其他技術堆疊相比，此技術堆疊（指的是React、Redux、Babel、Webpack以及社區中許多與此相關的優秀工具）的學習成本並不低，但其中的智慧與思想卻著實令人讚歎：清爽的元件程式結束了全螢幕HTML標籤與類別名稱的噩夢；宣告式地將資料對映為介面，減少了煩瑣的DOM操作；高階函數、管線、Currying等函數式程式設計思想的運用，使得複雜邏輯的處理變得相當簡單；自動化建置編譯技術降低了原始程式碼與靜態資源的管理成本。隨著時間的演進，技術工具或許很快會改朝換代，但是這些前端工程中的最佳做法思想卻不會輕易過時。如果你不僅想學習這些技術的使用方法，更想了解這些技術背後所包含的思想與智慧，那麼筆者真誠地建議你閱讀本書。
✤閱讀本書之前的準備
想要極佳地了解本書的內容，讀者需要具備一定的Nodejs和ES2015、ES2016基礎，至少要了解一些常見的概念，例如NPM、模組系統、常數、函數、裝飾器和類別。除此之外，最好還熟悉JavaScript程式在伺服器和瀏覽器環境下的除錯技術。
學習本書範例程式時，大部分時間都要在命令列中操作。因此，你應該能夠熟練使用自己作業系統中的命令列工具。
本書附帶的程式是開放原始碼的，全部上傳到GitHub。這些範例程式中的開發經驗來自開放原始碼社區和筆者自己的實作思考。筆者並不認為這是使用React與Redux開發Web應用程式的唯一方式。讀者可以將其作為參考，如果有更好的想法，強烈建議讀者將其貢獻給社區，與更多的開發者一起交流進步。
最後要說明的是，本書因篇幅有限等原因，無法對每一項技術的說明都做到完整而詳盡。因此，讀者可根據書中的提示和推薦，去閱讀參考對應技術的官方文件。
✤本書的內容安排
本書分為四部分。
第一部分 基礎篇 主要介紹React與Redux的基礎知識。第1章 簡介本書所要說明的技術，包含React、Redux、Node與Universal繪製、Babel及Webpack。
第2章 說明如何在Nodejs中執行React。
第3章 說明如何在瀏覽器中執行React。
第4章 介紹開發伺服器和熱更新 (hot reloading) 技術及其實現過程。
第5章 介紹React的創新語法：JSX。
第6章 介紹React的資料載體：state、props與context。
第7章 介紹React的兩個物件：ReactElement和元件實例。
第8章 介紹Redux的action、reducer與store。
第9章 介紹Redux的action建立函數和Thunk中介軟體。
第二部分 進階篇 透過精彩的官方範例學習React與Redux。
第10章 說明如何手動將Redux連接到React中。
第11章 說明如何使用react-redux將Redux連接到React中。
第12章 介紹Redux的復原 (Undo)/重做 (Redo) 和Redux開發者工具的使用。
第13章 說明如何在React與Redux的程式中撰寫測試。
第14章 討論Redux的全域狀態與React元件的內部狀態。
第15章 說明React與Redux中常用的幾種陣列處理方法。
第16章 介紹Redux中的非同步處理。
第17章 介紹如何自訂Redux中介軟體。
第18章 說明如何使用React與Redux實現Universal繪製。
第三部分 擴充篇 學習一些優秀的協力廠商擴充。
第19章 介紹Webpack同構工具。
第20章 介紹React Router，並透過它實現Universal路由。
第21章 介紹多頁面下的非同步處理。
第22章 介紹了bootstrap-loader、PostCSS、Autoprefixer和React-Bootstrap。
第四部分 實戰篇 逐步架設大型Web 應用程式。
第23章 介紹一個大型專案的基本結構。
第24章 使用ReduxForm製作各種表單。
第25章 實現圖表與表格。
第26章 實現使用者認證。
第27章 說明部署到Heroku的方法，並實現持續整合。
第28章 列出其他資源。
✤如何使用範例程式
本書使用的範例程式可在GitHub上取得：
https://githubcom/lewis617/react-redux-book
https://githubcom/lewis617/react-redux-heroku
除了第1章和第28章外，本書每個章節都有一個範例程式。前三部分使用了短而精的範例程式，獨立示範技術的功能。從第四部分開始，每一章的實例都會建立在前一章實例的基礎上，最後完成一個大型專案的架設。
另外，為了方便部署到Heroku，並實現持續整合，第27章的實例被獨立到另一個GitHub倉庫中，也就是上述的第二個GitHub倉庫。
✤致謝
在寫這本書的過程中，家人、朋友、主管、同事都給我了很多幫助。沒有他們，我是不可能完成本書的，在此表示由衷的感謝。
首先我要特別感謝王祖超、梁錦津、宋兵、陳仕傑、屈光宇、呂明岩，他們在本書撰寫的不同階段審校書稿，並對書稿涵蓋的內容和架構給予了建設性建議。
還要感謝電子工業出版社的許豔編輯，她對本書進行了出色平穩的編輯，並給予我無盡的支援、建議和協助。
最後，感謝在GitHub社區中為本書提供幫助的人士：
■ Dan Abramov（Redux的作者）
■ Nikolay Nikolaev（Webpack同構工具的作者）
■ Erik Rasmussen（ReduxForm的作者）
■ Eric Ferraiuolo（serialize-javascript的貢獻者）
■ Mihail Diordiev（redux-devtools-extension的作者）
他們積極熱心地回覆我傳送的Issue，為本書提供了重要的技術支援。