React编写聊天室（1）

由于angular性能的问题，转投react的怀抱，学了半个月有了，写了一个聊天室的demo。

源码https://github.com/zezhipeng/react-socket.io-chat

例子的地址是 http://120.26.109.186:3000/?name=zezhipeng&&room=1

name 与room 分别为用户名和房间号，可以随意修改。

在同一个房间内可以相互聊天。

建议用手机打开，或者chrome用手机模式打开。

需要用到:

1. express
2. react
3. webpack
4. jade
5. bootstrap
6. mongoose
7. socket.io

8. 和一堆中间件和包

   首先关于webpack，就是一个web客户端的包管理工具。比较实际的感受就是，可以在js里面写require了（配合npm），或者可以说可以ES6来写前端了，还是蛮好用的。

我的webpack.config是

module.exports={
    entry:"./public/js/app.jsx",
    output:{
        path:"./public/js",
        filename:"bundle.js"
    },
    resolve:{
        extensions: ['', '.js', '.jsx']
    },
    module:{
        loaders:[
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}

然后执行

webpack -d --watch

就可以安心改代码了。如果你没用过webpack，网上有很多关于这个的资料，youtube上也有比较好的教程，由于篇幅问题我就不多说什么了。

最终效果图如下

从图上我们可以看到，我把app分成了3个子模块，

1. MsgForm //发送文字表单
2. MsgContent //信息展示模块
3. MsgTool //聊天模块的一些插件

首先关于父级组件app.jsx

var React = require("react");
var ReactDOM = require("react-dom");
var socket = io();
var marked = require('marked');
var MsgContent = require("./msgcontent.jsx");
var MsgTool = require("./msgtool.jsx");
var MsgForm = require("./msgform.jsx");
var ChatApp = React.createClass({
    getInitialState: function () {