facebook react.js

时间 2019-12-12

标签 react.js react 栏目硅谷繁體版

原文原文链接

React.js这是不错。利用Javascript的OO和函数编程的特性，能够把一堆子html的标签封装成一个组件。这个有点当年Borland公司Delphi的味道。html

网站上给的例子：
react

[1] first.html:jquery

<!DOCTYPE html>
<html>
<head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
   <script src="/jquery/dist/jquery.js"></script>
</head>
<body>
    <div id="content"></div>
    <script type="text/jsx" src="src/helloworld.js">
    </script>
</body>
</html>ajax

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

[2] helloworld.js:json

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({
handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    // TODO: send request to the server
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
    return;
},
render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
}
});

var CommentBox = React.createClass({
loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
},
getInitialState: function() {
    return {data: []};
},
componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
}
});

React.render(
<CommentBox url="comments.json" pollInterval={2000} />,
document.getElementById('content')
);函数

[3] comments.json
网站

[
    {
        "author": "Pete Hunt",
        "text": "Hey there!"
    },
   {
        "author": "Lao Wang",
        "text": "Mao !"
    }
   ,
   {
        "author": "Lao Li",
        "text": "Li !"
    }
]
ui

相关文章

相关标签/搜索

webpack+react.js+bootstrap

React.js 小书

react.js+node.js+express.js+mysql

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<