react聊天室

一、项目概况

基于我成长中的一件事react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的手机端仿微信界面聊天室——reactchatroom，实现了聊天记录下拉刷新、发送消息、表情(动图)，图片、视频预览，打赏、红包等功能。

二、技术栈

◆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-rver": "^1.12.0"  },  "scripts": {    "start": "t host=localhost&&t 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 './asts/fonts/iconfont.css'import './asts/css/ret.css'import './asts/css/layout.css'// 引入wcpop弹窗样式import './asts/js/wcpop/skin/wcpop.css'// 引入jsimport './asts/js/fontsize'reactdom.render(  <provider store={store}>    <app />  </provider>,  document.getelementbyid('app'));

◆ 页面app.js主模板

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 './asts/js/wcpop/wcpop'// 引入地址路由import routers from './router'// 导入顶部、底部tabbarimport headerbar from './components/header'import tabbar from './components/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">            {/* 顶部 */}            <switch>              <headerbar />            </switch>                        {/* 主页面 */}            <div classname="wcim__container flex1">              {/* 路由容器 */}              <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>            </div>            {/* 底部tabbar */}            <switch>              <tabbar />            </switch>          </div>        </div>      </router>    );  }}const mapstatetoprops = (state) =>{  return {    ...state.auth  }}export default connect(mapstatetoprops)(app);

◆ react登录、注册模块 / react登录注册验证

import react, { component } from 'react';import { link } from 'react-router-dom'import { connect } from 'react-redux';import * as actions from '../../store/action'// 引入wcpop弹窗插件import { wcpop } from '../../asts/js/wcpop/wcpop.js'class login extends component {    constructor(props) {        su炖鸡腿per(props)        this.state = {            tel: '',            pwd: '',            vcode: '',            vcodetext: '获取验证码',            disabled: fal,            time: 0        }    }    componentdidmount(){        if(this.props.token){            this.props.history.push('/')        }    }    render() {        return (            <div classname="wcim__lgregwrapper flexbox flex__direction-column">                ......            </div>        )    }        // 提交表单    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 });        } el if (!checktel(this.state.tel)) {            wcpop({ content: '手机号格式不正确！', style: 'background:#ff3b30;color:#fff;', time: 2 });        } el if (!this.state.pwd) {            wcpop({ content: '密码不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });        } el if (!this.state.vcode) {            wcpop({ content: '验证码不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });        } el {            // 获取登录之前的页面地址            let redirecturl = this.props.location.state ? this.props.location.state.from.pathname : '/'            // 设置token            this.props.authtoken(gettoken())            this.props.authur(this.state.tel)            wcpop({                content: '注册成功！', style: 'background:#41b883;color:#fff;', time: 2,                end: function () {                    that.props.history.push(redirecturl)                }            });        }    }    // 60s倒计时    handlevcode = (e) => {        e.preventdefault();        this.state.tel = this.refs.tel.value        if (!this.state.tel) {            wcpop({ content: '手机号不能为空！', style: 'background:#ff3b30;color:#fff;', time: 2 });        } el if (!checktel(this.state.tel)) {            wcpop({ content: '手机号格式不正确！', style: 'background:#ff3b30;color:#fff;', time: 2 });        } el {            this.state.time = 60            this.state.disabled = true            this.countdown();        }    }    countdown 发蜡抓头发= (e) => {        if(this.state.time > 0){            this.state.time--            this.tstate({                vcodetext: '获取验证码(' + this.state.time + ')'            })            // ttimeout(this.countdown, 1000);            ttimeout(() => {                this.countdown()            }, 1000);        }el{            this.tstate({                time: 0,                vcodetext: '获取验证码',                disabled: fal            })        }    }}const mapstatetoprops = (state) => {    return {        ...state.auth    }}export default connect(mapstatetoprops, {    authtoken: actions.ttoken,    authur: actions.tur})(login)

对自身的认识