创建项目

npx create-react-app my-app
cd my-app
npm start

hook

• 官方
• 官方 Hook API 索引

路由

路由上下文

// 路由组件
import { Outlet } from "react-router-dom";
const [text, setText] = useState(value);
<Outlet context={[text, setText]} />;
// 子组件
import { useOutletContext } from "react-router-dom";
const [text, setText] = useOutletContext();

MUI

• material-icons
• 调色板
• 主题

格栅 https://mui.com/zh/components/grid/

<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
</Box>
<Grid container spacing={2}>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
  <Grid item xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid item xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
</Grid>

Stack 堆叠 https://mui.com/zh/components/stack/

<Stack spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

Data Grid https://mui.com/zh/components/data-grid/columns/

<DataGrid
  columns={[{ field: "username" }, { field: "age" }]}
  rows={[
    {
      id: 1,
      username: "@MUI",
      age: 20,
    },
  ]}
/>

Button https://mui.com/zh/components/buttons/

<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>

<ButtonGroup variant="contained" aria-label="outlined primary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

TextField 文本框 https://mui.com/zh/components/text-fields/

<TextField id="outlined-basic" label="Outlined" variant="outlined" />
<TextField id="filled-basic" label="Filled" variant="filled" />
<TextField id="standard-basic" label="Standard" variant="standard" />