从入门到放弃之react大盘点 [持续更新ing...]

一、创建 react 项目

1、安装

方式一：npm init react-app 项目名

方式二：yarn create react-app 项目名

方式三：npx create-react-app 项目名  【推荐：无需安装脚手架包就可以使用】

进入项目启动

cd 项目名

yarn start

二、配置路由

1、安装路由

yarn add react-router-dom@5.2.0 【常用版本，也可以不加】

2、配置 

五种路由模式

1、BrowserRouter：浏览器的路由方式【常用】

2、HashRouter：路径前有#号为哈希值，【优点：防止刷新找不到路径】

3、MemoryRouter：没有路由history，所有路由保存在内存里，也不能前进后退

4、NativeRouter：经常配合ReactNative使用，多用于移动端

5、StaticRouter：设置静态路由，需要和后台服务器配合设置，比如设置服务端渲染时使用 

这里我用 HashRouter 模式演示

我的页面

 快速创建页面结构快捷键：ref 或者 rcc，

前提：先安装react工具

router/index.js

import Index from "../views/index/index";
import Msg from "../views/msg/msg";
import  Error from "../views/error/error"; 
  const routes=[
    {
        path:'/',
        element:<Index />
    },
    {
        path:'/msg',
        element:<Msg />
    },
    {
        path:'/error',
        element:<Error/>
    }
]
export default routes

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HashRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HashRouter>
    <App />
  </HashRouter>
);

 App.js

import React from "react";
import { useRoutes, Link } from "react-router-dom";
import router from './router/index'
import './App.css'
function App() {
  return (
    <div className="App">
      <div className="list">
        <p className="msg"> <Link to="/msg">好消息</Link></p>
        <p> <Link to="/">首页</Link></p>
      </div>
      <div>{useRoutes(router)}</div>
    </div>
  );
}

export default App;

三、安装ant design 组件库

ui库地址：ant-design

1、安装命令

npm install antd --save

2、配置 App.js

import React from 'react';
import { Button } from 'antd';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

 

四、使用ant design布局

 

 1、创建页面和路由

2、引入Layout布局

 App.js

import React, { useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Button, theme } from 'antd';
const { Header, Sider, Content } = Layout;
const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={[
            {
              key: '1',
              icon: <UserOutlined />,
              label: 'nav 1',
            },
            {
              key: '2',
              icon: <VideoCameraOutlined />,
              label: 'nav 2',
            },
            {
              key: '3',
              icon: <UploadOutlined />,
              label: 'nav 3',
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
          }}
        >
          Content
        </Content>
      </Layout>
    </Layout>
  );
};
export default App;

tip:如果layout未占满全屏，设置样式即可

#root,html,body{
    width: 100%;
    height: 100%;
}
.ant-layout {
    display: flex;
    width: 100%;
    min-height: 100%;
}

五、设置动态导航菜单

import './App.css'
import './assets/css/normalize.css'
import './assets/css/reset.css'
import React, { useState } from 'react';
import { MenuFoldOutlined, MenuUnfoldOutlined, } from '@ant-design/icons';
import { useRoutes, useNavigate, } from 'react-router-dom'
import { Layout, Menu, Button, theme } from 'antd';
import router from "./router/index";
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const { token: { colorBgContainer } } = theme.useToken();
  let element = useRoutes(router)
  const navigate = useNavigate()
  const [defaultKey, setDefaultKey] = useState('')
  const handleClick = (e) => {
    navigate(e.key)
    setDefaultKey(e.key)
  };
  return (
    <Layout>
      <Sider trigger={'你好，少年'} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          mode="inline"
          onClick={handleClick}
          selectedKeys={[defaultKey]}
        >
          {
            // 分为多级菜单和单个菜单
            router.map(item => {
              if (item.children) {
                return <SubMenu key={item.path} title={item.mate.title}>
                  {
                    item.children.map(child => {
                      return <Menu.Item key={child.path}>{child.mate.title}</Menu.Item>
                    })
                  }
                </SubMenu>
              }
              return <Menu.Item key={item.path}>{item.mate.title}</Menu.Item>
            })
          }
        </Menu>
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
          }}
        >
          {/* 点击显示对应内容 */}
          {element}
        </Content>
      </Layout>
    </Layout>
  );
};
export default App;