标签分类
当前位置:首页 > 程序设计电子书 > React电子书网盘下载
快速上手React编程 快速上手React编程
萧曵 丶

萧曵 丶 提供上传

资源
38
粉丝
16
喜欢
5
评论
14

    快速上手React编程 PDF 影印中文版

    React电子书
    • 发布时间:

    给大家带来的一篇关于React相关的电子书资源,介绍了关于React、React编程方面的内容,本书是由清华大学出版社出版,格式为PDF,资源大小249.2 MB,Azat编写,目前豆瓣、亚马逊、当当、京东等电子书综合评分为:9.9,更多相关的学习资源可以参阅 程序设计电子书Web前端视频、等栏目。

  • 快速上手React编程 PDF 下载
  • 下载地址:https://pan.baidu.com/s/1QopyqEYgMT4HlTm8vLNgog
  • 分享码:k8d3
  • 快速上手React编程 PDF

    快速上手React编程》面向希望快速上手React.js进行Web开发的读者,借助精心挑选和详细解释的实例,帮助读者使用现有的JavaScript和Web开发技能学习React开发。在学习Web组件、表单和数据的过程中,还将探索许多不同的项目。 主要特点: 掌握React基础 使用数据和路由构建完整的Web应用 测试组件 优化React应用

    目录

    • 第1章  初积React  3
    • 1.1  什么是React  4
    • 1.2 React解决的问题  5
    • 1.3  使用React的好处  6
    • 1.3.1  简单性  6
    • 1.3.2  速度和可测试性  11
    • 1.3.3  生态和社区  12
    • 1.4 React的缺点  13
    • 1.5 React如何与Web应用集成  13
    • 1.5.1  React类库和渲染目标  14
    • 1.5.2  单页面应用和React  15
    • 1.5.3  React技术栈  17
    • 1.6  第一个React项目:
    • Hello World  18
    • 1.7  测验  21
    • 1.8  小结  21
    • 1.9  测验答案  22
    • 第2章 React起步  23
    • 2.1  内嵌元素  23
    • 2.2  创建组件类  26
    • 2.3  属性  29
    • 2.4  测验  34
    • 2.5  小结  34
    • 2.6  测验答案  34
    • 第3章 JSX  35
    • 3.1 JSX是什么?它有什么优点  36
    • 3.2  理解JSX  38
    • 3.2.1  使用JSX创建元素  39
    • 3.2.2  在组件中使用JSX  40
    • 3.2.3  在JSX中输出变量  41
    • 3.2.4  在JSX中使用属性  42
    • 3.2.5  创建React组件的方法  46
    • 3.2.6  JSX中的if/else  47
    • 3.2.7  JSX中的注释  51
    • 3.3  使用Babel设置JSX转译器  51
    • 3.4 React和JSX陷阱  55
    • 3.4.1  特殊字符  56
    • 3.4.2  data-属性  56
    • 3.4.3  style属性  57
    • 3.4.4  class和for  58
    • 3.4.5  布尔类型的属性值  58
    • 3.5  测验  59
    • 3.6  小结  59
    • 3.7  测验答案  59
    • 第4章 与状态交互  61
    • 4.1  什么是React组件的状态  62
    • 4.2  使用状态  63
    • 4.2.1  访问状态  63
    • 4.2.2  设置初始状态  65
    • 4.2.3  更新状态  67
    • 4.3  状态和属性  70
    • 4.4  无状态组件  71
    • 4.5  有状态组件和无状态组件  73
    • 4.6  测验  77
    • 4.7  小结  77
    • 4.8  测验答案  78
    • 第5章 React组件生命周期  79
    • 5.1 React组件生命周期事件的
    • 全景视图  80
    • 5.2  事件的分类  80
    • 5.3  实现生命周期事件  82
    • 5.4  执行所有事件  84
    • 5.5  挂载事件  86
    • 5.5.1  componentWillMount( )  87
    • 5.5.2  componentDidMount( )  87
    • 5.6  更新事件  90
    • 5.6.1  componentWillReceiveProps
    • (newProps)  90
    • 5.6.2  shouldComponentUpdate( )  91
    • 5.6.3  componentWillUpdate( )  91
    • 5.6.4  componentDidUpdate()  92
    • 5.7  卸载事件  92
    • 5.8  一个简单示例  92
    • 5.9  测验  95
    • 5.10 小结  95
    • 5.11 测验答案  96
    • 第6章 React事件处理  97
    • 6.1  在React中处理DOM事件  97
    • 6.1.1  捕获和冒泡阶段  100
    • 6.1.2  React事件的内幕  102
    • 6.1.3  使用ReactSyntheticEvent
    • 事件对象  105
    • 6.1.4  使用事件和状态  108
    • 6.1.5  传递事件处理程序和
    • 属性  109
    • 6.1.6  组件通信  112
    • 6.2  响应React不支持的DOM
    • 事件 113
    • 6.3 React和其他库的集成:
    • jQuery UI事件 116
    • 6.3.1  集成按钮  116
    • 6.3.2  集成标签  118
    • 6.4  测验 119
    • 6.5  小结 119
    • 6.6  测验答案 120
    • 第7章 在React中使用表单  121
    • 7.1  在React中使用表单的最佳
    • 实践 121
    • 7.1.1  在React中定义表单及
    • 响应事件  123
    • 7.1.2  定义表单元素  125
    • 7.1.3  捕获表单变更  130
    • 7.1.4  账户字段示例  132
    • 7.2  使用表单的其他方式 134
    • 7.2.1  可捕获变更的非受控元素  135
    • 7.2.2  不捕获变更的非受控元素  136
    • 7.2.3  使用引用获取值  137
    • 7.2.4  默认值  139
    • 7.3  测验 140
    • 7.4  小结 141
    • 7.5  测验答案 141
    • 第8章 扩展React组件  143
    • 8.1  组件中的默认属性 144
    • 8.2  React属性类型和验证  145
    • 8.3  渲染子组件 152
    • 8.4  创建React高阶组件以实现
    • 代码复用 154
    • 8.4.1  使用displayName:用以区分
    • 父组件与子组件  156
    • 8.4.2  使用扩展运算符:传递所有
    • 属性  157
    • 8.4.3  使用高阶组件  158
    • 8.5  最佳实践:展示组件与容器
    • 组件 160
    • 8.6  测验 161
    • 8.7  小结 161
    • 8.8  测验答案 162
    • 第9章 项目:菜单组件  163
    • 9.1  项目结构和脚手架 164
    • 9.2 不使用JSX构建菜单 165
    • 9.2.1  Menu组件  165
    • 9.2.2  Link组件  168
    • 9.2.3  运行菜单组件  170
    • 9.3  在JSX中构建菜单 171
    • 9.3.1  重构Menu组件  172
    • 9.3.2  重构Link组件  174
    • 9.3.3  运行JSX项目  175
    • 9.4  测验 175
    • 9.5  小结 176
    • 第10章 项目:Tooltip组件  177
    • 10.1 项目结构和脚手架  178
    • 10.2 Tooltip组件  179
    • 10.2.1 toggle( )函数  180
    • 10.2.2 render( )函数  181
    • 10.3 运行Tooltip组件  183
    • 10.4 测验  184
    • 10.5 小结  184
    • 第11章 项目:Timer组件  185
    • 11.1 项目结构和脚手架  186
    • 11.2 应用架构  187
    • 11.3 TimerWrapper组件  189
    • 11.4 Timer组件  193
    • 11.5 Button组件  194
    • 11.6 运行Timer组件  196
    • 11.7 测验  196
    • 11.8 小结  197
    • 第Ⅱ部分 React架构
    • 第12章 Webpack构建工具  201
    • 12.1 Webpack的作用  201
    • 12.2 添加Webpack到项目中  203
    • 12.2.1 安装Webpack及其
    • 依赖  204
    • 12.2.2 配置Webpack  205
    • 12.3 模块化代码  207
    • 12.4 运行Webpack并测试构建  208
    • 12.5 热模块替换  210
    • 12.5.1 配置HMR  211
    • 12.5.2 热模块替换实践  214
    • 12.6 测验  216
    • 12.7 小结  216
    • 12.8 测验答案  216
    • 第13章 React路由  217
    • 13.1 从零开始实现路由  218
    • 13.1.1 建立项目  219
    • 13.1.2 在app.jsx中创建路由
    • 映射  220
    • 13.1.3 在router.jsx中创建
    • Router组件  221
    • 13.2 React Router  222
    • 13.2.1 React Router的JSX
    • 样式  225
    • 13.2.2 哈希记录  227
    • 13.2.3 浏览器记录  227
    • 13.2.4 使用Webpack安装
    • React Router开发环境  228
    • 13.2.5 创建布局组件  230
    • 13.3 React Router特性  233
    • 13.3.1 使用withRouter高阶组件
    • 访问路由器  234
    • 13.3.2 以编程方式导航  235
    • 13.3.3 URL参数和其他路由
    • 数据  235
    • 13.3.4 在React Router中传递
    • 属性  236
    • 13.4 使用Backbone路由  237
    • 13.5 测验  240
    • 13.6  小结  241
    • 13.7 测验答案  241
    • 第14章 使用Redux处理数据  243
    • 14.1 React支持单向数据流  244
    • 14.2 了解Flux数据体系结构  246
    • 14.3 使用Redux数据类库  247
    • 14.3.1 用Redux创建依照Netflix
    • 的应用  249
    • 14.3.2 依赖和配置  250
    • 14.3.3 启用Redux  253
    • 14.3.4 路由  253
    • 14.3.5 合并reducer  254
    • 14.3.6 电影的reducer  255
    • 14.3.7 操作  258
    • 14.3.8 操作创建器  259
    • 14.3.9 将组件连接到数据
    • 存储  260
    • 14.3.10 分发操作  262
    • 14.3.11 将操作创建器传递到
    • 组件属性中  263
    • 14.3.12 运行Netflix的克隆版  267
    • 14.3.13 Redux总结  268
    • 14.4 测验  268
    • 14.5 小结  269
    • 14.6 测验答案  269
    • 第15章 使用GraphQL处理数据  271
    • 15.1 GraphQL  272
    • 15.2 给Netflix克隆版应用添加
    • 服务器  273
    • 15.2.1 在服务器端安装
    • GraphQL  275
    • 15.2.2 数据结构  278
    • 15.2.3 GraphQL模式  279
    • 15.2.4 查询API并将响应保存
    • 到数据存储  281
    • 15.2.5 显示电影列表  285
    • 15.2.6 GraphQL总结  287
    • 15.3 测验  287
    • 15.4 小结  288
    • 15.5 测验答案  288
    • 第16章 使用Jest进行单元测试  289
    • 16.1 测试的类型  290
    • 16.2 为什么使用Jest(对比
    • Mocha)  290
    • 16.3 使用Jest进行单元测试  291
    • 16.3.1 在Jest中编写单元
    • 测试  293
    • 16.3.2 Jest断言  294
    • 16.4 使用Jest和TestUtils进行
    • React UI测试  296
    • 16.4.1 使用TestUtils查找
    • 元素  298
    • 16.4.2 UI测试密码部件  299
    • 16.4.3 浅渲染  303
    • 16.5 TestUtils总结  305
    • 16.6 测验  305
    • 16.7 小结  305
    • 16.8 测验答案  306
    • 第17章 在Node中使用React和
    • 同构JavaScript  307
    • 17.1 为什么在服务器端使用React?
    • 什么是同构JavaScript? 308
    • 17.1.1 正确的页面索引  308
    • 17.1.2 更快的加载速度、更好的
    • 性能  309
    • 17.1.3 更好的代码可维护性  310
    • 17.1.4 在React和Node中使用
    • 同构JavaScript  310
    • 17.2 在Node上使用React  312
    • 17.3 React和Express:在服务器端
    • 渲染组件  314
    • 17.3.1 在服务器端渲染简单的
    • 文本  315
    • 17.3.2 渲染HTML页面  316
    • 17.4 使用Express和React的同构
    • JavaScript  322
    • 17.4.1 项目目录结构和配置  324
    • 17.4.2 启动服务器  325
    • 17.4.3 使用Handlebars的服务器
    • 端布局模板  329
    • 17.4.4 在服务器上编写React
    • 组件  332
    • 17.4.5 客户端React代码  333
    • 17.4.6 配置Webpack  334
    • 17.4.7 运行应用  336
    • 17.5 测验  340
    • 17.6 小结  340
    • 17.7 测验答案  340
    • 第18章 使用ReactRouter创建一个
    • 网上书店  341
    • 18.1 项目结构和Webpack配置  343
    • 18.2 HTML主页  346
    • 18.3 创建组件  347
    • 18.3.1 主文件:app.jsx  347
    • 18.3.2 Cart组件  353
    • 18.3.3 Checkout组件  355
    • 18.3.4 Modal组件  356
    • 18.3.5 Product组件  357
    • 18.4 启动项目  359
    • 18.5 测验  359
    • 18.6 小结  359
    • 第19章 使用Jest测试密码  361
    • 19.1 项目结构和Webpack配置  362
    • 19.2 HTML主页  365
    • 19.3 实现强密码模块  366
    • 19.3.1 测试  366
    • 19.3.2 代码  367
    • 19.4 实现Password组件  369
    • 19.4.1 测试  369
    • 19.4.2 代码  370
    • 19.5 实践  375
    • 19.6 测验  376
    • 19.7 小结  377
    • 第20章 使用Jest、Express和
    • MongoDB实现自动完成  379
    • 20.1 项目结构和Webpack配置  381
    • 20.2 实现Web服务器  385
    • 20.2.1 定义RESTful API  386
    • 20.2.2 在服务器端渲染React  387
    • 20.3 添加浏览器脚本  387
    • 20.4 创建服务器端模板  388
    • 20.5 实现Autocomplete组件  389
    • 20.5.1 Autocomplete组件的
    • 测试  389
    • 20.5.2 Autocomplete组件的
    • 代码  390
    • 20.6 整合  393
    • 20.7 测验  395
    • 20.8 小结  396
    • 附录A 安装本书相关应用  397
    • 附录B React速查表  405
    • 附录C Express速查表  413
    • 附录D MongoDB和Mongoose
    • 速查表  419
    • 附录E ES6简介 

    上一篇:零基础学大数据算法  下一篇:可伸缩架构:面向增长应用的高可用

    展开 +

    收起 -

    码小辫二维码
     ←点击下载即可登录

    React相关电子书
    学习笔记
    网友NO.226782

    React Navigation 使用中遇到的问题小结

    在React Native的开发中,使用到react navigation框架时遇到了不少问题。主要是安卓和iOS中相对不协调的地方,特此记录 一、Navigation Bar 使用navigationbar的时候遇到如下的问题 1.navigation bar的底部有一条黑线 本意做一个bar的颜色和页面颜色一致的页面。只有顶部有两个其他按钮的时候。发现bar的底部有一条黑线。导致bar不能很好的匹配想要的页面效果。在header中设置一下代码中后可去除 static navigationOptions = { ... headerStyle: { ... borderBottomWidth: 0, }, } 2. android 的 Bar底部有一条阴影,自定义Bar背景图无法填充满 react navigation bar在安卓中默认会有一个高度。带来的视觉效果是底部会有一条阴影。而且造成另外一个比较头疼的效果是如果使用了带背景图的自定义Bar时。会发现背景图有覆盖不全的效果。两侧总有一些间隙。iOS中则不会出现此问题。将elevation属性置零后可解决这个问题 static navigationOptions = { ... headerStyle: { ... elevation: 0, }, } 3.android 中Bar标题居中问题 在安卓中,bar 的标题是居左的。iOS则默认居中。可以通过以下写法居中 static navigationOptions = { ... headerTitleStyle: { //此属性是标题的Style属性。可以接受Text标签的style ... alignSelf: "center", }, } 在左侧没有按键的时候。这样写就足够了。但是如果左侧有个返回键或者自定义的其他按键。在安……

    网友NO.800048

    详解如何在react中搭建d3力导向图

    D3js力导向图搭建 d3js是一个可以基于数据来操作文档的JavaScript库。可以使用HTML,CSS,SVG以及Canvas来展示数据。力导向图能够用来表示节点间多对多的关系。 实现效果:连线有箭头,点击节点能改变该节点颜色和所连接的线的粗细,缩放、拖拽。 版本:4.X 安装和导入 npm安装:npm install d3 前端导入:import * as d3 from 'd3'; 一、完整代码 import React, { Component } from 'react';import PropTypes from 'prop-types';import { connect } from 'react-redux';import { push } from 'react-router-redux';import * as d3 from 'd3';import { Row, Form } from 'antd';import { chartReq} from './actionCreator';import './Chart.less';const WIDTH = 1900;const HEIGHT = 580;const R = 30;let simulation;class Chart extends Component { constructor(props, context) { super(props, context); this.print = this.print.bind(this); this.forceChart = this.forceChart.bind(this); this.state = { }; } componentWillMount() { this.props.dispatch(push('/Chart')); } componentDidMount() { this.print(); } print() { let callback = (res) = { // callback获取后台返回的数据,并存入state let nodeData = res.data.nodes; let relationData = res.data.rels; this.setState({ nodeData: res.data.nodes, relationData: res.data.rels, }); let nodes = []; for (let i = 0; i nodeData.length; i++) { nodes.push({ id: (nodeData[i] nodeData[i].id) || '', name: (nodeData[i] nodeData[i].name) || '', type: (nodeData[i] nodeData[i].type) || '', de……

    网友NO.232962

    React Native如何消除启动时白屏的方法

    在RN 项目启动之后有一个短暂的白屏,调试阶段白屏的时间较长,大概3-5秒,打正式包后这个白屏时间会大大缩短,大多时候都是一闪而过,所以称之为“闪白”。 其实解决的方案也有很多,这里做一个简单的总结。 白屏的原因 在iOS App 中有 启动图(LaunchImage),启动图结束后才会出现上述的闪白,这个过程是 js 解释的过程,JS 解释完毕之前没有内容,所以才表现出白屏,那么解决的方法就是在启动图结束后,JS 解释完成前做一些简单的处理。 解决的常见方案: 启动图结束后通过原生代码加载一张全屏占位图片,跟启动图一样的图片,混淆视听“欺骗用户”。 JS解释完毕后通知原生可以移除占位图 收到 JS 发来的可以移除占位图的通知,移除占位图 代码实现 新建一个SplashScreen 文件用来接收 JS 发来的”移除占位图”的消息。相关代码如下: SplashScreen.h #import Foundation/Foundation.h #import "RCTBridgeModule.h" @interface SplashScreen : NSObjectRCTBridgeModule @end SplashScreen.m #import "SplashScreen.h" @implementation SplashScreen RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(close){ [[NSNotificationCenter defaultCenter] postNotificationName:@"Notification_CLOSE_SPLASH_SCREEN" object:nil]; } @end 在AppDelegate.m 加入以下代码: @interface AppDelegate () { UIImageView *splashImage; } @end @implementation AppDelegate - (BOOL)application……

    网友NO.782003

    模块化react-router配置方法详解

    react-router模块化配置 因为公司的需要最近踏进了react坑,一直在挖坑填坑,在路由这一块折腾得不行。 直接进入主题,配置react-router模块化 1.先下载react-router-dom npm install react-router-dom --save 2.在相应的文件引入react-router-dom相应的模块 import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 3.在src子创建一个module目录,接着在module目录在创建一个router.js文件,用来配置路由。 //router.jsimport Index from '../components/Index'import New from '../components/New' import NewList from '../components/NewList' import NewContent from '../components/NewContent' const routes = [ { path:"/", component:Index, exact:true }, { path:"/new", component:New, routes:[ { path:"/new/", component:NewContent }, { path:"/new/newList", component:NewList } ] }, ]export default routes 4.在app.js根目录添加相应的跳转路径。 //app.jsimport React from 'react';import './App.css';import { BrowserRouter as Router, Route, Link } from "react-router-dom";import router from "./modules/routers"function App() { return ( Router nav className="nav" ul li Link to="/"首页/Link /li li Link to="/new"新闻/Link /li /ul /nav { router.map((router,index)={ if(router.exact){ return Route exact key={index} path={router.path} render = { props =( router.component {...props} routes = {router.routes}/ ) } / }else{ return Route key={index} path={router.path} render = { props =( router.component {...prop……

    Copyright 2018-2019 xz577.com 码农之家

    版权责任说明