react中文API解读二（教程）

记下自己的react学习之路 ,官方文档写的很详尽，学起来应该比较简单

官方文档地址：react.http://reactjs.cn/react/docs/getting-started.html

2 .1运行一个服务器

我使用的是wampserver,当图标显示为绿色时表示服务器正常开启。红色表示服务器异常。

进入www目录，初始index.php名称改成其他的，我改成index11.php。

将下载后的压缩包（react-tutorial-master）解压，改名成react后复制到进入www目录。

在浏览器中输入http://127.0.0.1/react/public/index.html    正常显示

 

2.2你的第一个组件

 

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

 　　React.createClass构造react网页组件。可以理解为在内存中创建了一个虚拟网页。

ReactDOM.render();render()函数有两个参数。第一个指的是需要从内存中取出的网页，第二个指的是要渲染到的目标对象。

2.3制作组件

逻辑和1.2一样，只是在结构嵌套一层，更符合实际。
本例代码结构：构造一个CommentList组件和CommentForm组件。

<script type="text/babel">
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>
    );
  }
});

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

ReactDOM.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);
</script>

 

2.4使用属性与2.5组件属性

如果纯粹2.2,2.3中的使用方法，把所有内容直接写出来，那还不如直接在html里面写简单，模板标签也失去了存在的意义。
正是有了属性，才使得模板有了血液，模板和数据进行分离。

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

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

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
      </div>
    );
  }
});

ReactDOM.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);

 

2.6 添加 Markdown 语法格式的评论

本节可以看到，<p>标签并没有被解析成html标签，而是直接被输出到页面。

 

2.7接入数据模型 

 我们的使用越来越接近实际开发了。

data可以看作是接口给我们返回的数据

 var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
]; 

var Comment = React.createClass({
  rawMarkup: function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return { __html: rawMarkup };
  },

  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={this.rawMarkup()} />
      </div>
    );
  }
});
var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

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

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

ReactDOM.render(
  <CommentBox data={data} />,
  document.getElementById('content')
);

2.8从服务器获取数据 

2.9响应状态变化（ Reactive state ）