Entry to React

原教程内容详见精益 React 学习指南，这只是我在学习过程中的一些阅读笔记，个人觉得该教程讲解深入浅出，比目前大多数教程专业、系统。

1.1 Introduction to React

1.1.1 What is React?

React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES , INCLUDING

React.js
ReactRenders: ReactDOM / ReactServer / ReactCanvas
Flux模式及其实现
React Components
React Native
GraphQI + Relay

1.1.2 Basic concept in React

React.js
React.js 是 React 的核心库，在应用中必须先加载核心库

ReactDOM.js
DOM渲染器，为了在 web 页面中显示开发的组件，需要调用 ReactDOM.render 方法，第一个参数是 React 组件，第二个参数为 HTMLElement。
JSX
JSX 是 React 自定义的语法，最终 JSX 会转化为 JS 运行于页面当中
Components
Component是 React 中的核心概念，页面当中的所有元素都是通过 React 组件来表达。
Virtual DOM
React 抽象出来的虚拟 DOM 树，虚拟树是 React 高性能的关键。
one-way reactive data flow
React 应用的核心设计模式，数据流向自顶向下

1.1.3 Features of React

Component的组合模式
组合模式有时候又叫做部分-整体模式，它使我们树型结构的问题中，模糊了简单元素和复杂元素的概念，客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素的内部结构解耦。
React 就是基于组合模式，无论是应用等级还是一个表单亦或是一个按钮都视为一个组件，然后基于组件的组合构建整个应用，这样的结构一直是前端界想要却迟迟不来的 web component。
基于组合模式的优点：

构建可重用的组件：组件的开发能够形成公司的组件库，每个业务的开发都能积累可重用的组件。
无学习障碍：天然符合 HTML 的结构，对前端开发者来说几乎没有学习障碍。
具有弹性的架构：组合模式很简单却很有效，能够构建简单的页面也能构建大型的前端应用。
源码高可维护性：开发只是工作中的一部分，应用的上线才是噩梦的开始，很多大型应用因为复制的业务逻辑导致无法快速响应业务需求，可维护性低。

One way data flow
Javascript 是脚本语言，不能像静态语言一样通过编译定位为题，想要清晰的定位到应用中的 bug 需要深入了解业务代码，对于大型前端应用来说，因为业务代码量很大且复杂，很难定位到 bug。然而 React 的单向数据流的设计让前端 bug 定位变得简单，页面的 UI 和数据的对应是唯一的,我们可以通过定位数据变化就可以定位页面展现问题。
High efficiency
基于VirtualDOM算法可以让只有需要改变的元素才去重渲染
Separate frame design
React.js 现在的版本已经将源码分开为 ReactDOM 和 React.js . 这就意味着 React 不仅仅能够在 web 端工作，甚至可以在服务端（nodejs），Native 端运行。
与此同时，我们可以自定义自己的渲染器，实现比如 Three.js， Pixi.js， D3.js 的 React 方式渲染。

1.1.4 Where can React apply?

web 端
原生应用
IOS、Android、Native 应用
这要归功于 facebook 开源的 React Native。基于 React Native ，我们将可以使用 jsx 来实现具有原生应用性能的 UI 运行于 IOS 和 android 中，同时我们也可以通过 NW.js 或者 Electron 来实现基于 React 的桌面应用。
服务器端渲染
React 除了在 Web 和 Native 环境以外，也可以通过 React 实现在服务器端渲染出 HTML。

1.2 JSX Grammar

1.2.1 Prepare running environment

Babel REPL
Babel REPL
直接在 REPL 中写 JSX 语法，可以实时的查看编译后的结果。
JSFiddle
在线模式 React Fiddle
Local development

1.2.2 JSX Grammar

创建 JSX 语法的本质目的是为了使用基于 xml 的方式表达组件的嵌套，保持和 HTML 一致的结构，语法上除了在描述组件上比较特别以外，其它和普通的 Javascript 没有区别。并且最终所有的 JSX 都会编译为原生 Javascript。

jsx componments
JSX 组件分为 HTML 组件和 React 组件
HTML 组件就是 HTML 中的原生标签，如：

function render() {
       return   hello, React World 
}
function render() {
       return  
                 list item 1
                 list item 2
              
}

React 组件就是自定义的组件，如

// 定义一个自定义组件
var CustomComponnet = React.createClass({
        render: function() {
            return  custom component 
  }
});
// 使用自定义组件
function render() {
        return   
}

properties of jsx components
和 html 一样，JSX 中组件也有属性，传递属性的方式也相同
对于 HTML 组件

 function render() {
      return  hello, React, world 
 }

如果是 React 组件可以定义自定义属性，传递自定义属性的方式：

  function render() {
      return   
      }
}

属性即可以是字符串，也可以是任意的 Javascript 变量, 传递方式是将变量用花括号， eg:

  function render() {
      var data = {a: 1, b:2};
      return   
  }

需要注意的地方上，属性的写法上和 HTML 存在区别，在写 JSX 的时候，所有的属性都是驼峰式的写法，主要是出于标准的原因，驼峰式是 Javascript 的标准写法，并且 React 底层是将属性直接对应到原生 DOM 的属性，而原生 DOM 的属性是驼峰式的写法，这里也可以理解为什么类名不是 class 而是 className 了, 又因为 class 和 for 还是 js 关键字，所以 jsx 中:

class => className
for => htmlFor

除此之外比较特殊的地方是 data-* 和 aria-*两类属性是和 HTML 一致的。

curly braces

显示文本

  function render() {
        var text = "Hello, World"
        return  {text} 
  }

运算

funtion render() {
      var text = text;
      var isTrue = false;
      var arr = [1, 2, 3];
      return 
        {text}
        {isTrue ? "true" : "false"}
        {arr.map(function(it) {
           return  {it} 
        })}
        
  }

限制规则
render 方法返回的组件必须是有且只有一个根组件，错误情况的例子

  // 无法编译通过，JSX 会提示编译错误
  function render() {
    return ( .... 
            .... )
  }

组件命名空间
JSX 可以通过命名空间的方式使用组件, 通过命名空间的方式可以解决相同名称不同用途组件冲突的问题。如：

  function render() {
    return 
           
           
           
  }

1.2.3 Understand JSX

JSX 的编译方式
- 在 HTML 中引入 babel 编译器, 如上 Hello World 程序中一样。
- 离线编译 JSX，通过 babel 编译 JSX，细节我们将在第二章中讲解。
JSX 到 JS 的转化
Hello World 程序转化为 JS 的代码如下：

  var Hello = React.createClass({
       displayName: 'Hello',
       render: function() {
          return React.createElement("div", null, "Hello ", this.props.name);
     }
  });
  ReactDOM.render(
       React.createElement(Hello, {name: "World"}),
       document.getElementById('container')
  );

1.3 React Components

1.3.1 Create a component

创建一个 React 组件的方法为，调用 React.createClass 方法，传入的参数为一个对象，对象必须定义一个 render 方法，render 方法返回值为组件的渲染结构，也可以理解为一个组件实例（React.createElement 工厂方法的返回值），返回值有且只能为一个组件实例，或者返回 null/false，当返回值为 null/false 的时候，React 内部通过