React前端技术与工程实践

扉页 版权页 前言 目录 第一篇 原汁原味的React 1 React简介 1.1 前端技术发展及趋势 1.2 React简介 1.3 React特点 1.3.1 虚拟DOM 1.3.2 组件化 1.3.3 单向数据流 1.4 React与React Native 1.5 对React的几个认识误区 2 React基础 2.1 React最小环境搭建 2.2 Helloworld示例 2.3 React基本架构 2.3.1 虚拟DOM结构 2.3.2 虚拟DOM元素 2.3.3 组件工厂 2.3.4 React的内部更新机制 2.3.5 虚拟DOM的特殊属性 2.4 JSX语法 2.4.1 JSX等价描述 2.4.2 JSX转译工具Babel 2.4.3 JSX中的表达式 2.4.4 JSX中的注释 2.4.5 JSX展开属性 2.5 React注意事项 2.5.1 ReactDOM.render的目标节点 2.5.2 组件名约定 2.5.3 class属性和for属性替换 2.5.4 行内样式 2.5.5 自定义HTML属性 2.5.6 HTML转义 3 React组件 3.1 组件主要成员 3.1.1 state成员 3.1.2 props成员 3.1.3 render成员函数 3.2 组件的生命周期 3.2.1 实例化阶段 3.2.2 活动阶段 3.2.3 销毁阶段 3.3 组件事件响应 3.3.1 事件代理 3.3.2 事件自动绑定 3.3.3 合成事件 3.4 props属性验证 3.5 组件的其他成员 3.6 关于state的几个设计原则 3.6.1 哪些组件应该有state 3.6.2 哪些数据应该放入state中 3.6.3 哪些数据不应该放入state中 4 React顶级API 4.1 React命名空间 4.2 ReactDOM命名空间 4.3 ReactDOMServer命名空间 4.4 children工具函数 5 React表单 5.1 表单元素 5.2 事件响应 5.2.1 bind复用 5.2.2 name复用 5.3 可控组件与不可控组件 5.3.1 可控组件 5.3.2 不可控组件 6 React复合组件 6.1 组件嵌套 6.2 组件参数传递 6.2.1 动态参数传递 6.2.2 使用Underscore来传递 6.2.3 使用Context 来传递 6.3 组件间的通信 6.3.1 事件回调机制 6.3.2 公开组件功能 6.3.3 mixins 6.3.4 动态子级 6.4 高阶组件 6.4.1 高阶组件概念 6.4.2 高阶组件应用:属性转换器 6.4.3 高阶组件应用:逻辑分离与封装 7 React常用组件示例 7.1 按钮组件 7.2 分页组件 7.3 带分页的表格组件 7.4 树形组件 7.5 模态对话框组件 7.6 综合实例 7.6.1 综合实例一 7.6.2 综合实例二 8 React插件 9 React实用技巧 9.1 绑定React未提供的事件 9.2 通过AJAX加载初始数据 9.3 使用ref属性 9.3.1 ref字符串属性 9.3.2 ref回调函数属性 9.4 使用classNames.js 9.4.1 classNames介绍 9.4.2 classNames用法 9.4.3 在ES 6中使用动态的classNames 9.4.4 多类名去重 9.5 使用Immutable.js 9.5.1 Immutable.js介绍 9.5.2 Immutable基本用法 9.5.3 Immutable对象比较 9.5.4 Immutable List用法 9.5.5 Immutable Map用法 9.6 与jQuery集成 9.6.1 React与jQuery的区别 9.6.2 在React中使用jQuery 9.6.3 在jQuery中使用React 第二篇 React开发相关工具链 10 JS前端开发工具链 10.1 Node.js 10.1.1 Node.js安装 10.1.2 Node.js使用 10.2 Node.js模块和包 10.2.1 模块 10.2.2 包 10.3 npm模块管理器 10.3.1 npm安装 10.3.2 npm初始化 10.3.3 npm安装模块 10.3.4 使用cnpm 10.3.5 npm常用命令 10.3.6 自定义脚本 10.4 ES 6规范简介 10.4.1 ES 6语法简介 10.4.2 ES 6模块管理 10.4.3 基于ES 6语法的React组件写法 10.5 ESLint工具 10.5.1 ESLint介绍 10.5.2 安装和使用 10.5.3 配置 10.5.4 React检查 10.6 Babel工具 10.6.1 配置.babelrc文件 10.6.2 命令行转译工具:babel-cli 10.6.3 命令行运行工具:babel-node 10.6.4 实时转译模块:babel-register 10.6.5 浏览器实时转译模块:browser.js 10.6.6 转译API模块:babel-core 10.6.7 扩展转译模块:babel-polyfill 10.6.8 ESLint前置转译模块:babel-eslint 10.6.9 Mocha前置转译模块:babel-core/register 10.7 webpack打包工具使用与技巧 10.7.1 前端模块化与webpack介绍 10.7.2 webpack的打包React实例 10.7.3 webpack模块加载器 10.7.4 webpack开发服务器 10.7.5 React热加载器 10.7.6 打包成多个资源文件 10.8 基于完整工具链的项目目录结构 第三篇 React进阶 11 Flux & Redux 11.1 Flux 11.1.1 Flux简介 11.1.2 基本架构 11.1.3 动作和动作发生器 11.1.4 分发器 11.1.5 存储 11.1.6 视图与控制视图 11.2 Redux 11.2.1 Redux基本架构 11.2.2 Action 11.2.3 Reducer 11.2.4 Store 11.2.5 bindActionCreators 11.3 React-Redux 11.3.1 React-Redux的使用方法 11.3.2 Connect 11.4 Redux工程目录结构 12 路由 12.1 前端路由 12.2 路由的基本原理 12.3 安装与引用 12.4 路由配置 12.4.1 路由器和路由 12.4.2 嵌套路由 12.4.3 默认路由 12.4.4 path 属性 12.4.5 NotFoundRoute组件 12.4.6 Redirect组件 12.4.7 IndexRedirect 组件 12.4.8 history属性 12.4.9 路由回调 12.5 路由切换 12.5.1 Link组件 12.5.2 IndexLink 12.5.3 动态路由切换 13 React单元测试 13.1 测试脚本示例 13.2 React测试代码示例 13.3 React测试相关工具 13.3.1 Mocha 13.3.2 chai 13.3.3 jsdom 13.3.4 react-addons-test-utils 13.4 创建测试环境 13.5 React组件测试 13.5.1 浅渲染 13.5.2 全DOM渲染 13.5.3 使用findDOMNode方法查找DOM 第四篇 React相关资源 14 React相关资源介绍 14.1 React Starter Kit 14.2 React bootstrap 14.3 Material-UI 14.4 Ant Design 14.5 React-d 3与echarts-for-react 14.6 React Storybook 14.7 awesome-react