基于vite4+react18+arco网页端聊天实例ReactWebchat

举报
Andy Yan 发表于 2023/09/14 08:38:50 2023/09/14
【摘要】 最近一直在学习react18 hooks知识,借助vite.js构建工具创建react18项目,构建/运行编译速度杠杠滴,真香!webchat-react18:基于react18.x hooks+arco design+zustand+react-router v6等技术开发的一款仿微信web界面聊天实例项目。项目中所用到的弹窗及滚动条功能都是基于react18 hooks自定义组件实现应用...

最近一直在学习react18 hooks知识,借助vite.js构建工具创建react18项目,构建/运行编译速度杠杠滴,真香!

013360截图20230911214538486.jpg

webchat-react18:基于react18.x hooks+arco design+zustand+react-router v6等技术开发的一款仿微信web界面聊天实例项目。

p2.gif

项目中所用到的弹窗及滚动条功能都是基于react18 hooks自定义组件实现应用场景。

p3.gif

技术栈

  • 编辑器:Vscode
  • 技术栈:react18+vite4+react-router-dom+arco+zustand
  • 组件库:@arco-design/web-react (字节跳动react组件库)
  • 状态管理:zustand^4.4.1
  • 路由管理:react-router-dom^6.15.0
  • className组合:clsx^2.0.0
  • 对话框组件:rdialog (基于react18 hooks自定义桌面端弹窗组件)
  • 滚动条组件:rscroll (基于react18 hooks自定义美化滚动条)
  • 预处理样式:sass^1.66.1

010360截图20230911214116563.jpg

项目基于vite4.x构建,采用react18 hooks编码规范。

360截图20230912082059514.jpg

入口main.jsx配置

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import '@arco-design/web-react/dist/css/arco.css'
import './style.scss'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

App.jsx模板

import { HashRouter } from 'react-router-dom'

// 引入useRoutes集中式路由配置文件
import Router from './router'

function App() {
    return (
        <>
            <HashRouter>
              <Router />
            </HashRouter>
        </>
    )
}

export default App

p1.gif

005360截图20230911213420000.jpg

005360截图20230911213442757.jpg

007360截图20230911213616012.jpg

react-webchat还支持动态更换背景皮肤功能,提供不一样的视觉体验。

项目整体分为侧边栏+中间栏+右侧内容区三个部分。

// 路由占位模板(类似vue中router-view)
const RouterLayout = () => {
    const authState = authStore()
    return (
        <div className="rc__container flexbox flex-alignc flex-justifyc" style={{'--themeSkin': authState.skin}}>
            <div className="rc__layout flexbox flex-col">
                {/* <div className="rc__layout-header">顶部栏</div> */}
                <div className="rc__layout-body flex1 flexbox">
                    {/* 菜单栏 */}
                    <Menu />

                    {/* 中间栏 */}
                    <Aside />

                    {/* 主内容区 */}
                    <div className="rc__layout-main flex1 flexbox flex-col">
                        { lazyload(<Outlet />) }
                    </div>
                </div>
            </div>
        </div>
    )
}

006360截图20230911213602915.jpg

008360截图20230911213814827.jpg

008360截图20230911213853687.jpg

011360截图20230911214138818.jpg

011360截图20230911214222226.jpg

react-router v6路由管理

/**
 * react-router路由管理 by XiaoYan Q:282310962
*/

import { lazy, Suspense } from 'react'
import { useRoutes, Outlet, Navigate } from 'react-router-dom'
import { Spin } from '@arco-design/web-react'

import { authStore } from '@/store/auth'

// 引入路由页面
import Login from '@views/auth/login'
import Register from '@views/auth/register'
const Index = lazy(() => import('@views/index'))
const Contact = lazy(() => import('@views/contact'))
const Uinfo = lazy(() => import('@views/contact/uinfo'))
const NewFriend = lazy(() => import('@views/contact/newfriend'))
const Chat = lazy(() => import('@views/chat/chat'))
const ChatInfo = lazy(() => import('@views/chat/info'))
const RedPacket = lazy(() => import('@views/chat/redpacket'))
const Fzone = lazy(() => import('@views/my/fzone'))
const Favorite = lazy(() => import('@views/my/favorite'))
const Setting = lazy(() => import('@views/my/setting'))
const Error = lazy(() => import('@views/404'))

import Menu from '@/layouts/menu'
import Aside from '@/layouts/aside'

// 加载提示
const SpinLoading = () => {
    return (
        <div className="rcLoading">
            <Spin size="20" tip='loading...' />
        </div>
    )
}

// 延迟加载
const lazyload = children => {
    // React 16.6 新增了<Suspense>组件,让你可以“等待”目标代码加载,并且可以直接指定一个加载的界面,让它在用户等待的时候显示
    // 路由懒加载报错:react-dom.development.js:19055 Uncaught Error: A component suspended while responding to synchronous input.
    // 懒加载的模式需要我们给他加上一层 Loading的提示加载组件
    return <Suspense fallback={<SpinLoading />}>{children}</Suspense>
}

// 路由鉴权验证
const RouterAuth = ({ children }) => {
    const authState = authStore()

    return authState.isLogged ? (
        children
    ) : (
        <Navigate to="/login" replace={true} />
    )
}

export const routerConfig = [
    {
        path: '/',
        element: <RouterAuth><RouterLayout /></RouterAuth>,
        children: [
            // 首页
            { index: true, element: <Index /> },

            // 通讯录模块
            { path: '/contact', element: <Contact /> },
            { path: '/uinfo', element: <Uinfo /> },
            { path: '/newfriend', element: <NewFriend /> },

            // 聊天模块
            { path: '/chat', element: <Chat /> },
            { path: '/chatinfo', element: <ChatInfo /> },
            { path: '/redpacket', element: <RedPacket /> },

            // 我的模块
            { path: '/fzone', element: <Fzone /> },
            { path: '/favorite', element: <Favorite /> },
            { path: '/setting', element: <Setting /> },

            // 404模块 path="*"不能省略
            { path: '*', element: <Error /> }
        ]
    },
    // 登录/注册
    { path: '/login', element: <Login /> },
    { path: '/register', element: <Register /> }
]

const Router = () => useRoutes(routerConfig)

export default Router

012360截图20230911214507905.jpg

014360截图20230911214607034.jpg

017360截图20230911214748897.jpg

020360截图20230911215131565.jpg

023360截图20230911215249337.jpg

025360截图20230911215346665.jpg

react18状态管理zustand

react-webchat使用了新一代react状态管理库Zustand4。一款轻量级、使用简单的支持react18 hooks的状态管理插件。

// NPM
npm install zustand

// Yarn
yarn add zustand
/**
 * react18状态管理库Zustand
*/
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

export const authStore = create(
    persist(
        (set, get) => ({
            isLogged: false,
            token: null,
            // 折叠侧边栏
            collapse: false,
            // 个性换肤
            skin: null,
            // 登录数据
            loggedData: (data) => set({isLogged: data.isLogged, token: data.token}),
            setCollapse: (v) => set({collapse: v}),
            setSkin: (v) => set({skin: v})
        }),
        {
            name: 'authState',
            // name: 'auth-store', // name of the item in the storage (must be unique)
            // storage: createJSONStorage(() => sessionStorage), // by default, 'localStorage'
        }
    )
)

vite.config.js项目配置

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
import { parseEnv } from './src/utils/env'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const viteEnv = loadEnv(mode, '.')
  const env = parseEnv(viteEnv)

  return {
    plugins: [react()],

    // 服务器选项
    server: {
      // 端口
      port: env.VITE_PORT,
      // 是否浏览器自动打开
      open: env.VITE_OPEN,
      // 是否开启https
      https: env.VITE_HTTPS,
      // 代理设置
      proxy: {}
    },
    
    resolve: {
      // 配置路径别名
      alias: {
        '@': resolve('.', 'src'),
        '@assets': resolve('.', 'src/assets'),
        '@components': resolve('.', 'src/components'),
        '@views': resolve('.', 'src/views')
      }
    }
  }
})

Ending,基于react18 hooks+arco网页版聊天项目就分享到这里,希望对大家有些帮助!

0 (3).gif

文章来源: segmentfault.com,作者:xiaoyan2017,版权归原作者所有,如需转载,请联系作者。

原文链接:https://segmentfault.com/a/1190000044208419

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。