摘要:因为工作中一直在使用,也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来,做成一本开源免费专业简单的入门级别的小书,提供给社区。本书的后续可能会做成视频版本,敬请期待。本作品采用署名禁止演绎国际许可协议进行许可
React.js 小书
本文作者:胡子大哈
本文原文:React.js 小书
转载请注明出处,保留原文链接以及作者信息
在线阅读:http://huziketang.com/books/react/
简介这是一本关于 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 简介
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 总结
...
特别鸣谢特别感谢以下朋友对本书所做的审校工作,给本书提出了很多宝贵的改进意见:
邝伟科 - 腾讯 Web 前端工程师
杨海波 - 百度 Web 高级前端工程师
谢军令 - 天猫 Web 前端工程师
戴嘉华 - 前微信 Web 前端工程师
联系作者加入《React.js 小书》读者交流群:huzidaha-me,一起讨论、交流、学习前端技术。
License本作品采用 署名-禁止演绎 4.0 国际许可协议 进行许可
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/86974.html
摘要:实现不定期更新技巧前端掘金技巧,偶尔更新。统一播放效果实现打字效果动画前端掘金前端开源项目周报前端掘金由出品的前端开源项目周报第四期来啦。 Web 推送技术 - 掘金腾讯云技术社区-掘金主页持续为大家呈现云计算技术文章,欢迎大家关注! 作者:villainthr 摘自 前端小吉米 伴随着今年 Google I/O 大会的召开,一个很火的概念--Progressive Web Apps ...
摘要:毫无疑问,设计模式于己于他人于系统都是多赢的设计模式使代码编写真正工程化设计模小书前端掘金这是一本关于的小书。 JavaScript 常见设计模式解析 - 掘金设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问,设计模式于己于他人于系统都是多赢的;设计...
摘要:工具地址在安装之前要确认你的机器上安装了环境包括。安装好环境以后,只需要按照官网的指引安装即可。所以可以把的源改成国内的的源,这样会加速下载过程。接下来我们会探讨的组件的基本写法小书使用描述信息。 React.js 小书 Lesson5 - React.js 基本环境安装 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson5 ...
摘要:一个组件的显示形态和行为有可能是由某些数据决定的。一个简单的点赞功能我们会从一个简单的点赞功能讲起。我们需要结构,准确地来说我们需要这个点赞功能的字符串表示的结构。下一节小书前端组件化二优化操作中我们继续优化这个例子,让它更加通用。 React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起 本文作者:胡子大哈本文原文:http://huziketang....
阅读 1476·2021-11-18 10:02
阅读 1622·2021-09-04 16:40
阅读 3147·2021-09-01 10:48
阅读 850·2019-08-30 15:55
阅读 1830·2019-08-30 15:55
阅读 1340·2019-08-30 13:05
阅读 2996·2019-08-30 12:52
阅读 1597·2019-08-30 11:24