React 简介入门

一.React是FaceBook推出的一个用来构建用户界面的JS库。最新版本V15.3.2。具备以下特性：

 1.不是一个MVC框架；

  2.不适用模板；

  3.响应式更新非常简单；

  4.HTML5仅仅是个开始

二.React实现了单向相应的数据流，从而减少了重复代码，比传统数据绑定更简单。

三.React组件通过一个render()方法，接受输入的参数并返回展示的对象。

四.在JS代码里写XML格式的代码称为JSX，为了把JSX转成标准的JS，我们使用<script type = "text/jsx">标签包裹着包含JSX的代码，然后引入JSXTransformer.js库来实现在浏览器里的代码转换。

五.离线转换

  1.安装npm：npm install -g rect-tools

  2.把jsx文件转换成标准的js（文件会自动生成）：jsx --watch src/build/

        由  ： <h1>Hello World!</h1>,
      生成：React.createElement('h1',null,'Hello world!'),(这个时候就不需要引用JSXTransformer.js)

 六.jQuery对于React并不是必须的，React中全是模块化、可组装的组件。

七.组件

构造CommentBox组件(其实只是一个简单的<div>而已)

var CommentBox = React.createClass({
  render:function(){
    return(
      <div className = "commentBox">
         Hello World ! I am a CommentBox.
      </div>
    );
   }
});
Reader.render(
  <CommentBox/>,
  document.getElementById('content')
);

制作组件:为 CommentList 和 CommentForm 构建骨架，这也会是一些简单的 <div> ：

var CommentList = React.createClass({
  render: function() {
    return (
     <div className="commentList">
       Hello, world! I am a CommentList.
     </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

更新 CommentBox 组件，使用这些新的组件：

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
}); 

HTML 组件就是普通的 React 组件，就像你定义的一样，只有一点不一样。JSX 编译器会自动重写 HTML 标签为 React.createElement(tagName)表达式，其它什么都不做。这是为了避免全局命名空间污染。
组件属性：从父节点传递到子节点的数据称为属性（props）。通过props，就能够从中读取到父节点传递过来的数据，然后渲染标记。  

Markdown：是一种简单的格式化内联文本的方式。例如，用星号包裹文本讲使其强调突出。

   1.添加第三方的Showdown到你的应用。

   2.转换评论文本为Markdown格式并输出。

props 是不可变的：它们从父节点传递过来，被父节点“拥有”。为了实现交互，我们给组件引进了可变的state。 this.state 是组件私有的，可以通过调用 this.setState() 来改变它。当状态更新之后，组件重新渲染自己。
getInitialState() 在组件的生命周期中仅执行一次，设置组件的初始化状态。
React 中数据是沿着组件树从上到下单向流动的。