react+redux仿微信聊天界面

一、项目概况

基于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'// 引入jsimport './assets/js/fontSize'ReactDOM.render( <Provider store={store}>  <App /> </Provider>, document.getElementById('app'));