快捷搭建一个react工程 TypeScript+SWC+Vite+React+Antd

参考文档

• Node.js -- v16+ 免费、开源、跨平台的 JavaScript 运行时环境
• React -- v18.3.1 构建 Web 和原生交互界面的库
• pnpm 节省磁盘空间，快速安装依赖工具
• Ant Design -- v5.20.1
• Vite -- v5.4.0 业界最优秀的 React 应用开发工具之一
• TypeScript -- v5.5.3
• SWC 超级快速的TypeScript和JavaScript编译器

使用Vite创建工程

安装命令

npm create vite antd-demo

终端选项

选择 React 和 TypeScript + SWC

✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

拉包

pnpm i

运行

pnpm run dev

引入 antd

antd 使用pnpm装起来很慢，大概用了3分钟

pnpm install antd --save

修改 src/App.tsx，引入 antd 的按钮组件。

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import { Button } from 'antd';
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
      <Button type="primary">这是一个Antd按钮</Button>
    </>
  )
}

export default App

项目已经搭建完成，下方内容属于进阶，完成项目工程一些必要的配置

必要配置引入

1. React Router

基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步

• 文档地址

（1）安装引入react-router-dom

pnpm install react-router-dom

React Router中的组件主要分为三类：

• 路由器，例如 BrowserRouter , HashRouter
• 路由匹配器： 例如Route , Switch
• 导航：例如Link, NavLink, Redirect

（2）创建文件夹

在src文件中分别创建router文件夹用来编写路由相关代码；view文件夹用来存放页面文件

（3）相关代码

• src->App.tsx

import React from "react";
import AppRouter from './router/index'

import './App.css'

function App() {
  return (
    <div className="App">  
      <AppRouter />  
    </div>  
  )
}


export default App

• src->router->index.tsx

import React from 'react';  
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';  
import HomePage from '../view/HomePage'; // 假设你有一个HomePage组件  
import AboutPage from '../view/AboutPage'; // 假设你有一个AboutPage组件  
  
const AppRouter = () => {  
  return (  
    <Router>  
      <Routes>  
        <Route path="/" element={<HomePage />} />  
        <Route path="/about" element={<AboutPage />} />  
      </Routes>   
    </Router>  
  );  
};  
  
export default AppRouter;

• src->view->HomePage.tsx

import React from 'react'; 
import { Button } from 'antd'; 
import { Link } from 'react-router-dom'; // 导入 Link 组件  
import { useNavigate } from 'react-router-dom'; 

function HomePage() {  
  const navigate = useNavigate();  
  const btnLink = {
    fontSize: '30px',
    padding: '30px'
  }
  return (
    <>
      <h1>Welcome to the Homepage!</h1>
      <div style={{'color':'#aaa'}}>使用 Link 组件创建链接到 AboutPage</div>
      <Link style={btnLink} to="/about">进入About</Link>  
      
      <div style={{'color':'#aaa'}}>使用 useNavigate 钩子,编程式导航</div>
      <Button style={btnLink} onClick={() => {navigate('/about')}}>进入About</Button>
    </>
  );  
}
  
export default HomePage;

• src->view->AboutPage.tsx

import React from 'react';  
import { Button } from 'antd'; 
import { Link } from 'react-router-dom'; // 导入 Link 组件 
import { useNavigate } from 'react-router-dom'; 
  
function AboutPage() { 
  const navigate = useNavigate();  
  const btnLink = {
    fontSize: '30px',
    padding: '30px'
  }
  return (
    <>
      <h1>About Us</h1>; 
      <div style={{'color':'#aaa'}}>使用 Link 组件创建链接到 AboutPage</div>
      <Link style={btnLink} to="/">返回首页</Link>  
      
      <div style={{'color':'#aaa'}}>使用 useNavigate 钩子,编程式导航</div>
      <Button style={btnLink} onClick={() => {navigate('/')}}>返回首页</Button> 
    </>
    
  ) 
}  
  
export default AboutPage;

2. Redux

用于JavaScript应用的状态容器，提供可预测化的状态管理。虽然Redux不是专门为React设计的，但它与React的结合非常紧密，并被广泛用于React应用的状态管理中。

（1） 安装Redux

pnpm install redux react-redux @reduxjs/toolkit 

// 基于Redux的工具包，提供了更简单的API和最佳实践
pnpm install --save-dev @types/react-redux

// 使用Redux DevTools来跟踪和调试Redux的状态变化
pnpm install redux-devtools-extension

3. 如果项目中使用process.env.NODE_ENV

安装后直接能用

pnpm install --save-dev @types/node

推荐框架

1. slash-admin

• 文档地址
• 预览地址

一款现代化的后台管理模板，基于 React 18、Vite、Ant Design 和 TypeScript 构建。它旨在帮助开发人员快速搭建功能强大的后台管理系统。

2. react-admin

• 文档地址
• 预览地址

标准后台管理系统解决方案，react18、router6、rematch、antd4、vite4、ES6+;
动态菜单配置，权限精确到按钮

3. ruoyi-react

• 文档地址
• 预览地址

前端采用React 17、Ant Design Pro 5、TypeScript。后端采用Spring Boot、Spring Security、Redis & Jwt。权限认证使用Jwt，支持多终端认证系统。支持加载动态权限菜单，多方式轻松权限控制。