IT飞牛

React+Antd+Vite+TypeScript 项目实战教程

本教程属于react入门教程，课程围绕如何搭建一个项目框架展开，会带你快速了解react、redux、redux-devtool、react-router-dom、axiox这些常见技术的使用方式，教程最后会附上项目源码。

一、创建项目

在搭建项目时，我们通常会使用cli工具来搭建，方便、快捷、高效，一行命令就能生成一个完整的脚手架项目，这里我们使用 vite 来创建一个 react+vite+typescript 项目；Vite官网地址

初始化命令

npm init vite
//或者
yarn create vite

项目名称
选择框架
只支持Vue3
选择语言
安装依赖并启动

cd react-vite-project
npm install
npm run dev

启动完成后，控制台打印如下：

打开：http://localhost:5173

二、目录结构

按照不同的功能，一般会把项目按照下面的结构来划分：

项目目录：
├─node_modules		//第三方依赖
├─public			//静态资源（不参与打包）
└─src
    ├─assets		//静态资源
    ├─components	//组件
    ├─config		//配置
    ├─http			//请求方法封装
    ├─layout		//页面布局
    ├─pages			//页面
    ├─routes		//路由
    ├─service		//请求
    ├─store			//状态管理
    └─util			//通用方法
    └─App.css
    └─App.tsx
    └─index.css
    └─main.tsx
    └─vite-env.d.ts
├─.eslinttrc.cjs
├─.gitignore		
├─index.html		//项目页面总入口
├─package.json	
├─tsconfig.json		//ts配置文件
├─tsconfig.node.json
├─vite.config.ts	//vite配置文件

三、支持scss

下载

npm i sass -D

创建assets/styles/index.scss文件

$red:red;

引入index.scss文件

//打开vite.config.ts,添加scss的预编译选项
export default defineConfig({
  ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./assets/styles/index.scss";`
      },
    }
  }
})

调用

//1、修改App.css > App.scss
//2、添加scs语法设置字体颜色
h1{
  color:$red;
}
//3、修改引入的文件名
//import './App.css'
修改为：
import './App.scss'

最终效果如下：

四、useState钩子

1、useState 案例

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    
      You clicked {count} times
      
    
  );
}

2、同上功能的Class写法

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      
        You clicked {this.state.count} times
        
      
    );
  }
}

官网说明：Using the State Hook

五、路由

1、下载

npm install react-router-dom -S
//npm i @types/react-router-dom	//默认是带代码提示的（非必须）

2、HashRouter路由

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { HashRouter as Router } from 'react-router-dom';
import './index.css'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  
    
      
    
  ,
)

App.tsx

import { useState } from 'react'
import { HashRouter, Route, Routes, Link, useNavigate } from "react-router-dom";
import Login from "./pages/login";
import Home from "./pages/home";
import User from "./pages/user";
import './App.scss'

function App() {
  const [count, setCount] = useState(0)
  const navigate=useNavigate();
  return (
      
      {/* 指定跳转的组件，to 用来配置路由地址 */}
      首页

      用户

      
      {/* 路由出口：路由对应的组件会在这里进行渲染 */}
      
        {/* 指定路由路径和组件的对应关系：path 代表路径，element 代表对应的组件，它们成对出现 */}
        }>
        }>
        }>
      
    
  )
}

export default App

login.tsx + home.tsx + user.tsx

//login.tsx
function Login() {
    return (
        <div>login页面</div>
    );
}
export default Login;

//home.tsx
function Home() {
    return (
        <div>home页面</div>
    );
}
export default Home;

//user.tsx
function User() {
    return (
        <div>user页面</div>
    );
}
export default User;

这时候，打开http://localhost:5173/，如图：

3、BrowserRouter路由

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  
    
      
    
  ,
)

App.tsx

import { useState } from 'react'
import { Route, Routes, Link, useNavigate } from 'react-router-dom';

import Login from "./pages/login";
import Home from "./pages/home";
import User from "./pages/user";
import './App.scss'

function App() {
  const navigate = useNavigate();
  return (
    
      {/* 指定跳转的组件，to 用来配置路由地址 */}
      首页

      用户

      
      {/* 路由出口：路由对应的组件会在这里进行渲染 */}
      
        {/* 指定路由路径和组件的对应关系：path 代表路径，element 代表对应的组件，它们成对出现 */}
        }>
        }>
        }>
      
    
  )
}

export default App

这时候，打开http://localhost:5173/，如图

4、嵌套路由

App.tsx

import { useState } from 'react'
import { Route, Routes, Link, useNavigate } from 'react-router-dom';

import Login from "./pages/login";
import Home from "./pages/home";
import User from "./pages/user";
import './App.scss'

function App() {
  const navigate = useNavigate();
  return (
    
      {/* 指定跳转的组件，to 用来配置路由地址 */}
      首页

      用户

      
      {/* 路由出口：路由对应的组件会在这里进行渲染 */}
      
        {/* 指定路由路径和组件的对应关系：path 代表路径，element 代表对应的组件，它们成对出现 */}
        }>
          }>
          }>
        
      
    
  )
}

export default App

home.tsx

import { Outlet } from "react-router-dom";
function Home() {
    return (
        
            home页面
            
        
    );
}

export default Home;

页面显示如下：

5、默认子级路由

在嵌套路由下的子级路由，如果我们要设置一个默认路由，那么只要在路由上添加index属性。


    }>
        }>
        }>

6、重定向

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

}>

在做权限验证的时候我们可以使用重定向，如果已经登录则进入主页，没有登录则进入登录页面。

7、useRoutes路由配置

上面的路由我们都是在App.tsx中手动写，不太方便，实际项目中我们的路由会在配置文件中统一配置，这时候我们可以使用useRoutes来实现路由配置；

App.tsx

import GetRoutes from "@/routes/index";
function App() {
  return (
    
  )
}
export default App

/routes/index.tsx

import { useRoutes, Navigate, RouteObject } from "react-router-dom";

import Layout from "@/layout/index";
import Login from "@/pages/login";
import Home from "@/pages/home";
import User from "@/pages/user";

export const router_item: Array