一、概況

基于react全家桶技術(shù) react+react-dom+react-router-dom+redux+react-redux+webpack2.0+swiper開發(fā)的手機端仿微信界面聊天室reactChatRoom，實現(xiàn)了聊天記錄下拉刷新、發(fā)送消息、表情(動圖)，圖片、視頻預覽，紅包等功能。

二、技術(shù)框架

• MVVM框架：react / react-dom

• 狀態(tài)管理：redux / react-redux

• 頁面路由：react-router-dom

• 彈窗插件：wcPop

• 打包工具：webpack 2.0

• 環(huán)境配置：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"

? }

}

• 主入口頁面配置（引入狀態(tài)管理、公共組件及樣式）

/*

?*? @desc 入口頁面index.js

?*/

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

// 引入狀態(tài)管理

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網(wǎng)頁版聊天|仿微信、微博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}}} />

? )

)} />

? })

}

{/* 初始化頁面跳轉(zhuǎn) */}

<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全家桶技術(shù)開發(fā)聊天IM項目 就介紹到這里，感興趣的話可以關(guān)注前端公眾號了解更多實例項目。