這是一本關於 React.js 的小書。前端
由於工做中一直在使用 React.js,也一直以來想總結一下本身關於 React.js 的一些知識、經驗。因而把一些想法慢慢整理書寫下來,作成一本開源、免費、專業、簡單的入門級別的小書,提供給社區。但願可以幫助到更多 React.js 剛入門朋友。react
因爲水平有限,編寫的過程不免會有諸多錯誤,也但願你們在看的過程當中發現了問題,能夠在 Github 上給該項目發 Pull Request。衷心但願能夠有更多的人蔘與到本書的編寫當中。git
(本書的後續可能會作成視頻教程,敬請期待。)github
本書介紹
本書爲有一點前端基礎的而且是 React.js 零基礎的同窗而做,幫助他們掌握 React.js 而且靈活地把 React.js 應用到實際項目當中。若是你有必定的 HTML、CSS、JavaScript 基礎而且但願學習 React.js,而又以爲 React.js 當中有些概念比難以接受和理解,但願可以從零開始學習,那麼本書很適合你。但若是你已經對前端已經很是熟悉而且用過很多的前端框架和相關的組件化技術,建議你直接看官網文檔。redux
本書並不會文檔式地包含全部知識點,只會提煉實戰經驗中基礎的、重要的、頻繁的知識進行重點講解,讓你能用最少的精力深刻了解實戰中最須要的 React.js 知識和套路,輕裝上路。若是須要更多更全面的知識點,能夠參看更多的官方文檔或者其餘豐富的資料。前端框架
另外,本書全書採用 ECMAScript 2015,閱讀以前請確保本身已經掌握了 ECMAScript 2015 的基本語法,不然閱讀起來會很是困難。微信
本書初定分爲三個階段,每一個階段最後會有實戰分析,把該階段的知識點應用起來。前端工程師
第一個階段:但願能讓讀者掌握 React.js 的基本概念和基礎知識。包括問題的根源:前端組件的複用性問題、數據和視圖的同步問題。瞭解清楚問題之後再瞭解 React.js 的基礎知識,包括 JSX、事件監聽、state、props、列表渲染等。看看 React.js 是怎麼解決這些問題的。這個階段結束之後,讀者就能夠能夠運用 React.js 構建簡單的頁面功能。框架
第二個階段:讓讀者更進一步瞭解 React.js,包括組件生命週期及其含義、state 和 props 的進階概念、props 驗證及其意義、組件組合進階、如何和 DOM 打交道、而且開始引入前端應用狀態管理所存在的問題。less
第三個階段:讓讀者掌握 React.js 較爲高級的概念,包括高階組件、context。而且嘗試引入 React-router、redux 來協助咱們構建較爲完整的前端應用;還會開始深刻討論前端應用狀態管理的問題。
目錄
第一個階段- Lesson 1 - React.js 簡介
- Lesson 2 - 前端組件化(一):從一個簡單的例子講起
- Lesson 3 - 前端組件化(二):優化 DOM 操做
- Lesson 4 - 前端組件化(三):抽象出公共組件類
- Lesson 5 - React.js 基本環境安裝
- Lesson 6 - 使用 JSX 描述 UI 信息
- Lesson 7 - 組件的 render 方法
- Lesson 8 - 組件的組合、嵌套和組件樹
- Lesson 9 - 事件監聽
- Lesson 10 - 組件的 state 和 setState
- Lesson 11 - 配置組件的 props
- Lesson 12 - state vs props
- Lesson 13 - 渲染列表數據
- Lesson 14 - 實戰分析:評論功能(一)
- Lesson 15 - 實戰分析:評論功能(二)
- Lesson 16 - 實戰分析:評論功能(三)
第二個階段
- Lesson 17 - 前端應用狀態管理 —— 狀態提高
- Lesson 18 - 掛載階段的組件生命週期(一)
- Lesson 19 - 掛載階段的組件生命週期(二)
- Lesson 20 - 更新階段的組件生命週期
- Lesson 21 - ref 和 React.js 中的 DOM 操做
- Lesson 22 - props.children 和容器類組件
- Lesson 23 - dangerouslySetHTML 和 style 屬性
- Lesson 24 - PropTypes 和組件參數驗證
- Lesson 25 - 實戰分析:評論功能(四)
- Lesson 26 - 實戰分析:評論功能(五)
- Lesson 27 - 實戰分析:評論功能(六)
第三個階段(編寫中)
- Lesson 28 - 高階組件(Higher-Order Components)
- Lesson 29 - React.js 的 context
- Lesson 30 - 動手實現 Redux(一):優雅地修改共享狀態
- Lesson 31 - 動手實現 Redux(二):抽離 store 和監控數據變化
- Lesson 32 - 動手實現 Redux(三):純函數(Pure Function)簡介
- Lesson 33 - 動手實現 Redux(四):共享結構的對象提升性能
- Lesson 34 - 動手實現 Redux(五):不要問爲何的 reducer
- Lesson 35 - 動手實現 Redux(六):Redux 總結
- Lesson 36 - 動手實現 React-redux(一):初始化工程
- Lesson 37 - 動手實現 React-redux(二):結合 context 和 store
特別鳴謝
特別感謝如下朋友對本書所作的審校工做,給本書提出了不少寶貴的改進意見:
聯繫做者
-
加入《React.js 小書》讀者交流羣:huzidaha-me,一塊兒討論、交流、學習前端技術。
-
License
本做品採用 署名-禁止演繹 4.0 國際許可協議 進行許可