本书面向初中级前端开发者,从头到尾、由浅入深地介绍了使用React实现组件化Web应用的完整流程。作者从React元素、React组件等基本的概念讲起,循序渐进地讨论了组件状态和生命周期,为开发完整的React应用打下了基础。与第三方JavaScript框架集成,以及对React组件进行单元测试,都是开发React应用的重要内容,本书也有详细讲解。最后,为进一步提升React应用的灵活性,作者还以实例展示了如何引入Flux架构,让读者的开发技能更上一层楼。
全流程实战 全方位覆盖
前言
如今,Web 已经变得不同。我们构建网页的方式也已经不同。面对不可维护的jQuery代码,我们不得不寻找新的方法来管理复杂的现代用户界面。我们需要一个新的用户界面库,它可以帮助我们使用JavaScript 来创建声明式、模块化、更快速、可伸缩的前端应用程序。
React.js 是Facebook 开发的一个用户界面库,在如何与DOM 交互、如何组织数据流和将用户界面元素看作组件方面,为我们带来了全新的思潮。而且,它只是一个用户界面库,对技术栈的其余部分并没有要求。
React.js 与Flux 结合起来,就为我们提供了一个强大的前端架构。这无论是对经验丰富的开发人员,还是对那些刚刚接触前端的人来说都很有意义。无论开发经验多寡,面临问题难易,团队规模大小……前端的同学们,欢迎迈进一个新时代!
准备好体验React.js 将要带给你的简单、周到、可预测的惊喜吧。
本书内容
第1 章会介绍本书目标,并讲解为了有效构建 React 应用需要哪些现代化工具。本章将带你逐步安装这些工具,还会创建本书示例项目的结构。
第2 章会讲解如何安装React 并介绍虚拟DOM。然后讲解使用原生JavaScript 语法如何创建和渲染React 元素。最后介绍JSX 语法和如何使用JSX 来创建React 元素。
第3 章会介绍React 组件,讲解有状态和无状态两种不同的React 组件,以及如何决定使用哪一种。然后会引导读者掌握如何创建它们。
第4 章会讲解如何使用React 解决问题,并带你实际规划一个React 应用程序。我们将创建一个React 组件,用于封装本书将构建的React 应用程序。还会讲解父组件与子组件的关系。
第5 章探讨在React 组件中如何使用第三方JavaScript 库。介绍React 组件的生命周期,演示如何使用装载方法,并为本书的项目创建新React 组件。
第6 章介绍React 组件的更新方法,其中涵盖了如何在JavaScript 中使用CSS 样式。还讲解了如何验证和设置组件属性的默认值。
第7 章将焦点放在构建更复杂的React 组件上,探讨如何实现不同的React 组件,以及如何将它们放在一起,并完成最终的React 应用程序。
第8 章讲解单元测试的思想和如何使用Jest 来编写并执行单元测试,也会演示如何测试React 组件,并讨论测试套件、规格、期望和匹配器。
第9 章讨论如何改进React 应用程序的架构,介绍Flux 并讲解分派器、存储与动作发生器等角色。
第10 章讲解如何使用Flux 在 React 应用程序中处理解耦问题,并重构我们的React应用程序以减少维护成本。
阅读本书的准备工作
首先,需要最新版的浏览器,比如Google Chrome 和 Mozilla Firefox 最新版的下载地址如下。
? Google Chrome:https://www.google.com/chrome/browser。
? Mozilla Firefox:https://www.mozilla.org/en-US/firefox/new/。
其次,需要安装Git、Node.js 和npm。第1 章会讲解它们的详细安装过程。
最后,需要一个代码编辑器。我推荐Sublime Text(http://www.sublimetext.com)。另外,也可以使用Atom(https://atom.io)、Brackets (http://brackets.io)、Visual Studio Code (https://code.visualstudio.com)或者其他你喜欢的编辑器。
在29页下方脚注中增加“ 文档地址见:https://github.com/babel/babelify ”。
删除第20行开始的removeAllTweetsFromCollection方法
this.props.onCancel CollectionNameChange()
应该是
this.props.onCancelCollectionNameChange()