整个material ui的案例先整javascript的,此教程会包含react和mui的基础知识，后面有需要再搞搞typescript.

先贴一下文档

react官方中文文档：https://react.docschina.org/docs/getting-started.html

material ui官方文档：https://mui.com/zh/material-ui/getting-started/overview/

react 路由：https://react-router.docschina.org/

0.基础总结

虚拟dom:通过虚拟dom和真实dom的对比，减少渲染的内容，稍微注意key的使用

jsx:组件都写在jsx里面，普通js写在js文件里面，甚至css in js，彻底js化了，这也是和vue最大的区别

组件：一切皆组件，css,图片，文件都是组件，官方推荐用函数式组件

hook：官方推荐用函数式组件,那就必须使用钩子函数，useState，useEffect等钩子

路由：这个都查不多

redux：有必要吧，像vue的store

组件通信：props,状态提升，context,pubsub等

1.material ui是什么

material ui是半官方的react ui组件库，比antd使用的人更多，但是国内使用antd的人多。

Material UI 是一个开源的 React 组件库，它实现了 Google 的Material Design。

2.搭建react框架

npm install create-react-app yarn -g
create-react-app stack-mui
cd stack-mui
yarn start

会自动弹出浏览器访问http://localhost:3000/

3.安装mui

#安装mui和样式库
yarn add @mui/material @emotion/react @emotion/styled
#安装字体
yarn add @fontsource/roboto
#安装图标
yarn add @mui/icons-material

yarn add @mui/lab

安装redux

yarn add redux

yarn add react-redux

yarn add @reduxjs/toolkit

4.创建material ui基础组件

先创建一些基础页面组件用来测试，后面再慢慢完善这些基础组件，先全部显示出来

4.1创建主界面viewport

import React from 'react';
import Box from '@mui/material/Box';

import Navigation from '../navigation';
import MainTabs from '../mainTabs';


export default function Viewport() {

    const [activeMenu, setActiveMenu] = React.useState({});

    const transActiveMenu=(menu)=>{
        setActiveMenu(menu);
    }

    return (
        <Box sx={{display: 'flex', width: '100vw', height: '100vh'}}>
            <Navigation transActiveMenu={transActiveMenu} style={{width: '250px', border: 'solid 1px #ddd'}}></Navigation>
            <MainTabs activeMenu={activeMenu} style={{width: 'calc(100vw - 250px)'}}></MainTabs>
        </Box>
    );
}

然后在app中引用


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

import logo from './logo.svg';
import './App.css';

import Viewport from './views/viewport';

import {menuSlice} from "./redux/store"



function App() {
  return (
    <BrowserRouter>
      <Viewport></Viewport>
    </BrowserRouter>
  );
}

export default App;

4.2导航菜单

import React from 'react';
import MenuItem from "./MenuItem";
import List from '@mui/material/List';

import StarBorder from '@mui/icons-material/StarBorder';
import AppBar from '@mui/material/AppBar';
import Typography from '@mui/material/Typography';
import MenuIcon from '@mui/icons-material/Menu';
import IconButton from '@mui/material/IconButton';
import Toolbar from '@mui/material/Toolbar';
import AdbIcon from '@mui/icons-material/Adb';
import Box from '@mui/material/Box';


export default function Navigation(props) {
    const {style,transActiveMenu}=props;

    const menuData = [{
        id: 1, title: "主页", icon: "MoveToInbox", url: "/"
    }, {
        id: 2, title: "系统管理", icon: "Drafts",
        child: [{
            id: 21, title: "用户管理", icon: "Send", url: "/system/user"
        }, {
            id: 22, title: "菜单管理", icon: "ExpandLess", url: "/system/menu"
        }]
    }, {
        id: 3, title: "系统工具", icon: "ExpandMore",
        child: [{
            id: 31, title: "系统监控", icon: "StarBorder", url: "/tools/monitor",
            child: [{
                id: 131, title: "日志监控", icon: "Airplay", url: "/tools/monitor/LogMonitor"
            }]
        }]
    }]


    const [menuCollapse, setMenuCollapse] = React.useState({});
    const [activeMenu, setActiveMenu] = React.useState(0);

    const handlerClick = (menu) => {
        menuCollapse[menu.id] = !menuCollapse[menu.id];
        setMenuCollapse({...menuCollapse});
        setActiveMenu(menu);
        transActiveMenu(menu);
    }

    return (
        <List sx={style}
            component="nav"
            aria-labelledby="nested-list-subheader"
            subheader={
                <Box>
                    <AppBar position="static">
                        <Toolbar variant="dense">
                            <AdbIcon sx={{display: {xs: 'none', md: 'flex'}, mr: 1}}/>
                            <Typography color="inherit" component="div" sx={{flexGrow: 1}}>
                                MUI案例系统
                            </Typography>
                            <div>
                                <IconButton edge="end" color="inherit" aria-label="menu">
                                    <MenuIcon/>
                                </IconButton>

                            </div>
                        </Toolbar>
                    </AppBar>


                </Box>
            }
        >

            <MenuItem items={menuData} menuCollapse={menuCollapse} activeMenu={activeMenu} handlerClick={handlerClick}></MenuItem>

        </List>
    );
}

import React from 'react';
import {IconsMap} from "../../components/iconList";
import {ExpandMore,ExpandLess} from '@mui/icons-material';
import {Collapse,List,ListItemButton,ListItemText,ListItemIcon} from '@mui/material';
import {NavLink} from "react-router-dom";

function createMenuList(menuItems,menuCollapse,activeMenu,handlerClick,level){
    return menuItems.map(currentMenu => {
        const {id,title,icon,child,url} = currentMenu;
        const toUrl=url?url:"/";
        const IconTag=IconsMap[icon];
        const hasChild=child && child.length>0;

        const childMenus=hasChild?createMenuList(child,menuCollapse,activeMenu,handlerClick,level+1):null;

        const listItem=(
            <ListItemButton selected={id===activeMenu.id} sx={{pl: level*2}} onClick={() => handlerClick(currentMenu)}>
                <ListItemIcon >
                    <IconTag></IconTag>
                </ListItemIcon>
                <ListItemText primary={title}/>
                {hasChild?(menuCollapse[id]? <ExpandLess/> : <ExpandMore/>):<React.Fragment/>}
            </ListItemButton>
        )

        return (
            <React.Fragment key={id}>
                {hasChild?listItem:
                    <NavLink style={{textDecoration: 'none', color: 'inherit'}} to={toUrl} >
                        {listItem}
                    </NavLink>
                }

                {hasChild &&
                <Collapse in={menuCollapse[id]}>
                    <List component="div" disablePadding>
                        {[...childMenus]}
                    </List>
                </Collapse>
                }
            </React.Fragment>
        );
    })
}



{/*<MenuList/>*/}
{/*<ListItemButton>*/}
{/*    <ListItemIcon>*/}
{/*        <SendIcon/>*/}
{/*    </ListItemIcon>*/}
{/*    <ListItemText primary="主页"/>*/}
{/*</ListItemButton>*/}

{/*<ListItemButton onClick={() => handlerCollapse("xtgl")}>*/}
{/*    <ListItemIcon>*/}
{/*        <StarBorder/>*/}
{/*    </ListItemIcon>*/}
{/*    <ListItemText primary="系统管理"/>*/}
{/*    {menuCollapse["xtgl"] ? <ExpandLess/> : <ExpandMore/>}*/}
{/*</ListItemButton>*/}
{/*<Collapse in={menuCollapse["xtgl"]} timeout="auto" unmountOnExit>*/}
{/*    <List component="div" disablePadding>*/}
{/*        <NavLink style={{textDecoration: 'none', color: 'inherit'}} to="/system/user">*/}
{/*            <ListItemButton sx={{pl: 4}} selected>*/}
{/*                <ListItemIcon>*/}
{/*                    <AccountBoxIcon/>*/}
{/*                </ListItemIcon>*/}

{/*                <ListItemText primary="用户管理"></ListItemText>*/}

{/*            </ListItemButton>*/}
{/*        </NavLink>*/}
{/*        <ListItemButton sx={{pl: 4}}>*/}
{/*            <ListItemIcon>*/}
{/*                <ReorderIcon/>*/}
{/*            </ListItemIcon>*/}
{/*            <ListItemText primary="菜单管理"/>*/}
{/*        </ListItemButton>*/}
{/*    </List>*/}
{/*</Collapse>*/}
{/*<ListItemButton onClick={() => handlerCollapse("xtgj")}>*/}
{/*    <ListItemIcon>*/}
{/*        <AirplayIcon/>*/}
{/*    </ListItemIcon>*/}
{/*    <ListItemText primary="系统工具"/>*/}
{/*    {menuCollapse["xtgj"] ? <ExpandLess/> : <ExpandMore/>}*/}
{/*</ListItemButton>*/}
{/*<Collapse in={menuCollapse["xtgj"]} timeout="auto" unmountOnExit>*/}
{/*    <List component="div" disablePadding>*/}
{/*        <ListItemButton sx={{pl: 4}}>*/}
{/*            <ListItemIcon>*/}
{/*                <AdbIcon/>*/}
{/*            </ListItemIcon>*/}
{/*            <ListItemText primary="系统监控"/>*/}
{/*        </ListItemButton>*/}

{/*        <Collapse in={menuCollapse["xtgj"]} timeout="auto" unmountOnExit>*/}
{/*            <List component="div" disablePadding>*/}
{/*                <ListItemButton sx={{pl: 8}}>*/}
{/*                    <ListItemIcon>*/}
{/*                        <AdbIcon/>*/}
{/*                    </ListItemIcon>*/}
{/*                    <ListItemText primary="系统监控"/>*/}
{/*                </ListItemButton>*/}
{/*            </List>*/}
{/*        </Collapse>*/}

{/*        <ListItemButton sx={{pl: 4}}>*/}
{/*            <ListItemIcon>*/}
{/*                <AdbIcon/>*/}
{/*            </ListItemIcon>*/}
{/*            <ListItemText primary="系统监控"/>*/}
{/*        </ListItemButton>*/}
{/*    </List>*/}
{/*</Collapse>*/}


export default function MenuItem(props){
    return createMenuList(props.items,props.menuCollapse,props.activeMenu,props.handlerClick,0);
}

4.3 maitabs

import React from "react";
import {Box,Tabs,Tab} from '@mui/material';
import TabContext from '@mui/lab/TabContext';
import TabPanel from '@mui/lab/TabPanel';
import Typography from '@mui/material/Typography';

import Dashboard from '../dashboard';
import Menu from '../system/menu';
import User from '../system/user';
import SystemMonitor from '../tools/systemMonitor';

import {Routes, Route} from 'react-router-dom'
import { useLocation } from "react-router";




import Close from '@mui/icons-material/Close';

import Send from '@mui/icons-material/Send';

export default function MainTabs(props) {
    //props
    const {style,activeMenu} = props;


    //state
    const [tabsValue, setTabsValue] = React.useState("1");
    const [tabsList, setTabsList] = React.useState([
        {title:"主页",id:1,url:"/",closeAble:false}
    ]);

    const handleChange = (event, newValue) => {
        setTabsValue(`${newValue}`);
    };


    //event
    const location = useLocation();
    React.useEffect(() => {
        const url=location.pathname;
        addTabByMenu(url);
    }, [location]);

    //function
    const addTabByMenu=(url)=>{
        if(activeMenu&&activeMenu.url===url){
            const isExitTab=tabsList.some(tab=>tab.id===activeMenu.id)
            const newTablsValue=`${activeMenu.id}`;
            if(isExitTab){
                if(tabsValue!==newTablsValue){
                    setTabsValue(newTablsValue);
                }
            }else{
                tabsList.push({...activeMenu,closeAble:true})
                setTabsList([...tabsList]);
                setTabsValue(newTablsValue);
            }
        }
    }

    //todo 出问题了 菜单信息必须放全局，组件路由，否则路由刷新的时候找不到tab的名称

    const closeTab = (tabId)=>{
        tabsList.some((item,i)=>{
            if(item.id===tabId){
                tabsList.splice(i,1);
                // setTabsValue(newTablsValue);
                // setTabsList([...tabsList]);
            }
        })
    }



    return (
        <Box sx={style}>
            <TabContext value={tabsValue}>
                <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
                    <Tabs
                        value={tabsValue}
                        onChange={handleChange}
                        variant="scrollable"
                        scrollButtons="auto"
                    >
                        {/*<Tab label="主页" style={{minHeight:'48px'}} value="0" iconPosition="end" icon={<Close onClick={()=>{alert(1)}} fontSize="small"/>} />*/}
                        {
                            tabsList.map(oneTab=>{
                                return (<Tab key={oneTab.id} label={oneTab.title}  value={`${oneTab.id}`} icon={oneTab.closeAble?<Close onClick={()=>{closeTab(oneTab.id)}} fontSize="small"/>:<React.Fragment />} style={{minHeight:'48px'}}  iconPosition="end" />)
                            })
                        }


                    </Tabs>
                </Box>
                <TabPanel value="0"><Dashboard /></TabPanel>
            </TabContext>
        </Box>
    );
}

看一下效果

代码结构

接下来我要使用路由，实现点击菜单，在tabs上添加对应的界面

5.react 路由

5.1安装路由组件

yarn add react-router-dom

4.2创建路由表

在src路径下面创建routes文件夹，然后下面创建index.jsx

import { useRoutes } from 'react-router-dom';

import Viewport from './views/Viewport';
import Dashboard from '../Dashboard';
import Menu from '../system/Menu';
import User from '../system/User';
import SystemMonitor from '../tools/SystemMonitor';

export default function Routes() {
    return useRoutes([{
        path: '/',
        element: <Viewport />,
        children: [{
            path: 'dashboard',
            element: <Dashboard />
        },{
            path: 'system',
            children: [{
                path: 'user',
                element: <User />
            },{
                path: 'menu',
                element: <Menu />
            }]
        },{
            path: 'tools',
            children: [{
                path: 'systemMonitor',
                element: <SystemMonitor />
            }]
        }]
    }]);
}

react material ui完整教程（jsx）