react+redux仿微信聊天界面

{
 "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"
 }
}

/
  @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')
);

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 './ponents/header'
import TabBar from './ponents/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">
      {/ 顶部