前言

讀懂本書

React異軍突起

React框架自誕生伊始就備受矚目，一切皆源自其強大的背景。React框架最初是社交網絡巨頭Facebook（臉書）公司的一個內部項目，設計目標是用來架構Instagram網站的。Instagram就是大名鼎鼎的、用于圖片分享的社交應用，用戶可通過Instagram隨時隨地將抓拍的圖片上傳到移動終端設備（手機、平板電腦等）上彼此分享。

本書注重代碼實踐，為讀者全面深入地講解了針對React 16開發的技術棧。全書百余個代碼實例給讀者帶來的不僅僅是全面的基礎知識，更是為讀者提供了設計簡潔、開發高效的實際項目應用。可以說，這是一本學習React 16框架開發技術的高效手冊。

React支持跨終端、多平臺的開發，無論是傳統的PC端、還是現今正流行的移動端設備，又或是Windows系統、Android系統和iOS系統，均是React可以發揮威力的舞臺。可以說，今天React框架的迅速崛起是由其內在的技術特性所決定的。

React技術領先

React框架的設計初衷主要是用于構建UI，而構建UI的核心思想就是封裝組件。組件維護自身的狀態和UI，每當狀態發生改變時就會自動重新渲染組件自身，而不需要通過反復查找DOM元素后再重新渲染整個組件了。

同時，React框架支持傳遞多種類型的參數，比如：代碼聲明、動態變量，甚至是可交互的應用組件。因此，UI渲染方式既可以通過傳統的靜態HTML DOM元素，也可以通過傳遞動態變量，甚至是通過整個可交互的組件來完成的。

本書中關于以上這些技術內容均有詳細介紹，通過具體的代碼實例幫助讀者學習和掌握這些知識點的原理及使用方法，真正實現了理論與實踐相結合的學習方法。

本書真的適合你嗎？

本書涵蓋了絕大部分關于React 16基礎及進階的內容，將知識點與應用實例相結合，通過大量的代碼實例幫助讀者快速掌握React 16框架的編程技巧，并應用到實踐開發之中。本書通過這種學以致用的方式來增強讀者的閱讀興趣，對于無論是基礎內容或提高內容，相信讀者都可以從中獲益。

本書內容安排

本書共16章，各章節針對不同的React 16知識點進行了詳細的介紹：

第1章主要介紹了關于React 16框架安裝、環境搭建和開發工具使用方面的內容，旨在幫助讀者快速掌握React開發的方法。

第2章主要介紹了關于React JSX方面的知識，JSX其實就是JavaScript XML的縮寫，具有支持自定義屬性和很好擴展性的特點，是React框架所獨有的內置語法，因此建議設計人員使用JSX方式來實現UI中的虛擬DOM。

第3章主要介紹了React組件和Props參數方面的內容。React組件可以將UI切分成一些獨立的、可復用的部件，這樣有助于設計人員專注于構建每一個單獨的部件。React組件通過Props可以接收任意的輸入值，因此Props也可以理解為參數的概念。

第4章主要介紹了React State（狀態）和生命周期方面的知識。React將組件看成是一個狀態機（State Machines），通過其內部定義的狀態（State）與生命周期（Lifecycle）實現與用戶的交互，并維持組件不同的狀態。

第5章主要介紹了React事件處理方面的內容。React框架的事件處理機制與JavaScript的DOM元素事件類似，但二者在語法上是略有不同的。通過本章的學習，可以幫助讀者理解React事件處理的使用方法。

第6章主要介紹了關于React條件渲染方面的內容。在React框架中，設計人員可以創建不同的組件來封裝各種業務需求，然后依據需求的不同狀態，僅僅渲染組件中對應狀態下的局部內容。

第7章主要介紹了關于React列表的知識。具體包括如何創建、轉化和使用列表，以及如何通過Key來識別元素改變的操作。

第8章主要介紹了關于React表單的內容。具體包括如何在React框架中使用表單（Form），以及與HTML表單的異同。React表單中的DOM元素與React框架中的其他DOM元素有所不同，因為表單元素需要保留一些內部狀態（State）。

第9章主要介紹了關于React組合與繼承方面的知識。React官方推薦設計人員在實際項目中盡量使用組合模式、而非繼承來實現組件的代碼重用。因此在本章中將對這兩種模式進行一些基本的闡述。

第10章主要介紹了關于React狀態提升方面的內容。在React框架中，當多個組件需要反映相同的變化數據，這時建議將共享狀態提升到最近的共同父組件中去，這就是所謂的“狀態提升”。

第11章主要介紹了關于React擴展方面的內容。所涉及的內容包括Node、Babel、Webpack、Browserify、React Router和單頁面，以及Redux等。這些知識點或是與React環境相關、或者與React擴展相關，都是與React設計開發息息相關的內容。

第12~16章針對React及其技術棧專門開發了5個實際的項目應用，具體包括React、React-Router和Redux等方面的內容，盡量幫助讀者在實踐中學習和掌握React框架開發Web應用的方法和技巧。

本書特點

（1）本書從最簡單的、最通用的React代碼實例出發，拋開枯燥的純理論知識介紹，通過實例講解的方式幫助讀者快速學習React開發技巧。

（2）本書內容涵蓋了React框架及其技術棧開發所涉及的絕大部分知識點，將這些內容整合到一起可以系統地了解和掌握這門語言的全貌，為介入大型Web項目的開發做了很好的鋪墊。

（3）本書對于實例中的知識難點做出了詳細的分析，能夠幫助讀者有針對性地提高React編程開發技巧，并且通過多個實際的項目應用，盡力幫助讀者掌握React框架開發所涉及方方面面的內容。

（4）本書在React及其相關知識點上按照類別進行合理的劃分，全部的代碼實例都是獨立的，讀者可以從頭開始閱讀，也可以從中間開始閱讀，不會影響學習進度。

（5）本書代碼遵循重構原理，避免代碼污染，真心希望讀者能寫出優秀的、簡潔的、可維護的代碼。

源代碼下載

本書示例源代碼下載地址請掃描右邊二維碼獲得。

如果下載有問題，請直接聯系booksaga@163.com解決問題，郵件主題為“React.js 16從入門到實戰”。

本書讀者

●React框架學習初學者

●Node.js框架學習初學者

●JavaScript開發初學者和前端開發初學者

●由JavaScript向React框架轉型的開發人員

●IT培訓學校前端實踐課程的學生

●高等院校前端實踐課程的學生

關于封面照片

封面照片由蜂鳥網的攝影家ptwkzj先生友情提供，在此表示衷心感謝。

作者

2020年1月