update from master

Author: carlleton

Ch02/webpack-dev-enviroment.md

@@ -107,7 +107,7 @@
 	    filename: 'index_bundle.js',
 	  },
 	  module: {
-	  	// loaders 则是放欲使用的 loaders，在这边是使用 babel-loader 将所有 .js（这边用到正则式）相关档案（排除了 npm 安装的套件位置 node_modules）转译成浏览器可以阅读的 JavaScript。preset 则是使用的 babel 转译规则，这边使用 react、es2015
+	  	// loaders 则是放欲使用的 loaders，在这边是使用 babel-loader 将所有 .js（这边用到正则式）相关档案（排除了 npm 安装的套件位置 node_modules）转译成浏览器可以阅读的 JavaScript。preset 则是使用的 babel 转译规则，这边使用 react、es2015。若是已经单独使用 .babelrc 作为 presets 设定的话，则可以省略 query
 	    loaders: [
 	      {
 	        test: /\.js$/,

Ch03/todo-examples/package.json

@@ -7,8 +7,7 @@
     "example": "examples"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
+    "start": "webpack-dev-server --colors --inline --content-base ."
   },
   "author": "kdchang",
   "license": "MIT",

Ch03/todo-examples/webpack.config.js

@@ -20,9 +20,6 @@ module.exports = {
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader',
-        query: {
-          presets: ['es2015', 'react'],
-        },
       },
     ],
   },

Ch04/props-state-introduction.md

@@ -30,11 +30,13 @@ app.js，使用 ES6 Class Component 写法：
 
 ```javascript
 class HelloMessage extends React.Component {
+	// 若是需要绑定 this.方法或是需要在 constructor 使用 props，定义 state，就需要 constructor。若是在其他方法（如 render）使用 this.props 则不用一定要定义 constructor
 	constructor(props) {
 		// 对于 OOP 物件导向程式设计熟悉的读者应该对于 constructor 建构子的使用不陌生，事实上它是 ES6 的语法糖，骨子里还是 portotype based 物件导向程式语言。透过 extends 可以继承 React.Component 父类别。super 方法可以呼叫继承父类别的建构子
 		super(props);
 		this.state = {}
 	}
+	// render 是唯一必须的方法，但如果是单纯 render UI 建议使用 Functional Component 写法，效能较佳且较简洁
 	render() {
 		return (
 			<div>Hello {this.props.name}</div>
@@ -55,6 +57,8 @@ HelloMessage.defaultProps = {
 ReactDOM.render(<HelloMessage name="Mark" />, document.getElementById('app'));
 ```
 
+关于 React ES6 class constructor super() 解释可以参考 [React ES6 class constructor super()](http://cheng.logdown.com/posts/2016/03/26/683329) 。
+
 使用 Functional Component 写法：
 
 ```javascript
@@ -138,6 +142,8 @@ class Timer extends React.Component {
 ReactDOM.render(<Timer />, document.getElementById('app'));
 ```
 
+关于 Javascript this 用法可以参考 [Javascript：this用法整理](https://software.intel.com/zh-cn/blogs/2013/10/09/javascript-this)。
+
 ## 事件处理（Event Handle）
 在前面的内容我们已经学会如何使用 props 和 state，接下来我们要更进一步学习在 React 内如何进行事件处理。下列将使用 React 官网的 An Application 当做例子，实作出一个简单的 TodoApp。
 
@@ -283,6 +289,7 @@ ReactDOM.render(<MarkdownEditor />, document.getElementById('app'));
 ## 延伸阅读
 1. [React 官方网站](https://facebook.github.io/react/index.html)
 2. [Top-Level API](https://facebook.github.io/react/docs/top-level-api.html)
+3. [Javascript：this用法整理](https://software.intel.com/zh-cn/blogs/2013/10/09/javascript-this)
 
 ## :door: 任意门
 | [回首页](../../../tree/zh-CN/) | [上一章：JSX 简明入门教学指南](../Ch03/react-jsx-introduction.md) | [下一章：React Component 规格与生命周期（Life Cycle）](../Ch04/react-component-life-cycle.md) |

Ch05/react-router-example/webpack.config.js

@@ -27,9 +27,6 @@ module.exports = {
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
-      query: {
-        presets: ['es2015', 'react'],
-      },
     }],
   },
   devServer: {

Ch06/react-immutable-introduction.md

@@ -203,7 +203,7 @@ ImmutableJS 提供了 7 种不可修改的资料类型：`List`、`Map`、`Stack
 传统 JavaScript 比较方式，若资料型态为 Primitive 就不会有问题：
 
 ```javascript
-// 在 shouldComponentUpdate 比较接下来的 props 一否一致，若相同则不重新渲染，提升效能
+// 在 shouldComponentUpdate 比较接下来的 props 是否一致，若相同则不重新渲染，提升效能
 shouldComponentUpdate (nextProps) {
     return this.props.value !== nextProps.value;
 }
@@ -213,7 +213,7 @@ shouldComponentUpdate (nextProps) {
 
 ```javascript
 // 假设 this.props.value 为 { foo: 'app' }
-// 架设 nextProps.value 为 { foo: 'app' },
+// 假设 nextProps.value 为 { foo: 'app' },
 // 虽然两者值是一样，但由于 reference 位置不同，所以视为不同。但由于值一样应该要避免重复渲染
 this.props.value !== nextProps.value; // true
 ```

Ch07/react-flux-example/webpack.config.js

@@ -27,9 +27,6 @@ module.exports = {
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
-      query: {
-        presets: ['es2015', 'react'],
-      },
     }],
   },
   devServer: {

Ch07/react-redux-example/webpack.config.js

@@ -27,9 +27,6 @@ module.exports = {
       test: /\.js$/,
       exclude: /node_modules/,
       loader: 'babel-loader',
-      query: {
-        presets: ['es2015', 'react'],
-      },
     }],
   },
   devServer: {

Ch07/react-redux-introduction.md

@@ -91,7 +91,7 @@ store.dispatch({ type: 'DECREMENT' });
 
 1. createStore：`createStore(reducer, [preloadedState], [enhancer])`
 
-	我们知道在 Redux 中只会有一个 store。在产生 store 时我们会使用 `createStore` 这个 API 来创建 store。第一个参数放入我们的 `reducer` 或是有多个 `reducers` combine（使用 `combineReducers`）在一起的 `rootRuducers`。第二个参数我们会放入希望预先载入的 `state` 例如：user session 等。第三个参数通常会放入我们想要使用用来增强 Redux 功能的 `middlewares`，若有多个 `middlewares` 的话，通常会使用 `applyMiddleware` 来整合。
+	我们知道在 Redux 中只会有一个 store。在产生 store 时我们会使用 `createStore` 这个 API 来创建 store。第一个参数放入我们的 `reducer` 或是有多个 `reducers` combine（使用 `combineReducers`）在一起的 `rootReducers`。第二个参数我们会放入希望预先载入的 `state` 例如：user session 等。第三个参数通常会放入我们想要使用用来增强 Redux 功能的 `middlewares`，若有多个 `middlewares` 的话，通常会使用 `applyMiddleware` 来整合。
 
 2. Store
 
@@ -102,7 +102,7 @@ store.dispatch({ type: 'DECREMENT' });
 	- subscribe(listener)
 	- replaceReducer(nextReducer)
 
-	关于 Store 重点是要知道 Redux 只有一个 Sotre 负责存放整个 App 的 State，而唯一能改变 State 的方法只有发送 action。
+	关于 Store 重点是要知道 Redux 只有一个 Store 负责存放整个 App 的 State，而唯一能改变 State 的方法只有发送 action。
 
 3. combineReducers：`combineReducers(reducers)`
 

Ch09/react-router-redux-github-finder/.eslintrc

@@ -2,6 +2,10 @@
   "extends": "airbnb",
   "rules": {
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "import/no-extraneous-dependencies": [0],
+    "linebreak-style": ["error", "unix"],
+    "react/prop-types": ["error", {"ignore": ["children", "route"]}],
+    "new-cap": [0],
   },
   "env" :{
     "browser": true,