Minimalist extraordinary react hooks+arcoDesign+vite backend management template

Recently, I made a vite4 to build a react18 backend template, which is equipped with Arco Design, the byte team's react component library, and the overall compilation and operation are smoothly connected. Supports multiple template layouts, dark/light mode, internationalization, permission verification, multi-level routing menu, tabview tab bar shortcut menu, full-screen control and other functions.

Insert image description here

Use technology

"@arco-design/web-react": "^2.53.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"sass": "^1.67.0",
"zustand": "^4.4.1"
"vite": "^4.4.5"

Insert image description here
Arco.Design, a very excellent react enterprise-level PC-side component library launched by the ByteDance front-end team .

characteristic

The latest front-end technology stack react18 hooks, vite4, zustand, react-router, sass
Support Chinese/English/Traditional multi-language solutions
Support dynamic routing authentication and verification
Support routing tabsview control switching routing page
Built-in multiple template layout styles
Paired with light react component library arco-design

Insert image description here

Project directory structure

Insert image description here
Use the vite4 build tool to create react18 projects, all following the react18 hooks development model.

/**
 * 入口模板
 * @author Hs  Q: 282310962
*/

import {
    
     useEffect } from 'react'
import {
    
     HashRouter } from 'react-router-dom'
// 通过 ConfigProvider 组件实现国际化
import {
    
     ConfigProvider } from '@arco-design/web-react'
// 引入语言包
import enUS from '@arco-design/web-react/es/locale/en-US'
import zhCN from '@arco-design/web-react/es/locale/zh-CN'
import zhTW from '@arco-design/web-react/es/locale/zh-TW'

import {
    
     AuthRouter } from '@/hooks/useRoutes'
import {
    
     appStore } from '@/store/app'

// 引入路由配置
import Router from './routers'

function App() {
    
    
    const {
    
     lang, config: {
    
     mode }, setTheme } = appStore()

    const getLocale = () => {
    
    
        switch(lang) {
    
    
            case 'en':
                return enUS
            case 'zh-CN':
                return zhCN
            case 'zh-TW':
                return zhTW
            default:
                return zhCN
        }
    }

    useEffect(() => {
    
    
        setTheme(mode)
    }, [])

    return (
        <ConfigProvider locale={
    
    getLocale()}>
            <HashRouter>
                <AuthRouter>
                    <Router />
                </AuthRouter>
            </HashRouter>
        </ConfigProvider>
    )
}

export default App

Insert image description here

Three layout templates are provided: column + vertical + horizontal.

/**
 * 主布局模板
 * @author Hs
*/

import {
    
     useMemo } from 'react'
import {
    
     appStore } from '@/store/app'

// 引入布局模板
import Columns from './template/columns'
import Vertical from './template/vertical'
import Transverse from './template/transverse'

function Layout() {
    
    
    const {
    
     config: {
    
     skin, layout } } = appStore()

    // 布局模板
    const LayoutComponent = useMemo(() => {
    
    
        switch(layout) {
    
    
            case 'columns':
                return Columns
            case 'vertical':
                return Vertical
            case 'transverse':
                return Transverse
            default:
                return Columns
        }
    }, [layout])
    
    return (
        <div className="radmin__container">
            <LayoutComponent />
        </div>
    )
}

export default Layout

Insert image description here

In summary, these are some sharings of the ultra-simplified version of the backend developed by react18 vite4 arco. I hope you like it.