react实现聊天界面_使用react做的聊天对话列表

刚刚接触react   可能写的地方有错误或者不完善的地方欢迎大家给指正

下面开始正题

首先分析页面基于react的特性--把页面中所有显示内容看做模块加载

本页面可以看做一个大的模块，我们暂且命名为commentbox

评论列表是由一条条的评论内容组成，所以把评论内容comment，单独作为一个模块，然后放在评论列表的模块里commentlist

底部的输入框作为一个输入模块commentform

页面分析完成开始准备

基于jspm工具首先安装jspm

在终端

npm init

然后安装jspm

npm install jspm --save-dev

然后配置

jspm init

安装需要的依赖

jspm install jquery

jspm install react@0.14.0-rc1

jspm install react-dom@0.14.0-rc1

本文中使用了semantic-ui的样式因此安装

jspm install semantic-ui

使用css安装

jspm install css

然后  在本地新建文件结构如下

然后在终端

browser-sync start --server --no-notify --files 'index.html,app/**/*.js'

配置本地服务器  并监视index.html和js文件的变化

下面正式开始：：：：：

首先我们利用react创建一个静态版本

在index.html引入js文件

react

System.import('app/main');

然后在main.js中

'use strict';

import 'semantic-ui/semantic.min.css!';

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

你好

,

document.getElementById('app')

)