使用React和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

javascriptvar 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

javascriptvar 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

javascriptvar React = require("react");

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


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


        )
    }
});

module.exports = Message;

而後，再寫列表.
數據從父組件經過props傳遞進來
MessageList.js

javascriptvar 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

javascriptvar 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}>&larr;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&rarr;</a>
                </li>
            </ul>
        )
    }
});

module.exports = Pager;

Summary

一個簡單的小程序只能簡單的感覺一下React，這個庫的思路和當前流行的庫和框架相比，仍是比較新穎的，值得學習～