关于教程内容的几点补充

1.bootstrap

• 脚手架项目有bootstrap，而文章中的代码里面没有，因为计划把bootstrap的引入使用放到第三章了。

2.路由

• 添加About容器组件，用于展示路由的功能
• history和react-router的关系。React Router 是建立在history 之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。所以使用react-router的时候请将history一起下载，而且有可能会有版本问题导致的坑
• hashHistory和browserHistory有什么区别
  hash: 它用到的是 URL 中的 hash（#）部分去创建形如 example.com/#/some/path的路由。
  browser:它使用 History API 在浏览器中被创建用于处理 URL，新建一个像这样真实的 URL
• react-router的其他用法简介：Link、NotFound、Redirect、onEnter、onLeave、IndexLink

总的来说，react-router的内容还是不少的，当前项目以部分功能跑通使用为主，详细的使用会有单独的文章讲解。

3.history-api-fallback

• enables support for history API fallback.

4.api.github.com

• 如果不太清楚通过github API获取数据的话，没关系，请到这里看一下：https://developer.github.com/v3
• 访问链接感受下：https://api.github.com/users/guoyongfeng

{
  "login": "GuoYongfeng",
  "id": 8686869,
  "avatar_url": "https://avatars.githubusercontent.com/u/8686869?v=3",
  "gravatar_id": "",
  "url": "https://api.github.com/users/GuoYongfeng",
  "html_url": "https://github.com/GuoYongfeng",
  "followers_url": "https://api.github.com/users/GuoYongfeng/followers",
  "following_url": "https://api.github.com/users/GuoYongfeng/following{/other_user}",
  "gists_url": "https://api.github.com/users/GuoYongfeng/gists{/gist_id}",
  "starred_url": "https://api.github.com/users/GuoYongfeng/starred{/owner}{/repo}",
  "subscriptions_url": "https://api.github.com/users/GuoYongfeng/subscriptions",
  "organizations_url": "https://api.github.com/users/GuoYongfeng/orgs",
  "repos_url": "https://api.github.com/users/GuoYongfeng/repos",
  "events_url": "https://api.github.com/users/GuoYongfeng/events{/privacy}",
  "received_events_url": "https://api.github.com/users/GuoYongfeng/received_events",
  "type": "User",
  "site_admin": false,
  "name": "GuoYongfeng",
  "company": "Yonyon.inc",
  "blog": "http://guoyongfeng.github.io/idoc/",
  "location": "Beijing City, Haidian District North Road No. 68, UFIDA Software Park",
  "email": "[email protected]",
  "hireable": null,
  "bio": null,
  "public_repos": 70,
  "public_gists": 0,
  "followers": 57,
  "following": 36,
  "created_at": "2014-09-07T15:07:31Z",
  "updated_at": "2016-03-26T01:01:22Z"
}

React-router教程的内容补充

1.hashHistory和browserHistory的区别

React-router是基于history库来创建的。简单来讲，history可以知道如何监听浏览器地址栏的改变从而将URL解析到location对象中，这样的话，router就可以匹配到每一条routes并且正确的渲染一系列的组件。

• hashHistory将hash(#)用做URL的一部分，创建的路由类似这样：example.com/#/some/path，使用hashHistory的话就不需要在服务端配置，可以纯前端的控制路由的切换；那么，使用hashHistory的时候出现的_k=788ds2这样的参数是什么意思呢，因为当history通过pushState或是replaceState的方式在你的应用中进行转换的时候，history会保存“location state”导致新的location不会再URL中展示出来，这有点像在HTML的form表单进行post提交数据一样。
• Browser history 是由 React Router 创建浏览器应用推荐的 history。它使用 History API 在浏览器中被创建用于处理 URL，新建一个像这样真实的 URL example.com/some/path。

2.每一条Route中参数component和components有什么不一样

component的传入值只能为具体的组件
components的传入值可以为对象或具体的组件

3.尽量使用activeClassName来改变被触发的Link的展示样式

4.组件中是如何拿到路由相关的信息的

render(){
  console.log(this.props);
  return (.....);
}

5.this.context.route是从哪里来的

在每一条Route对应渲染的组件中都可以拿到this.context.route，这个对象上面挂载了很多API，setRouteLeaveHook这个是常用的。

6.为什么要设置组件的contextType

接口约束，如果这个组件写了调用路由相关的API进行操作，但是本身没有放在router下面进行渲染，会给出友好的提示。

React课程常见问答

1. 什么时候上课

每周六晚19：30 - 21：30上课，特殊情况会在群公告说明。

2. 需要安装什么软件

• 代码编辑器
• nodejs & npm
• git客户端
• chrome浏览器

3. 上课需要带电脑吗

强烈建议带电脑一起写代码

4. 预习资料有吗，在哪里

有全套的预习文档，请参见这里：http://guoyongfeng.github.io/idoc/

5. 课程视频在哪里可以看到

请关注群公告，会放在百度网盘，也会有全套课程的地址给大家。

6. 应该去哪里听课

线下同学：请到北京市昌平区科星西路106号院国风美唐综合楼4号楼416
在线同学：https://ke.qq.com/course/101924

7. 我想提问怎么办

由于老师白天要上班，所以可能不能及时回答问题，问题可以提issue
地址
#3
最后讲师会统一回答

Babel + ES6课程答疑

写在前面

这里统一回复，具体同学们反馈的有以下三个大方向的问题：

• 视频质量问题
• 课程快慢问题
• 内容粗细问题

课程内容答疑

1. decorator应用场景

修饰器（Decorator）是一个函数，用来修改类的行为（方法或属性），从而实现代码重用，了解Java的springmvc的同学可以类比注解这个概念。

2. 对操作命令困惑，对前期的准备工作困惑，不知道为啥建那么多js文件，为什么要建到那个位置，后来讲的内容到是还瞒不错的，受益匪浅

操作命令用的是一些常用的，而且在预习课讲过（请复习一下之前的课程或讲义），主要以下几块：

• 基本的shell命令
• 基本的git命令
• 基本的npm命令

3. babel的一个正常的流程还是不是很清晰，这儿一个那儿一个，各个之间的区别都不是很清楚。

其实课上的就是一个常用的使用流程：

• 命令行工具：babel-cli
• 核心模块：babel-core babel-polyfill babel-runtime ...
• 各种预设：babel-preset-es2015 babel-preset-react ...
• 各种插件：babel-plugin-transform-runtime ...
• 更多应用：如何封装自己的插件，和构建工具集成，测试，代码检查 ...

4. set, map以及各种es6新增内容的使用场景

基础部分在博客文章中列出，有时间的话，还是建议看一下阮一峰老师的《ES6入门》

5. es6使用不熟悉

这个不着急，慢慢来，先看这十几个基本常用的，并且知道新的语法特性解决了什么问题，这样能学的快一些。

6. requirejs cmd amd规范

只能在这里写一个大概的，更多关于规范的还得自己去学习。

// Requirejs -> AMD
define('module-id', ['module'], function(a){ // TODO });

// Seajs -> CMD
define(function(require, module, exports){ // TODO });

// Commonjs
var fs = require('fs');
module.exports = function(){ // TODO }

7. 新语法，新技术如何运用到项目中

新的东西需要去接触，去学习。但是应用到项目中又是另一个方面，不能为了新而新，一定是为了解决项目的问题，或是提高开发的效率，才去把新的技术元素加入到项目中的。比如ES6有很多非常优秀好用的新特性，那么学完这次课，你就可以试着把ES6加入到项目中，但是需要做好工具方面的支撑，比如babel和gulp或是webpack。

8. class里面，静态方法和实例方法具体怎么写？

class MyClass {
  // 类的实例属性
  myProp = 42;

  // 类的构造函数
  constructor() {
    console.log(this.myProp); // 42
  }

  // 静态方法
  static classMethod() {
    return 'hello';
  }

  // 取值函数
  get prop() {
    return 'getter';
  }

  // 存值函数
  set prop(value) {
    console.log('setter: '+value);
  }

  // 原型方法
  toString() {
    return this.color + ' ' + super.toString(); 
  }
}

// 静态属性
MyClass.prop = 1;

9. 目前做项目用不到，还是对这些知识感觉很迷茫，接下来自己先认真的学习和复习，遇到具体问题后再群里与大家沟通交流

那暂时就当是技术储备，需要用的话，你的技术储备就发挥价值了。

10. 细节讲太多，应该多讲一些react的相关的技术栈以及怎么联系到一起使用，本来这个是相对比较多概念的架构 基础概念还是留着课后自学吧

感谢反馈，这就是传说中的众口难调。暂时还是考虑讲一些细节吧，毕竟需要拉上一些基础不是很好的同学一起玩耍。

11. 增加一些课时，讲慢一点

目前阶段不会增加课时了，不过可以讲慢一点，抱歉。

12.可以深入讲解下promise， 和他的简单实现

好的，感谢反馈，这个后面我单独加一部分内容放到博客上，请到时关注。

13. 2小时的课程，像赶马车一样往前赶，代码好多都复制粘贴过来，连代码如何敲出来的都没看到，说这样能学好，我只能呵呵呵......#这个效果比自己看郭老师写的文档差太多了！

感谢你的反馈，如你所说，2个小时的课程内容比较赶，更多是需要大家做好课前预习，再结合课上讲解。总体还是应用加引导，在有限的时间内讲不全，后面会考虑课程的拆分。

14. 老师说话能不能清晰一点，大声一点，不然听起来真的很吃力。

好的，感谢反馈，我们下次课直接麦克风。

15. 希望下次课还是给讲一下函数化编程吧,进度在快点吧！

好的，这个会放在redux的时候讲一下，这次课程的2个小时时间讲不完。

16. ES6的知识点讲的太浅显，不明白为什么会有这些新特性相比较ES5到底好在哪儿，各特性的适用场景？语法糖和真正的新特性也没区分开！

这次课程的ES6知识属于快餐式的，做一个基本的介绍。

17. 多讲一些react技巧跟react相关技术栈怎么结合的问题，别讲着讲着讲到很基础的什么浏览器meta标签，git指令 这些介绍下，要求git必须会就行了， 跟react没什么关系吧 打算学react就应该对基础自学能力强，不然还学什么全栈，那得学多久？

同学，你好，感谢反馈，你的基础应该是不错的。不过这次课程的人数比较多，甚至当前讲的一些知识点也还没消化，所以这次的课程内容会多一些，主要是考虑大多数吧，抱歉。下一期考虑基础应用和高级实战分离，这样可以适用于不同基础的同学。

18. 建议老师在讲课时，照顾下后面的同学，录视频的时候看看能不能把正在操作的屏幕部分移动到屏幕靠上一些或做下放大处理效果（看视频时会方便些），谢谢

好的，感谢反馈，我们争取课后在视频上做一些优化处理。

React Course Feedback

1.Babel

• preset和plugin的区别
• stage-0是对应的ES7提案语法的哪个阶段
• 写代码的时候怎么在windows下用命令行
• babel和gulp及webpack的关系是什么
• atom编辑器的美化和配置

2.ES 6

• class部分需要多讲一些内容
• rest和spread

3.Webpack

• hash值是一样的
• less-loader解析出错，node升级到5+版本后不会自动下载less模块
• 为什么要分离js
• loader和loaders的写法区别
• 入口文件那加两行代码啥意思
• 如何将css也分离
• 整理一套webpack常用插件功能列表及示例

4.React Fundamentals

• 15.0.1版本的升级信息
• canvas组件
• 组件生态及组件的购买
• 组件开发流程
• defaultProp在ES6的写法
• 直接this.refs.xxx和findDOMNode后拿到的元素差异

5.React App Develop

• 暂无

6.React Router

• 动态路由
• setRouteLeaveHook的action是POP，这个是否可以修改
• history的三种定义方式
• 纯函数中props

7.Redux Fundamental

• middleware
• 如何管理应用的store，如果想删除store中不用的state
• 性能优化
• store的数据和RootElement关联，如何优化只渲染需要更新部分的数据
• connect第一个和第二个参数的定义及写法
• ...state.slice(0, action.index)这种写法的渲染顺序

8.Redux Advanced

• 异步action
• 自定义devtools的monitor
• devtool的使用和环境标识结合

请教下郭老师，
redux是怎么解决无关联组件之间通信的问题的呢？

1. webpack.config.js中changeOrigin是什么意思

proxy: [
            {
                path: /^\/api\/(.*)/,
                target: "http://localhost:8080/",
                rewrite: rewriteUrl('/$1\.json'),
+              changeOrigin: true
            }
        ]

2. 在scripts中写命令的时候是不是可以直接写当前node_modules下面的命令?

有些地方是这个写的，要从当前路径出发寻找webpack-dev-server

"scripts": {
    "dev": "./node_modules/.bin/webpack-dev-server --progress --colors --content-base build"
}

有些地方是这么写的

"scripts": {
    "dev": "webpack-dev-server"
}

是不是如果在这里如果不写相对路径 的话它会找./node_modules/.bin下面的命令? 而./node_modules/.bin下面所有的命令是安装本地安装模块的时候安装进去的?

3. 这是noParse是啥意思，不解析，是不解析什么?

是不是如果不指定webpack还会继续解析react源代码？

+             noParse: [pathToReact, pathToReactDOM]

4. 是不是引入模块的时候如果不写路径都是去node_modules下找?

其实就是详细描述一下直接通过名称引入一个模块的话查找路径是如何的？

import 'bootstrap/dist/css/bootstrap.css'