近期要在生产环境上使用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(
)
}
});
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(
leave a message:
submit
)
}
});
module.exports = messageform;
messagelist
留言的列表展示，在写列表之前，把每条留言写成一个组件
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;
然后，再写列表.
数据从父组件通过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
这是一个简单的分页，会显示当前页和总页数，还有上一页和下一页功能。
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
一个简单的小程序只能简单的感受一下react，这个库的思路和当前流行的库和框架相比，还是比较新颖的，值得学习～