用ReactJS和Python的Flask框架编写留言板的代码示例

近期要在生产环境上使用react，所以，自己学习了一下，写了一个简单的留言板小程序。完整的代码可以到这里下载：message-board

Use

前端使用React，然后还有Bootstrap和jQuery，React负责前端展现，jQuery主要是向服务器发送ajax请求。
后端使用Flask和MongoDB，为前端提供数据。这里主要关注前端，对于后端不做过多说明。
使用webpack，对js文件进行打包。

About React

React是facebook开发一个用于前段交互的Javascript库。
刚刚开始使用，有这么几个特点：
1. 组件化开发。React提倡无状态的组件，便于重用。
2. VirtualDOM。React的性能比较高，得益于虚拟DOM。它不会每次都去直接操作DOM，因为操作DOM的代价是很大的，所以，它在内存中维护了虚拟DOM，通过计算虚拟DOM和浏览器上的DOM的变更进行操作。
3. 专注于View。React不是MVC框架，它只是一个专注于View的库，所以，它也可以和很多其他框架或者库一起使用。
4. 提供完成的生命周期。

Message Board

这个留言板小应用，主要有这样几个功能：
1.添加留言，一个表单：用户名和内容
2.列表展示，显示所有留言
3.简单的分页

Code

使用React，就要对应用进行组件的切分，尽量保持组件的无状态。

App

从宏观上组织整个应用，切分三个大组件：
1. MessageForm，添加留言表单。
2. MessageList，留言列表
3. Pager，留言的分页控制
当然，组件还可以继续划分。
子组件的数据都会回调到MessageBoard中，在这里统一控制。
MessageBoard.js

    var React = require("react");
    var MessageList = require("./MessageList");
    var MessageForm = require("./MessageForm");
    var Pager = require("./Pager");

    var MessageBoard = React.createClass({
     getInitialState : function(){
      return {
       messages: [],
       page:0,
       pages:0
      }
     },
     submitMessage : function (author, content) {
      $.ajax({
       type:'post',
       url:'/message',
       data:{author:author,content:content}
      }).done(function (data) {
       console.log(data);
       this.listMessage(1);
      }.bind(this));
     },
     listMessage : function(page){
      console.log("listMessages page:"+page)
      $.ajax({
       type:'get',
       url:'/messages',
       data:{page:page}
      }).done(function (resp) {
       if(resp.status == "success"){
        var pager = resp.pager;
        console.log(pager);
        this.setState({
         messages:pager.messages,
         page:pager.page,
         pages:pager.pages
        });
       }
      }.bind(this));
     },
     componentDidMount : function(){
      this.listMessage(1);
     },
     render : function(){
      var pager_props = {
       page : this.state.page,
       pages : this.state.pages,
       listMessage : this.listMessage
      };
      return(


    <div>
        <MessageForm submitMessage={this.submitMessage}/>
        <MessageList messages = {this.state.messages}/>
        <Pager {...pager_props}/>
       </div>


      )
     }
    });

    module.exports = MessageBoard;

MessageForm

一个简单的表单，保存留言。用户提交后，数据会传给父组件。
MessageForm.js

    var React = require("react");

    var MessageForm = React.createClass({
     handleSubmit : function (e) {
      e.preventDefault();
      var author = this.refs.author.getDOMNode().value.trim();
      var content = this.refs.content.getDOMNode().value.trim();

      this.props.submitMessage(author,content);

      this.refs.author.getDOMNode().value = "";
      this.refs.content.getDOMNode().value = ""
     },
     render : function(){
      return(
        <div className="well">
         <h4>Leave a Message:</h4>
         <div role="form">
          <div className="form-group">
           <input ref="author" className="form-control" placeholder="Name"/>
           <textarea ref="content" className="form-control" rows="3" placeholder="Leave your message here"></textarea>
          </div>
          <a className="btn btn-primary" onClick={this.handleSubmit}>Submit</a>
         </div>
        </div>
      )
     }
    });
    module.exports = MessageForm;  

MessageList

留言的列表展示，在写列表之前，把每条留言写成一个组件
Message.js

    var React = require("react");

    var Message = React.createClass({
     render : function(){
      var msg = this.props.message;
      return(


    <div>
        <h3>{msg.author}  
         <small>{msg.time.toLocaleString()}</small>
        </h3>
        <p>{msg.content}</p>
       </div>


      )
     }
    });

    module.exports = Message;

然后，再写列表.
数据从父组件通过props传递进来
MessageList.js

    var React = require("react");
    var Message = require("./Message");

    var MessageList = React.createClass({
     render : function () {
      var messages = this.props.messages.map(function(item){
       return <Message message={item}/>
      });
      console.log(messages);
      return(
       <div>
        {messages}
       </div>
      )
     }
    });

    module.exports = MessageList;

Pager

这是一个简单的分页，会显示当前页和总页数，还有上一页和下一页功能。
Pager.js

    var React = require("react/addons");

    var Pager = React.createClass({
     getDefaultProps : function(){
      return{
       page:0,
       pages:0
      }
     },
     clickHandler: function(e){
      e.preventDefault();
      console.log(e.target.dataset.page);
      console.log(e.target.dataset.page.value);
      this.props.listMessage(e.target.dataset.page);

     },
     render : function(){
      var cx = React.addons.classSet;
      var preClass = cx({
       'previous':true,
       'disabled':this.props.page == 1
      });
      var nextClass = cx({
       'next':true,
       'disabled':this.props.page == this.props.pages
      });

      return(
       <ul className="pager">
        <li className={preClass} onClick={this.clickHandler}>
         <a href="#" data-page={this.props.page-1}><-Prev</a>
        </li>
        <li>
         <span>{this.props.page}/{this.props.pages}</span>
        </li>
        <li className={nextClass} onClick={this.clickHandler}>
         <a href="#" data-page={this.props.page+1}>Next-></a>
        </li>
       </ul>
      )
     }
    });

    module.exports = Pager;

Summary

一个简单的小程序只能简单的感受一下React，这个库的思路和当前流行的库和框架相比，还是比较新颖的，值得学习～