HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 书籍推荐 查看内容

React 精髓(全流程实战 全方位覆盖)

2016-7-26 18:03| 发布者: admin| 查看: 3785| 评论: 0

摘要: 《React 精髓》面向初中级前端开发者,从头到尾、由浅入深地介绍了使用React 实现组件化Web 应用的完整流程。作者从React 元素、React 组件等基本的概念讲起,循序渐进地讨论了组件状态和生命周期,为开发完整的Reac ...

  【英】Artemij Fedosejev (阿尔乔姆 . 费多耶夫) 著

  奇舞团 译

  ISBN 978-7-121-28646-9

  2016年5月出版

  定价:65.00元

  196页

  16开


  编辑推荐

  真正面向实战的React图书

  揭秘Flux架构|彻底释放React潜能

  本书由国内前端劲旅奇舞团领衔翻译

  全面剖析组件化Web应用开发完整流程


  内容提要

  《React 精髓》面向初中级前端开发者,从头到尾、由浅入深地介绍了使用React 实现组件化Web 应用的完整流程。作者从React 元素、React 组件等基本的概念讲起,循序渐进地讨论了组件状态和生命周期,为开发完整的React 应用打下了基础。与第三方JavaScript 框架集成,以及对React 组件进行单元测试,都是开发React 应用的重要内容,《React 精髓》也有详细讲解。最后,为进一步提升React 应用的灵活性,作者还以实例展示了如何引入Flux 架构,让读者的开发技能更上一层楼。


  目录

  1 给项目预先安装一些有用的工具 1

  了解我们的项目. 2

  安装Node.js 和npm 3

  安装Git 4

  从Twitter Streaming API 中获取数据 5

  使用Snapkite引擎来过滤数据 6

  创建项目结构 9

  创建package.json 10

  复用Node.js 模块 11

  使用Gulp.js 来构建应用 12

  创建一个网页 15

  小结 16

  2 创建你的第一个React 元素 17

  理解虚拟DOM 18

  安装React 19

  使用JavaScript 创建React 元素 20

  type 参数 22

  props 参数 22

  children 参数 23

  渲染React 元素 27

  使用JSX 来创建React 元素 28

  小结 30

  3 创建你的第一个React 组件 31

  无状态与有状态 31

  创建第一个无状态React 组件 32

  创建第一个有状态React 组件 37

  小结 44

  4 让React 组件变得可响应 45

  使用React 解决问题 45

  规划React 应用程序 47

  创建一个React 组件容器 49

  小结 57

  5 结合其他库来使用React 组件 59

  在React 组件中使用其他库 59

  理解React 组件的生命周期方法 64

  挂载方法 66

  卸载方法 71

  小结 72

  6 更新React 组件 73

  理解组件生命周期的更新方法 73

  componentWillReceiveProps()方法 74

  shouldComponentUpdate()方法 77

  componentWillUpdate()方法 77

  componentDidUpdate()方法 78

  设置React 组件的默认属性 79

  验证React 组件的属性 83

  创建Collection 组件 85

  小结 91

  7 构建复杂的React 组件 93

  创建TweetList组件 93

  创建CollectionControls组件 98

  创建CollectionRenameForm组件 105

  创建Button 组件 111

  创建CollectionExportForm组件 112

  小结 114

  8 使用Jest 来测试React 应用程序 115

  为什么要写单元测试 115

  创建测试套件、规范和期望 115

  安装并运行Jest 121

  创建更多的测试规范和期望 122

  测试React 组件 130

  小结 137

  9 使用Flux 完善React 架构 139

  分析当前应用的架构 139

  理解Flux 142

  创建分发器 143

  创建动作生成器 144

  创建存储 145

  小结 150

  10 使用Flux 提升应用的可维护性 151

  借助Flux 实现解耦 152

  重构Stream 组件 155

  创建CollectionStore 161

  创建CollectionActionCreators 167

  重构Application 组件 169

  重构Collection 组件 171

  重构CollectionControls组件 175

  重构CollectionRenameForm组件 178

  重构TweetList组件 180

  重构StreamTweet组件 181

  编译 181


  推荐序

  你是否厌倦了写jQuery 的“回调汤”?是否在需要写新模板或者配置Angular 应用时感到抓狂?是否很想知道为什么自己的应用结构如此复杂?如果是这样,那么React.js 正是能满足你需要的框架。React.js 的声明式语法将帮你为大型应用构建数据随时间变化的用户界面。

  作为一个专业的iOS 和JavaScript 前端顾问,我总是建议客户使用当下最先进的技术。随着Facebook 的不断推陈出新,React.js 已被证明是一个可靠的选择,它能帮我们创建可维护和高性能的用户界面,进而帮助我们的客户更快地交付产品,实现更迅速的发展。我很高兴知道这本书即将出版,更让我兴奋的是自己居然提前看到了它。

  ArtemijFedosejev是一位资深的Web 开发者,在伦敦一家创业公司做技术负责人,他在这本书里展示了为什么声明式的编程风格和单向反应式数据流动常常是解决现实编程问题的最佳途径。无论开发消费者应用还是学术性网站,无论规模大小,React.js 都可以帮你搭建其前端UI。而且你永远不会再迷失在代码中了。这本书是Artemij基于自己的实际经验编写的,读完本书你就可以创建自己的用户界面,而且不会增加应用的复杂性。

  这本书涵盖了从零开始学习React.js 所需的一切。它会从最基础的安装环境逐步引导你,直到复杂的Jest 测试框架。最好的学习方法是做中学,所以本书将带你开发一个实际的React.js 项目,创建一个能够对Twitter 上的最新照片实现接收和分类的应用程序。

  软件行业不断发展变化。作为开发者,我们总能通过实践把触角伸向新领域,拓宽视野,刷新我们对如何构建优秀软件的认知。从发展历史来看,软件开发和架构已经从结构化发展到命令式。面向对象编程由此成为软件开发的事实标准。Java、Ruby、Objective-C等语言都原生支持OOP。

  然而,这时候出现了一个支持函数式编程的异类,走出了一条独特的进化之路,它就是JavaScript。React.js 就是“把UI 当作状态的函数”这种新思维的产物。Facebook 为了让开发者熟悉这种反应式的思维已经付出了很多努力。与使用模板系统的Ember.js、Angular.js 等流行框架不同,React.js 是一个使用声明式编程风格来描述UI 状态的UI 库。可以把React.js 看成是传统MVC 模式中的V,但它并不限于此。Facebook 又引入了一个互补性的Flux 应用架构,它使用React 的可组合视图组件。

  解决编程问题的最新方法又回到了声明式编程的起点。新范式的兴起,比如ReactiveExtensions(Rx)、Futures 和Promise 让我们开始重新思考函数式编程,以及使用声明式方法代替OOP 的命令式风格。React.js 体现了这样一些范式,而这本书正是你掌握它的第一步,相信你会喜欢它。


  Alex Bush

  SmartCloud公司创始人兼软件产品工程师

  作者简介

  ArtemijFedosejev是一位技术大牛,现居住在英国伦敦。他从2000 年开始自学Web开发,并成为了一位Web 开发者。Artemij在爱尔兰的科克大学获得了计算机科学学士学位。他还参加了Ignite 的商业研究生创新计划,在那里开发和创建的网站获得了最具创新项目奖。

  毕业后,Artemij移居伦敦,帮助当地创业公司开发产品。Artemij擅长 JavaScript、Node.js、HTML5、CSS3 等现代Web 技术。在创业公司获得一些经验以后,Artemij获得了一个加入伦敦皇家学院的机会,从事研究和开发工作,在公共卫士领域规划和主导了一些Web 应用程序。他在创WGSA.net 和Microreact.org 的前端架构中使用了React.js 和Flux,从而起到了关键的作用。Artemij还开发了大量的开源项目,如Snapkite引擎、Snapkite流客户端等项目,可以在他的 GitHub 上(https://github.com/fedosejev)找到相关内容。他也是http://react.tips website 网站的作者。

  我深深地感谢我的家人,在我努力的过程中他们一直支持我。有了他们的爱和奉献,我才能一直把重点放在学习新鲜事物上,然后传授给别人。特别感谢AlexBush不断扩展我对软件开发方式的认识。同时,这本书的编写少不了DavidAanensen博士和MirkoMenegazzo的支持。最后,我要感谢我的编辑和给我这个机会的Packt出版社的好心人,让我可以给世界各地的开发者分享我的知识和经验。


  媒体推荐

  你是否厌倦了写jQuery 的“回调汤”?是否在需要写新模板或者配置Angular 应用时感到抓狂?是否很想知道为什么自己的应用结构如此复杂?如果是这样,那么React.js 正是能满足你需要的框架。React.js 的声明式语法将帮你为大型应用构建数据随时间变化的用户界面。

  作为一个专业的iOS 和JavaScript 前端顾问,我总是建议客户使用当下最先进的技术。随着Facebook 的不断推陈出新,React.js 已被证明是一个可靠的选择,它能帮我们创建可维护和高性能的用户界面,进而帮助我们的客户更快地交付产品,实现更迅速的发展。我很高兴知道这本书即将出版,更让我兴奋的是自己居然提前看到了它。

  Artemij Fedosejev 是一位资深的Web 开发者,在伦敦一家创业公司做技术负责人,他在这本书里展示了为什么声明式的编程风格和单向反应式数据流动常常是解决现实编程问题的最佳途径。无论开发消费者应用还是学术性网站,无论规模大小,React.js 都可以帮你搭建其前端UI。而且你永远不会再迷失在代码中了。这本书是Artemij 基于自己的实际经验编写的,读完本书你就可以创建自己的用户界面,而且不会增加应用的复杂性。

  这本书涵盖了从零开始学习React.js 所需的一切。它会从最基础的安装环境逐步引导你,直到复杂的Jest 测试框架。最好的学习方法是做中学,所以本书将带你开发一个实际的React.js 项目,创建一个能够对Twitter 上的最新照片实现接收和分类的应用程序。

  软件行业不断发展变化。作为开发者,我们总能通过实践把触角伸向新领域,拓宽视野,刷新我们对如何构建优秀软件的认知。从发展历史来看,软件开发和架构已经从结构化发展到命令式。面向对象编程由此成为软件开发的事实标准。Java、Ruby、Objective-C等语言都原生支持OOP。

  然而,这时候出现了一个支持函数式编程的异类,走出了一条独特的进化之路,它就是JavaScript。React.js 就是“把UI 当作状态的函数”这种新思维的产物。Facebook 为了让开发者熟悉这种反应式的思维已经付出了很多努力。与使用模板系统的Ember.js、Angular.js 等流行框架不同,React.js 是一个使用声明式编程风格来描述UI 状态的UI 库。可以把React.js 看成是传统MVC 模式中的V,但它并不限于此。Facebook 又引入了一个互补性的Flux 应用架构,它使用React 的可组合视图组件。

  解决编程问题的最新方法又回到了声明式编程的起点。新范式的兴起,比如ReactiveExtensions(Rx)、Futures 和Promise 让我们开始重新思考函数式编程,以及使用声明式方法代替OOP 的命令式风格。React.js 体现了这样一些范式,而这本书正是你掌握它的第一步,相信你会喜欢它。

  ——Alex Bush,SmartCloud 公司创始人兼软件产品工程师


  前言

  如今,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)或者其他你喜欢的编辑器。


  读者对象

  本书适合那些想要构建可扩展、可维护Web 用户界面的前端工程师。你只需要具备一些JavaScript、HTML 和CSS 的核心知识,就可以感受到React.js 为Web 开发带来的革命性的好处。如果你具备jQuery 或者Angular.js 的开发经验,那么你就更容易理解React.js相较于其他库的优势,以及如何利用这些优势。

  版式约定

  为区别不同的信息,本书排版时会采用不同的版式和文本样式。下面是一些例子。

  正文中的代码、数据库名、文件夹名、文件名、文件扩展名、路径、伪URL、用户输入及Twitter 相关的指令这样标出:“React 库的入口点是React 对象”。

  代码段如下所示:

  var React = require('react');

  varReactDOM = require('react-dom');

  varreactElement = React.createElement(

  'h1',

  { className: 'header' }

  );

  ReactDOM.render(

  reactElement,

  document.getElementById('react-application')

  );

  在需要提醒你注意代码中的特定部分时,我们会将特定部分加粗,如下所示:

  <!doctype html>

  <html lang="en">

  <head>

  <title>Snapterest</title>

  </head>

  <body>

  <div id="react-application">

  I am about to learn the essentials of React.js.

  </div>

  <scriptsrc="./snapterest.js"></script>

  </body>

  </html>

  一些命令行的输入或输出如下所示:

  cd ~

  git clone https://github.com/snapkite/snapkite-engine.git

  新术语和重要词汇会加粗显示。在屏幕上(比如在菜单或者对话框中)显示的单词,会以这样的形式在本书中出现:“你会看到这样的文本:I am about to learn the essentials of

  React.js”。

  代表这是一条警告或重要提示。

  代表这是一条建议或技巧。

  下载示例代码

  你可以从http://www.broadview.com.cn 下载所有已购买的博文视点书籍的示例代码文件。

  勘误表

  虽然我们已经尽力谨慎地确保内容的准确性,但错误仍然存在。如果你发现了书中的错误,包括正文和代码中的错误,请告诉我们,我们会非常感激。这样,你不仅帮助了其他读者,也帮助我们改进后续的出版。如发现任何勘误,可以在博文视点网站相应图书的页面提交勘误信息。一旦你找到的错误被证实,你提交的信息就会被接受,我们的网站也会发布这些勘误信息。你可以随时浏览图书页面,查看已发布的勘误信息。


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-2-23 10:38

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部