# React.js 小書 [](https://creativecommons.org/licenses/by-nd/4.0/legalcode) [](CONTRIBUTING.md) **轉載請注明出處，保留原文鏈接以及作者信息** 在線閱讀：[http://react.huziketang.com](http://react.huziketang.com) ## 簡介 這是一本關于 React.js 的小書。 因為工作中一直在使用 React.js，也一直以來想總結一下自己關于 React.js 的一些知識、經驗。于是把一些想法慢慢整理書寫下來，做成一本開源、免費、專業、簡單的入門級別的小書，提供給社區。希望能夠幫助到更多 React.js 剛入門朋友。 由于水平有限，編寫的過程難免會有諸多錯誤，也希望大家在看的過程中發現了問題，可以在 Github 上給該項目發 Pull Request。衷心希望可以有更多的人參與到本書的編寫當中。 （本書的后續可能會做成視頻版本，敬請期待。） ## 本書介紹 本書為有一點前端基礎的并且是 React.js 零基礎的同學而作，幫助他們掌握 React.js 并且靈活地把 React.js 應用到實際項目當中。如果你有一定的 HTML、CSS、JavaScript 基礎并且希望學習 React.js，而又覺得 React.js 當中有些概念比難以接受和理解，希望能夠從零開始學習，那么本書很適合你。但如果你已經對前端已經非常熟悉并且用過不少的前端框架和相關的組件化技術，建議你直接看官網文檔。 本書并不會文檔式地包含所有知識點，只會提煉實戰經驗中基礎的、重要的、頻繁的知識進行重點講解，讓你能用最少的精力深入了解實戰中最需要的 React.js 知識和套路，輕裝上路。如果需要更多更全面的知識點，可以參看更多的官方文檔或者其他豐富的資料。 **另外，本書全書采用 ECMAScript 2015，閱讀之前請確保自己已經掌握了 ECMAScript 2015 的基本語法，否則閱讀起來會非常困難。** 本書初定分為三個階段，每個階段最后會有實戰分析，把該階段的知識點應用起來。 **第一個階段**：希望能讓讀者掌握 React.js 的基本概念和基礎知識。包括問題的根源：前端組件的復用性問題、數據和視圖的同步問題。了解清楚問題以后再了解 React.js 的基礎知識，包括 JSX、事件監聽、state、props、列表渲染等。看看 React.js 是怎么解決這些問題的。這個階段結束以后，讀者就可以可以運用 React.js 構建簡單的頁面功能。 **第二個階段**：讓讀者更進一步了解 React.js，包括組件生命周期及其含義、state 和 props 的進階概念、props 驗證及其意義、組件組合進階、如何和 DOM 打交道、并且開始引入前端應用狀態管理所存在的問題。 **第三個階段**：讓讀者掌握 React.js 較為高級的概念，包括高階組件、context。并且嘗試引入 React-router、redux 來協助我們構建較為完整的前端應用；還會開始深入討論前端應用狀態管理的問題。 ## 目錄 **第一個階段**  * Lesson 1 - [React.js 簡介](http://react.huziketang.com/blog/lesson1) * Lesson 2 - [前端組件化（一）：從一個簡單的例子講起](http://react.huziketang.com/blog/lesson2) * Lesson 3 - [前端組件化（二）：優化 DOM 操作](http://react.huziketang.com/blog/lesson3) * Lesson 4 - [前端組件化（三）：抽象出公共組件類](http://react.huziketang.com/blog/lesson4) * Lesson 5 - [React.js 基本環境安裝](http://react.huziketang.com/blog/lesson5) * Lesson 6 - [使用 JSX 描述 UI 信息](http://react.huziketang.com/blog/lesson6) * Lesson 7 - [組件的 render 方法](http://react.huziketang.com/blog/lesson7) * Lesson 8 - [組件的組合、嵌套和組件樹](http://react.huziketang.com/blog/lesson8) * Lesson 9 - [事件監聽](http://react.huziketang.com/blog/lesson9) * Lesson 10 - [組件的 state 和 setState](http://react.huziketang.com/blog/lesson10) * Lesson 11 - [配置組件的 props](http://react.huziketang.com/blog/lesson11) * Lesson 12 - [state vs props](http://react.huziketang.com/blog/lesson12) * Lesson 13 - [渲染列表數據](http://react.huziketang.com/blog/lesson13) * Lesson 14 - [實戰分析：評論功能（一）](http://react.huziketang.com/blog/lesson14) * Lesson 15 - [實戰分析：評論功能（二）](http://react.huziketang.com/blog/lesson15) * Lesson 16 - [實戰分析：評論功能（三）](http://react.huziketang.com/blog/lesson16) **第二個階段**  * Lesson 17 - [前端應用狀態管理 —— 狀態提升](http://react.huziketang.com/blog/lesson17) * Lesson 18 - [掛載階段的組件生命周期（一）](http://react.huziketang.com/blog/lesson18) * Lesson 19 - [掛載階段的組件生命周期（二）](http://react.huziketang.com/blog/lesson19) * Lesson 20 - [更新階段的組件生命周期](http://react.huziketang.com/blog/lesson20) * Lesson 21 - [ref 和 React.js 中的 DOM 操作](http://react.huziketang.com/blog/lesson21) * Lesson 22 - [props.children 和容器類組件](http://react.huziketang.com/blog/lesson22) * Lesson 23 - [dangerouslySetHTML 和 style 屬性](http://react.huziketang.com/blog/lesson23) * Lesson 24 - [PropTypes 和組件參數驗證](http://react.huziketang.com/blog/lesson24) * Lesson 25 - [實戰分析：評論功能（四）](http://react.huziketang.com/blog/lesson25) * Lesson 26 - [實戰分析：評論功能（五）](http://react.huziketang.com/blog/lesson26) * Lesson 27 - [實戰分析：評論功能（六）](http://react.huziketang.com/blog/lesson27) **第三個階段** * Lesson 28 - [高階組件（Higher-Order Components）](http://react.huziketang.com/blog/lesson28) * ... ## 特別鳴謝 特別感謝以下朋友對本書所做的審校工作，給本書提出了很多寶貴的改進意見： * [鄺偉科](https://github.com/kuangwk/) - 騰訊 Web 前端工程師 * [楊海波](https://github.com/hipoyang/) - 百度 Web 高級前端工程師 * [謝軍令](https://github.com/brucexiejunling/) - 天貓 Web 前端工程師 * [戴嘉華](https://github.com/livoras/) - 前微信 Web 前端工程師 ## 聯系作者 * 郵箱：huzidaha@126.com * 知乎：[@胡子大哈](https://www.zhihu.com/people/hu-zi-da-ha) * 專欄：[@前端大哈](https://zhuanlan.zhihu.com/qianduandaha) * 加入《React.js 小書》讀者交流群，一起討論、交流、學習前端技術。 <img width='256px' src='http://react.huziketang.com/assets/img/wechat-user.jpeg' /> ## License 本作品采用 [署名-禁止演繹 4.0 國際許可協議](https://creativecommons.org/licenses/by-nd/4.0/legalcode) 進行許可