React入门到精通（一）

React+Node的开发栈可以服务器端渲染，React使用的jsx语言可以支持在js中写HTML。
学习React也是这段时间的目标，所以打算写这么一个系列，供自己沉淀每天学的东西，很多都是网上的教程方法，自己组织一下语言和思路。
Hello-React
GitHub上开源项目：https://github.com/facebook/react
1、什么是React?

React is a JavaScript library for building user interfaces.

React是一个JavaScript库，用来构建用户界面，为数据渲染视图

特点：
声明式设计
高效：React虚拟DOM，最大限度的减少与DOM的交互
灵活：方便与其它库搭配起来
组件：构建组件
JSX：js语法的扩展，允许在js中写HTML
状态：内容与状态对应起来

copy一下阮一峰大神的React入门实例中的原话来介绍以下React:

React 起源于 Facebook的内部项目，由于不满意市面上的JavaScript MVC 框架,决定自己开发一套来架设Instaram网站，然后在2013年5月开源了。

由于React的设计思想及其独特，属于革命性创新，性能出众，代码逻辑却非常简单，可能认为将是Web开发的主流工具。

试想一下如果用Web App的方式去写Native App。那将会颠覆整个互联网行业
2、核心思想

分装组件、各个组件维护自己的状态和UI，当状态改变，自动更新组件，适合功能复杂的应用：组件驱动的开发。
3、核心概念

组件
JSX(用jsx语法取代HTML，在js中描述UI)jsx浏览器不识别，需要转换为js代码(babel将jsx转换为js)

虚拟DOM

diff算法：当更新组件的时候，会通过diff算法寻找到需要更新的DOM 节点，虚拟DOM是存在内存的js数据结构 性能比原生DOM好
数据流：单向数据流(状态与内容)

4、搭建React开发环境

引入三个js文件

react.js(React的核心库)
react-dom.js(提供与DOM相关的功能)
browser.js(将JSX语法转换为JavaScript语法)

5、JSX

基本语法：

遇到HTML标签,使用HTML来解析

遇到代码块({}),使用js解析
6、组件
6.1、创建组件

var HelloMsg = React.createClass();
6.2、使用组件

注意事项：

1、组件的命名：首字母必须大写。

2、在渲染组件，返回要求只有一个标签，但是这个标签可以包含多个子元素。
6.3、复合组件

将其他的组件整合在一起 创建一个新的组件

例子：使用复合组件实现登录窗口
7、ref

如果从组件获得真实的DOM的节点，ref属性
//通过指定ref=’ref名字’–>this.refs.ref名字
function(){ this.refs.inputTxt–>拿到真实的DOM节点 }