一、概况

基于react全家桶技术 react+react-dom+react-router-dom+redux+react-redux+webpack2.0+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",

  "author": "andy  |  QQ：282310962",

  "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-photoswipe": "^1.3.0",

    "react-pullload": "^1.2.0",

    "redux-thunk": "^2.3.0",

    "swiper": "^4.5.0",

    "webpack": "^1.13.1",

  },

  "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 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')

);

想要了解 基于react网页版聊天|仿微信、微博web实例项目，可以看看下面链接文章

https://juejin.im/post/5d16f3cdf265da1bb13f4676

• 通过Switch、Route配置路由容器

<Switch>

{

  routers.map((item, index) => {

return <Route key={index} path={item.path} exact render={props => (

  !item.meta || !item.meta.requireAuth ? (<item.component {...props} />) : (

token ? <item.component {...props} /> : <Redirect to={{pathname: '/login', state: {from: props.location}}} />

  )

)} />

  })

}

{/* 初始化页面跳转 */}

<Redirect push to="/index" />

</Switch>

• 登录、注册模块验证表单

class Login extends Component {

    constructor(props) {

        super(props)

        this.state = {

            tel: '',

            pwd: '',

            vcode: '',

        }

    }

    // 提交表单

    handleSubmit = (e) => {

        e.preventDefault();

        var that = this

        this.state.tel = this.refs.tel.value

        this.state.pwd = this.refs.pwd.value

        this.state.vcode = this.refs.vcode.value

        if (!this.state.tel) {

            wcPop({ content: '手机号不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });

        } else if (!checkTel(this.state.tel)) {

            ...

        }

    }

}

const mapStateToProps = (state) => {

    return {

        ...state.auth

    }

}

export default connect(mapStateToProps, {

    authToken: actions.setToken,

    authUser: actions.setUser

})(Login)

基于react全家桶技术开发聊天IM项目 就介绍到这里，感兴趣的话可以关注前端公众号了解更多实例项目。