Use the ReactJS and Python Flask frameworks to compile the message board code example

This article mainly introduces the sample code for writing a message board using the ReactJS and Python Flask frameworks. Other words use MongoDB, a database that is convenient to operate using JavaScript, for more information about how to use react in the production environment, I learned about it and wrote a simple message board applet. The complete code can be downloaded here: message-board

Use

The front end uses React, and then Bootstrap and jQuery. React is responsible for front-end display. jQuery mainly sends ajax requests to the server.
The backend uses Flask and MongoDB to provide data for the front-end. Here we mainly focus on the front-end and do not describe the backend too much.
Use webpack to package js files.

About React

React is a Javascript library developed by facebook for frontend interaction.
I just started using it and it has the following features:
1. componentized development. React advocates stateless components for reuse.
2. VirtualDOM. The React performance is relatively high, thanks to the virtual DOM. It does not directly operate the DOM every time. Because the cost of DOM operations is very high, it maintains the virtual DOM in the memory, perform operations by calculating changes to the virtual DOM and the DOM on the browser.
3. Focus on View. React is not an MVC framework. It is only a library focused on views. Therefore, it can also be used with many other frameworks or libraries.
4. complete lifecycle is provided.

Message Board

This small message board application mainly has the following functions:
1. Add a message, a form: User Name and content
2. List display: displays all messages
3. Simple Paging

Code

When using React, you must split the application components and try to keep them stateless.

App

From a macro perspective, the entire application is organized and divided into three major components:
1. MessageForm: Add a message form.
2. MessageList: Message list
3. Pager: Paging control of messages
Of course, components can be further divided.
The data of the sub-component will be called back to the MessageBoard, which is centrally controlled here.
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(
    
      
       
       
   
  
  ) }});module.exports = MessageBoard;

MessageForm

Save the message in a simple form. After the user submits the data, the data is transmitted to the parent component.
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(    
     Leave a Message:     
      
                    
      Submit     
    
  ) }});module.exports = MessageForm;

MessageList

The message list is displayed. Each message is written as a component before writing the list.
Message. js

var React = require("react");var Message = React.createClass({ render : function(){  var msg = this.props.message;  return(
    {msg.author}       {msg.time.toLocaleString()}        
{msg.content}
   
  ) }});module.exports = Message;

Then, write the list.
Data is transmitted from the parent component through 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 
 
    });  console.log(messages);  return(   
  
    {messages}   
  ) }});module.exports = MessageList;
 

Pager

This is a simple page that displays the current page and the total number of pages, as well as the previous page and next page features.
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(   
 
 
    
  
  
 ←Prev 
    
  
  
 {this.props.page}/{this.props.pages} 
    
  
  
 Next→ 
   
 
 
  ) }});module.exports = Pager;

Summary

A simple applet can only feel the React. The idea of this library is novel and worth learning compared with the popular library and framework ~