猜你喜欢
React与Redux开发实例精解

React与Redux开发实例精解

书籍作者:刘一奇 ISBN:9787121302671
书籍语言:简体中文 连载状态:全集
电子书格式:pdf,txt,epub,mobi,azw3 下载次数:8089
创建日期:2021-02-14 发布日期:2021-02-14
运行环境:PC/Windows/Linux/Mac/IOS/iPhone/iPad/Kindle/Android/安卓/平板
内容简介

  《React与Redux开发实例精解》共分四部分,全面介绍如何使用React 与Redux 进行Web 开发。第一部分是基础篇,介绍React 与Redux 的基础知识;第二部分是进阶篇,通过精彩的官方示例学习React 与Redux;第三部分是拓展篇,主要学习一些优秀的第三方拓展;第四部分是实战篇,将会带领读者一步步搭建大型Web 应用程序。

  《React与Redux开发实例精解》适合熟悉JavaScript 编程,有意使用React 与Redux 搭建Web 应用的程序员学习参考。

编辑推荐

  这本书是为想要用React、Redux、Babel 和Webpack 搭建Web 应用程序的程序员准备的。与其他技术栈相比,这个技术栈(指的是React、Redux、Babel、Webpack 以及社区中众多与此相关的优秀工具)的学习成本并不低,但是其中的智慧与思想却着实令人赞叹:

  √清爽的组件代码结束了满屏HTML 标签与类名的噩梦;

  √声明式地将数据映射为界面减少了烦琐的DOM操作;

  √高阶函数、管道、柯里化等函数式编程思想的运用使得复杂逻辑的处理变得相当简单;

  √自动化构建编译技术降低了源代码与静态资源的管理成本。

  随着时间的推移,技术工具或许很快会更新换代,但是这些前端工程中的zui佳实践思想却不会轻易过时。如果你不仅想学习这些技术的使用方法,更想了解这些技术背后所包含的思想与智慧,那么真诚地建议你阅读本书。


前言

  致读者

  这本书是为想要用React、Redux、Babel 和Webpack 搭建Web 应用程序的程序员准备的。与其他技术栈相比,这个技术栈(指的是React、Redux、Babel、Webpack 以及社区中众多与此相关的优秀工具)的学习成本并不低,但是其中的智慧与思想却着实令人赞叹:清爽的组件代码结束了满屏HTML 标签与类名的噩梦;声明式地将数据映射为界面减少了烦琐的DOM操作;高阶函数、管道、柯里化等函数式编程思想的运用使得复杂逻辑的处理变得相当简单;自动化构建编译技术降低了源代码与静态资源的管理成本。随着时间的推移,技术工具或许很快会更新换代,但是这些前端工程中的最佳实践思想却不会轻易过时。如果你不仅想学习这些技术的使用方法,更想了解这些技术背后所包含的思想与智慧,那么我真诚地建议你阅读本书。

  阅读本书之前的准备

  想要很好地理解本书的内容,你需要具备一定的Node.js 和ES2015、ES2016 基础,至少要了解一些常见的概念,例如NPM、模块系统、常量、函数、装饰器和类。除此之外,你最好还熟悉JavaScript 程序在服务器和浏览器环境下的调试技术。

  学习本书示例代码时,大部分时间都要在命令行中进行操作。因此,你应该能够熟练使用自己操作系统中的命令行工具。

  本书附带的程序是开源的,全部上传到了GitHub。这些示例程序中的开发经验来自开源社区和笔者自己的实践思考。我不认为这是使用React 与Redux 开发Web 应用程序的唯一方式。你可以将其作为参考,如果有更好的想法,强烈建议你将其贡献给社区,与更多的开发者一起交流进步。

  最后要说明的是,本书因篇幅有限等原因,无法对每一项技术的讲解都做到完整而详尽。因此,你还需要根据书中的提示和推荐,去阅读参考相应技术的官方文档。

  本书的内容安排

  本书分为四部分。

  第一部分 基础篇 主要介绍React 与Redux 的基础知识。

  第1 章 简要介绍本书所要讲解的技术,包括React、Redux、Node 与Universal 渲染、Babel 及Webpack。

  第2 章 讲解如何在Node.js 中运行React。

  第3 章 讲解如何在浏览器中运行React。

  第4 章 介绍开发服务器和热替换技术及其实现过程。

  第5 章 介绍React 的创新语法:JSX。

  第6 章 介绍React 的数据载体:state、props 与context。

  第7 章 介绍React 的两个对象:ReactElement 和组件实例。

  第8 章 介绍Redux 的action、reducer 与store。

  第9 章 介绍Redux 的action 创建函数和unk 中间件。

  第二部分 进阶篇 通过精彩的官方示例学习React 与Redux。

  第10 章 讲解如何手动将Redux 连接到React 中。

  第11 章 讲解如何使用react-redux 将Redux 连接到React 中。

  第12 章 介绍Redux 的撤销/重做和Redux 开发者工具的使用。

  第13 章 讲解如何在React 与Redux 的程序中编写测试。

  第14 章 讨论Redux 的全局状态与React 组件的内部状态。

  第15 章 讲解React 与Redux 中常用的几种数组处理方法。

  第16 章 介绍Redux 中的异步处理。

  第17 章 介绍如何自定义Redux 中间件。

  第18 章 讲解如何使用React 与Redux 实现Universal 渲染。

  第三部分 拓展篇 学习一些优秀的第三方拓展。

  第19 章 介绍Webpack 同构工具。

  第20 章 介绍React Router,并通过它实现Universal 路由。

  第21 章 介绍多页面下的异步处理。

  第22 章 介绍了bootstrap-loader、PostCSS、Autoprefixer 和React-Bootstrap。

  第四部分 实战篇 一步步搭建大型Web 应用程序。

  第23 章 介绍一个大型项目的基本结构。

  第24 章 使用ReduxForm 制作各种表单。

  第25 章 实现图表与表格。

  第26 章 实现用户认证。

  第27 章 讲解部署到Heroku 的方法,并实现持续集成。

  第28 章 列出其他资源。

  如何使用示例代码

  本书使用的示例代码可在GitHub 上获取:https://github.com/lewis617/react-redux-book 和https://github.com/lewis617/react-redux-heroku。

  除了第1 章和第28 章外,本书每个章节都有一个示例程序。前三部分使用了短而精的示例代码,独立地演示技术的功能。从第四部分开始,每一章的例子都会建立在前一章例子的基础上,最后完成一个大型项目的搭建。

  另外,为了方便部署到Heroku,并实现持续集成,第27 章的例子被独立到了另一个GitHub仓库中,也就是上述的第二个GitHub 仓库。

  致谢

  在写这本书的过程中,家人、朋友、领导、同事都给我了很多帮助。没有他们,我是不可能完成本书的,在此表示由衷的感谢。

  首先我要特别感谢王祖超、梁锦津、宋兵、陈仕杰、屈光宇、吕明岩,他们在本书撰写的不同阶段审阅了书稿,并对书稿涵盖的内容和组织方式给予了建设性建议。

  还要感谢电子工业出版社的许艳编辑,她对本书进行了出色平稳的编辑,并给予我无尽的支持、建议和协助。

  最后,感谢在GitHub 社区中为本书提供帮助的人:

  Dan Abramov(Redux 的作者)

  Nikolay Nikolaev(Webpack 同构工具的作者)

  Erik Rasmussen(ReduxForm 的作者)

  Eric Ferraiuolo(serialize-javascript 的贡献者)

  Mihail Diordiev(redux-devtools-extension 的作者)

  他们积极热心地回复我提交的Issue,为本书提供了重要的技术支持。

目录

致读者

第一部分 基础篇

第1章 技术简介

React

Redux

Node与Universal渲染

Babel

Webpack

总结

第2章 在Node.js中运行 React

例子

编写React组件

在Node.js中渲染组件

使用Babel编译运行Node.js程序

Require Hook 简介

使用Require Hook的步骤

总结

第3章 在浏览器中运行React

例子

组件复用

在浏览器中渲染React组件

使用Webpack打包编译

在浏览器中运行

总结

第4章 开发服务器和热替换

例子

安装

配置Babel

使用react-hmre预设

react-hmre的功能

配置Webpack

配置Express服务器

总结

第5章 React的创新语法:JSX

例子

JSX简介

JSX常用语法

类似HTML

JavaScript表达式

样式

注释

数组

HTML标签 vs. React组件

总结

第6章 React的数据载体:state、props与context

例子

State

Props

使用props

验证props

组合使用state与props

Context

使用props传递数据

使用context传递数据

Props与context的适用场景

在React开发者工具中查看

总结

第7章 React的两个对象:ReactElement与组件实例

例子

ReactElement

JSX中的闭合标签是ReactElement

ReactElement是什么

ReactElement的两种类型

React组件的渲染流程

组件实例

组件实例简介

组件、ReactElement与组件实例的区别

组件实例的生灭:生命周期函数

React组件中的this

总结

第8章 初识Redux

例子

Action

Reducer

定义

纯函数

不能修改参数state

Store

职能

创建

获取与监听

发起action

总结

第9章 Action创建函数与Redux Thunk中间件

例子

Action创建函数

编写

发起

意义

Redux Thunk中间件

功能

安装激活

总结

第二部分 进阶篇

第10章 React与Redux的连接:手动连接

例子

手动连接的步骤

编写React组件

编写Redux

将Redux手动连接到React组件

手动连接的缺点

总结

第11章 React与Redux的连接:使用react-redux连接

例子

连接步骤

多种写法

连接原理

Provider工作原理

connect工作原理

展示组件与容器组件

总结

第12章 实现撤销/重做

例子

撤销/重做

Redux开发者工具

安装

使用

Redux并不“低效”

总结

第13章 测试

例子

测试工具

Mocha

Enzyme

Expect

测试action创建函数

测试React组件

测试容器组件

测试reducer纯函数

运行测试脚本

总结

第14章 Redux的全局状态与React组件的内部状态

例子

全局状态与内部状态的定义

全局状态完全替代了内部状态?

全局状态与内部状态的适用场景

总结

第15章 React与Redux中的数组处理

例子

reduce()

概述

语法

示例

filter()

概述

语法

示例

map()

概述

语法

示例

every()

概述

语法

示例

some()

概述

语法

示例

展开运算符

概述

语法

示例

总结

第16章 Redux的大舞台:异步

例子

JavaScript事件驱动编程

Promise

Redux中的异步

异步action创建函数

异步请求前后的state变化

State tree结构

查看state tree

如何构建state tree

异步与变化

准备工作

追踪异步与变化

总结

第17章 自定义Redux中间件

例子

中间件的功能

中间件的编写

中间件的执行

自定义API中间件

总结

第18章 Universal渲染

例子

公用一套代码

服务端渲染

客户端渲染

总结

第三部分 拓展篇

第19章 Universal渲染神器:Webpack同构工具

例子

Webpack同构工具的功能

服务端调用

客户端调用

真实场景

配置服务器的入口

独立开发服务器

配置Webpack

配置Webpack同构工具

在服务端和客户端使用require()

总结

第20章 多页面的实现:路由

例子

路由也是组件

路由匹配

使用Link和IndexLink导航

服务端路由

总结

第21章 多页面下的异步操作

例子

redux-amrc

功能

配置

使用

Action与state

API

多页面下的异步操作

编写测试API

预载数据

手动加载数据

操作数据

总结

第22章 使用Bootstrap

例子

bootstrap-loader

基本用法

配置

PostCSS与Autoprefixer

简介

用法

React-Bootstrap

总结

第四部分 实战篇

第23章 搭建大型项目

例子

开发服务器

开发环境下的Webpack配置

Webpack同构工具的配置

独立的开发服务器

启动开发服务器

前端服务器

配置前端服务器

使用组件渲染HTML页面

启动前端服务器

API服务器

配置API服务器

启动API服务器

生产环境下的构建编译

编译运行Node.js

生产环境下的Webpack配置

公用代码

工具集

路由与页面

质量保证

测试

Airbnb编码规范

去毛机

EditorConfig

总结

第24章 表单

例子

高阶组件ReduxForm

设置

简单表单

同步验证表单

异步失焦验证表单

提交表单到服务器

总结

第25章 图表与表格

例子

图表组件

表格组件

从服务器获取数据

总结

第26章 用户认证

例子

编写认证API

Express-session中间件

加载当前认证状态

登录与登出

API权限保护

发送cookie

编写用于认证的action创建函数

登录页面和导航栏

前端路由保护

总结

第27章 部署

例子

Heroku平台

安装工具并登录

准备程序

部署程序

其他操作

持续集成

与生产相关的问题

总结

第28章 其他资源

在线文档

参与社区活动

标签
React,Coding,react,redux,前端