刚写好的文章一不小心点错界面被覆盖掉，那种心情真tm酸爽，好了都怪自己不小心。
发完牢骚还是要继续重来。
在介绍react之前首先要说说为什么用它。
我最初发现他时在material ui这个前端实现框架里面。这个框架的实现使用的正式react,
react是由facebook 工程师提出来的前端组件化思想的实现。
前端组件化的思想出现是因为大型项目需求的刺激。为了优雅的实现大型项目，我们必须把它一块一块的分离出来再去实现。
这里给大家一篇关于探讨界面组件化的文章：
http://bradfrost.com/blog/post/atomic-web-design/#pages
就好比自然世界的组成是由原子到分在再到更大的组织一样。
我们的界面设计也同样可以遵循这一原理。
Atoms 原子
类似于输入标签按钮等网页基础元素
Molecules分子
将多个原子组合起来，具有一定的功能
比如一个搜索框，包括标签，输入框和搜索按钮。
Organisms 组织
类似于我们的header。它包括，欢迎内容，登录注册链接，等等
Templates 模板
这个跟axure做的原型线框是一个道理，把组织组织到一起，实现一个简要的线框图。
Pages 界面
最后就是具体实现的界面。专业术语叫做高保真。
同理还有网易的nec 前端 css 框架
推崇的也是组件化思想。它将css 进行了内部分类
包括重置，布局，模块，原件，功能等，推荐大家看看这个网站，虽然现在不是很有名气，但是真心很棒。
也就是说前端组件化是众望所归，大家都在努力去实现。而react无疑是一个先驱。
react官网http://facebook.github.io/react/ 给出了十分详细的实现。
这里我只是简单翻译一下给大家。但是前面的基础介绍需要大家自己去翻阅。
首先是第一个组件：
组件之间可以相互依赖，示例结构如下：
- CommentBox
- CommentList
- Comment
- CommentForm
接下来创建一个组件：
// tutorial1.js
var CommentBox = React.createClass(
{ render: function() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); }
});
React.render( <CommentBox />, document.getElementById(‘content‘));
可以看到,使用React.createClass定义一个组件，然后使用React.render（组件，dom元素）渲染到元素上
接下来是另一种方式：
// tutorial1-raw.js
var CommentBox = React.createClass(
{
displayName: ‘CommentBox‘,
render: function() { return ( React.createElement(‘div‘, {className: "commentBox"}, "Hello, world! I am a CommentBox." ) );
}
});
React.render( React.createElement(CommentBox, null), document.getElementById(‘content‘));
定义组件名，然后渲染时候可以使用React.createElement(组件名，参数),动态定义
React使用React.createClass()创建组件，官网解释是，向这个函数传递了许多方法，最重要的是render,这个方法反悔了React组件树，最终会在html中渲染出来
注意里面的<div>标签已经不是原生的dom标签，因此可以和组件进行数据绑定，因为属于react控制的，也可以理解成react很安全，毕竟是虚拟的dom。
ok,今天就到这里我先保存，以免又重新要再写。