React通用后台模板

一、项目初始化

1、创建项目

环境

npm init vite  // 创建项目

打开package.json，参考以下各模块版本：

"dependencies": {    
    "react": "^18.2.0",    
    "react-dom": "^18.2.0",    
    "react-redux": "^7.2.8",    
    "react-router-dom": "^6.3.0",    
    "redux": "^4.1.2"
},
"devDependencies": {
   "vite": "^4.4.5", // 解决vite版本过高，下载包文件出错
   "redux-thunk": "^2.4.2",  // 需要redux-thunk版本与redux相匹配
}

下载后进入到项目文件夹，安装package.json中的包：

npm i

尝试更改package.json启动命令：

"scripts": {    
    "dev": "vite --host --port 3002",    
    "build": "tsc && vite build",    
    "preview": "vite preview"
}

2、项目目录初始化

删除 src 下除了main.tsx和App.tsx的其他文件；主文件src/main.tsx修改成：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
ReactDOM.createRoot(document.getElementById('root')!).render(  
    <React.StrictMode>    
        <App />  
    </React.StrictMode>
)

App.tsx文件修改成：

import { useState } from 'react'
function App() {  
const [count, setCount] = useState(0)  
    return (    
        <div className="App"> 
            顶级组件    
        </div>  
    )
}

export default App

3、样式初始化

reset-css比Normalize.css更直接，干净利落去除默认样式，更适合在企业里的场景，所以用reset-css，而不用Normalize.css】

npm i reset-css

在src/main.tsx中引入reset-css：

import React from 'react'
import ReactDOM from 'react-dom/client'
import "reset-css"
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(  
    <React.StrictMode>    
        <App />  
    </React.StrictMode>
)

4、scss的安装和初步使用

安装sass   vite中很方便，loader这些都不用自己配置，只需要安装好即可使用npm i --save-dev sass

src下新建 assets/styles/global.scss：

$color:#eee;
body{
    // 禁止选中文字    
    user-select:none;    
    background-color: $color;
}
img{    
    // 禁止拖动图片    
    -webkit-user-drag:none;
}

main.tsx中引入全局样式

import React from 'react'
import ReactDOM from 'react-dom/client'
import "reset-css"
import "./assets/styles/global.scss"
import App from './App'


ReactDOM.createRoot(document.getElementById('root')!).render(  
    <React.StrictMode>    
        <App />  
    </React.StrictMode>
)

5、配置项目路径别名

// vite.config.ts
import path from 'path'

export default defineConfig({  
    plugins: [react()],  
    resolve:{    
        alias:{      
            "@":path.resolve(__dirname,'./src')    
        }  
    }
})

这时候引入的会path模块报红，但其实我们已经有node，所以就已经有path模块，只是缺少ts的一些声明配置。所以需要安装关于node这个库的ts声明配置

npm i -D @types/node

安装成功就没有报红了,如果import后面的path报红，就把引入换成 import * as path from'path';

配置路径别名的提示

虽然现在路径别名已经有了，但是在文件中输入@是没有提示路径的需要我们在tsconfig.json中：添加两项配置

"compilerOptions": {
    ...    
    "baseUrl": "./",    
    "paths": {      
        "@/*": [
            "src/*"      
        ]    
    }
},

6、scss模块化

src下新建components文件夹,components文件夹下新建Comp1文件夹，新建index.tsx和comp1.scss

import "./comp1.scss"
function Comp() {
  return (
    <div className="box">
        <p>这是Comp1里面的组件</p>
    </div>
 )
}
export default Comp

src/components/Comp1/comp1.scss中：

.box{
    color:red
}

components文件夹下新建Comp2文件夹，新建index.tsx:

// ！！！注意，在Comp2组件中不引入上面的comp1.scss样式
function Comp() {
  return (
    <div className="box">
        <p>这是Comp2里面的组件</p>
    </div>
 )
}
export default Comp

在App.tsx中使用这两个组件：

import { useState } from 'react'
import Comp1 from "./components/Comp1"
import Comp2 from "./components/Comp2"
function App() {
  const [count, setCount] = useState(0)
  return (
    <div className="App">
      <Comp1></Comp1>
      <Comp2></Comp2>
    </div>
 )
}
export default App

此时会发现，Comp2/index.tsx中没有引入comp1.scss竟然也有box的样式！！！

说明Comp1的引入comp1.scss就是全局引入，这不是我们要的现象，所以这时候我们就需要用到模块 化css

scss的模块化

src/components/Comp1/comp1.scss 改名为 comp1.module.scss

在Comp1/index.sx中：

// 修改引入的语句
import styles from "./comp1.module.scss";
function Comp() {
  return (
      // 修改类名编程模块化写法
    <div className={styles.box}>
        <p>这是Comp1里面的组件</p>
    </div>
 )
}
export default Comp

这样就不会影响其他组件了。注意：styles.box 的 box 在 .module.scss 文件中只能是类名，标签名字不起作用

7、Antd Design初步引入

安装Antd Design

npm install antd --save

安装图标所需要的模块

npm install @ant-design/icons --save

App组件中引入即可使用：

import { useState } from 'react'
import { Button } from 'antd';
import {FastBackwardOutlined} from "@ant-design/icons"
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
function App() {
  const [count, setCount] = useState(0)
  return (
    <div className="App">
     顶级组件
      <Button  type="primary">按钮文字</Button>
      <FastBackwardOutlined style={
  { fontSize: '40px', color: '#08c' }}/>
    </div>
 )
}
export default App

ps: 如果你的vscode不兼容jsx语法提示：请打开vscode配置文件，补充：

"emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
}

8、React路由

第一种配置方案（旧项目中的写法）

【1. 准备界面】首先src下创建views文件夹，views文件夹下创建Home.tsx和About.tsx，大致代码如 下：

function View() {
    return (
        <div className="home">
            <p>Home</p>
        </div>
   )
}
export default View

【2. 配置对应关系】/src下新建router文件夹，再进去新建index.tsx

import App from "../App"
import Home from "../views/Home"
import About from "../views/About"
import {BrowserRouter,Routes,Route} from "react-router-dom"
// 两种路由模式的组件： BrowserRouter ( History模式 ) ， HashRouter( Hash模式 )
// const baseRouter = () => {
//     return ()
// }

// 以上写法可以简写为：
const baseRouter = () => (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<App/>}>
                <Route path="/home" element={<Home/>}></Route>
                <Route path="/about" element={<About/>}></Route>
            </Route>
        </Routes>
    </BrowserRouter>
)
export default baseRouter

【3. 替换顶级组件】在/src/main.tsx中把顶级组件App替换为这个路由对象：

// 引入路由对象
import Router from './router';
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>
)

【4. 添加窗口组件】/src/App.tsx中，使用 组件作为占位符组件：

import {Outlet} from "react-router-dom";
function App() {
  //const [count, setCount] = useState(0)
  return (
    <div className="App">
     {/* 占位符组件，窗口，有点类似于Vue中的 router-view */}
      <Outlet />
    </div>
 )
}
export default App

这样就可以在浏览器中访问，下面的地址看到页面了：

        http://localhost:3002/home

        http://localhost:3002/about

【5. 编程式导航】--设置菜单点击跳转

/src/App.tsx中，使用 组件进行跳转：

import {Outlet,Link} from "react-router-dom"
...
<div className="App">
    <Link to="/home">home</Link> |
    <Link to="/about">about</Link>
   {/* 占位符组件，窗口，有点类似于Vue中的 router-view */}
    <Outlet />
</div>

【6. 配置重定向】

/src/router/index.tsx中：

import {BrowserRouter,Routes,Route,Navigate} from "react-router-dom"
...
<Route path="/" element={<App/>}>
   {/* 配置 用户访问/的时候，重定向到/home路径 */}
    <Route path="/" element={<Navigate  to="/home" />}></Route>
   ...
</Route>

路由表的写法

和上面一样，在这里模拟vue中的home和about两个组件展示

【1、准备界面】在上面已经完成

【2、配置对应关系】/src/router/index.tsx中：

import Home from "../views/Home"
import About from "../views/About"
// Navigate 重定向组件
import {Navigate} from "react-router-dom"
const routes = [
   {
        path:"/",   //重定向到home
        element:<Navigate  to="/home" />,
   },
   {
        path:"/home",
        element:<Home/>,
   },
   {
        path:"/about",
        element:<About/>,
   }
    // { path: "*", element: <Navigate to="/" /> }, 
]
export default routes

【3、路由组件的添加】在/src/main.tsx中在顶级组件App外层添加路由组件：

...
// 路由
import { BrowserRouter } from "react-router-dom"