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 ）

巴特西

react中文API解读二（教程）

2 .1运行一个服务器

2.6 添加 Markdown 语法格式的评论

最新文章

热门文章