一、項目概況

基于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'));