一、项目概况

基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的手机端仿微信界面聊天室——reactChatRoom，实现了聊天记录下拉刷新、发送消息、表情(动图)，图片、视频预览，打赏、红包等功能。

二、技术栈

• MVVM框架：react / react-dom
• 状态管理：redux / react-redux
• 页面路由：react-router-dom
• 弹窗插件：wcPop
• 打包工具：webpack 2.0
• 环境配置：node.js + cnpm
• 图片预览：react-photoswipe
• 轮播滑动：swiper

◆ package.json依赖安装：

{
  "name": "react-chatroom",
  "version": "0.1.0",
  "private": true,
  "author": "andy",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.0.3",
    "react-router-dom": "^5.0.0",
    "react-scripts": "0.9.x",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "jquery": "^2.2.3",
    "react-loadable": "^5.5.0",
    "react-photoswipe": "^1.3.0",
    "react-pullload": "^1.2.0",
    "redux-thunk": "^2.3.0",
    "swiper": "^4.5.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.12.0"
  },
  "scripts": {
    "start": "set HOST=localhost&&set PORT=3003 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

◆ 入口页面index.js配置

/*
 *  @desc 入口页面index.js
 */
import React from 'react';
import ReactDOM from 'react-dom';
// import {HashRouter as Router, Route} from 'react-router-dom'
import App from './App';

// 引入状态管理
import {Provider} from 'react-redux'
import {store} from './store'

// 导入公共样式
import './assets/fonts/iconfont.css'
import './assets/css/reset.css'
import './assets/css/layout.css'
// 引入wcPop弹窗样式
import './assets/js/wcPop/skin/wcPop.css'

// 引入js
import './assets/js/fontSize'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
);

◆ 页面App.js主模板

import React, { Component } from 'react';
import {HashRouter as Router, Route, Switch, Redirect} from 'react-router-dom'
import {connect} from 'react-redux'

import $ from 'jquery'
// 引入wcPop弹窗插件
import { wcPop } from './assets/js/wcPop/wcPop'

// 引入地址路由
import routers from './router'

// 导入顶部、底部tabbar
import HeaderBar from './components/header'
import TabBar from './components/tabbar'

class App extends Component {
  constructor(props){
    super(props)
    console.log('App主页面参数：\n' + JSON.stringify(props, null, 2))
  }
  render() {
    let token = this.props.token
    return (
      <Router>
        <div className="weChatIM__panel clearfix">
          <div className="we__chatIM-wrapper flexbox flex__direction-column">
            {/* 顶部 */}
            <Switch>
              <HeaderBar />
            </Switch>
            
            {/* 主页面 */}
            <div className="wcim__container flex1">
              {/* 路由容器 */}
              <Switch>
                {
                  routers.map((item, index) => {
                    ret