React项目笔记-环境搭建、路由封装（跳转Navigate、懒加载lazy）、模块化样式引入、状态管理react-redux以及蓝浏览插件reduxdevtools

环境准备

node 
v16.15.0
npm
8.5.5

Ant Design of React:
https://ant.design/docs/react/introduce-cn

一，创建项目

npm init vite

√ Project name: ... vite-project-react
√ Select a framework: » React
√ Select a variant: » TypeScript

然后使用vscode 打开项目，由于后续需要使用到redux（状态管理）、router（路由），所以先手动添加到package.json中

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "8.1.2",
    "react-router-dom": "6.15.0",
    "redux": "4.2.1"
  },

打开终端

npm install

启动项目

npm run dev

启动脚本根据需要可以稍作调整

 

 与在vite.config.ts中配置server是一样的 ：

二，样式初始化

使用reset-css

npm i reset-css

在main.tsx 中引入 reset-css

注意：样式的引入顺序为：

//初始化样式
//UI框架样式
//组件样式

 三，安装sass

npm i --save-dev sass

四，路径别名的配置

一版情况 @ 符号表示src文件夹，但初始的vite不认，需要进行路径别名的配置。

  import path from "path"
  resolve:{
    alias:{
      "@":path.resolve(__dirname,"./src")
    }
  }

此时“path”会报红，需要安装node库的ts声明配置。（其实path是有的，已经安装了node，path肯定是有的，只是缺少配置）

npm i -D @types/node

配置路径别名的提示：输入@后，自动跟出目录。在tsconfig.json中

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

五，样式的模块化引入

样式命名为xxx.module.scss。注意使用的时候使用 { }

//此种方式为全局引入，组件内部不能使用
//import "./comp1.scss"

//模块化引入(样式文件重命名为comp1.module.scss)
import styles from "./comp1.module.scss"

function Comp(){
    return (
        <div className={styles.box}>
            <p>这事Comp1的内容</p>
        </div>
    )
}
export default Comp;

六，ant design 引入 (此时 antd  使用的是5.85的版本)

官网连接：https://ant.design/docs/react/introduce-cn

安装

npm install antd --save

使用

此版本已不再需要引入antd.css了，直接引入组件，使用组件即可，比如在App.tsx组件中引入一个button：

import { Button, Space } from 'antd';
function App() {
  return (
    <>
      顶级目录      
      <Button>test</Button>
    </>
  )
}

export default App

icon图标需要单独安装

npm install @ant-design/icons --save

使用

import {
  HomeOutlined,
  LoadingOutlined
} from '@ant-design/icons';

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

  return (
    <>
      顶级目录
      <HomeOutlined />
      <LoadingOutlined/>
    </>
  )
}

export default App

 七，路由的封装
　　重定向 使用：Navigate
　　懒加载 使用：lazy，且需要包在loading提示组件中。

　　路由文件中代码如下：
　　

import {Navigate} from "react-router-dom"
import React,{lazy} from "react"
import Home from "../views/Home"
const About= lazy(()=>import("../views/About"));

//懒加载模式的组件写法，外面需要套一层loading 的提示加载组件
const withLoadingComponent=(comp:JSX.Element)=>{
    return <React.Suspense fallback={<div>loading...</div>}>
            {comp}
            </React.Suspense> 
}
const routes=[
    {
        path:"/",
        element:<Navigate to="/home"/>
    },
    {
        path:"/home",
        element:<Home/>
    },
    {
        path:"/about",    
        element:withLoadingComponent(<About/>)   
    }
]

export default routes;

　　使用方法：
　　1，main.ts中：要使用 BrowserRouter

import React from 'react'
import ReactDOM from 'react-dom/client'
import  {BrowserRouter} from "react-router-dom"
//初始化样式
import "reset-css"
import App from './App.tsx'

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

　　2，App组件中:

　　　使用 useRoutes 

import {useRoutes, Link} from "react-router-dom"
import router from  "./router"

function App() {
  const outlet = useRoutes(router);
  return (
    <>

　　　　　{/* 此处的link只是为了做菜单直观点击，其实不是路由实现的必须，在url中直接改变路由已经可以实现切换啦 */}

      <Link to="/home">Home</Link>
      <Link to="about">About</Link>


　　　　{/* 有这句即可 */}
      {outlet}
    </>
  )
}

export default App

 八，状态管理 react-redux 的使用

1，浏览器安装reduxdevtools

下载地址：https://www.chajian5.com/download?pid=3034。安装包中有方法说明。

2.项目中的应用

1）安装 redux 和 react-redux。

 2）src下创建store 文件夹，store文件夹下创建index.ts 文件。内容如下：

import {legacy_createStore} from "redux";
import reducer from "./reducer.ts";

//创建数据仓库，后两个参数目的是为了在浏览器中使用redux

const store =legacy_createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

为了让浏览器正常使用reduxdevtools，增加window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()参数，

浏览器中效果如下

  

3）store文件夹下创建reducer.ts 文件，内容如下：

const defaultState={
    num:20,
    num3:20,
}

//action 中参数，type 是字符串，固定参数，val 是自定义参数，可以起其它名字
let reducer = (state=defaultState,action:{type:string,val:number})=>{
    //当执行dispatch时，就走此方法
    let newState=JSON.parse(JSON.stringify(state));

    switch (action.type) {
        case "add":
            newState.num++;
            break;
        case "add1":
            newState.num3+=action.val;
            break;
        default:
            break;
    }

    return newState;
}

export default reducer;

4）main.tsx下引入状态管理

//状态管理
import {Provider} from "react-redux";
import store from "@/store";

ReactDOM.createRoot(document.getElementById('root')!).render(
    {/*状态管理包裹在外层 */}
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
)

 5）具体组件中获取，比如Page1.tsx中

获取参数数据使用useSelector 这个hook函数。改变参数数据使用useDispatch这个hook函数

 

import {useSelector,useDispatch} from "react-redux";
import {Button} from "antd"
function Comp(){
    //获取仓库数据
    const {num,num3} =useSelector((state)=>({
       num:state.num,
       num3:state.num3
    }))

    const dispatch=useDispatch();
    const numChange=()=>{
        dispatch({type:"add"});
    }
    const numChange3=()=>{
        dispatch({type:"add1",val:3});
    }
    return (
        <div>
            <p>Page1</p>
            <p>仓库数据num：{num}</p>
            <p><Button onClick={numChange}>num + 1</Button></p>
            <p>仓库数据num3：{num3}</p>
            <p><Button onClick={numChange3}>num + 3</Button></p>
        </div>
    )
}
export default Comp;