首页 > 其他分享 >React项目笔记-环境搭建、路由封装(跳转Navigate、懒加载lazy)、模块化样式引入、状态管理react-redux以及蓝浏览插件reduxdevtools

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

时间:2023-09-08 17:13:05浏览次数:55  
标签:插件 const App reduxdevtools react num 跳转 import redux

环境准备

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;

 

标签:插件,const,App,reduxdevtools,react,num,跳转,import,redux
From: https://www.cnblogs.com/nanamiao/p/17657575.html

相关文章

  • vue路由跳转
    第一种方式  <router-link :target="$store.getters.username?'_blank':'_self'"class="course-item-cont":to="$store.getters.username?{path:'/VirtualClass/Detail',query:{id:item.id,introductionPat......
  • [Maven] maven插件系列之maven-shade-plugin
    [Maven]maven插件系列之maven-shade-plugin1插件简述/PluginOverview1.1定义与目的/Definition&GoalsOfficialDefinitionApacheMaven:maven-shade-pluginThispluginprovidesthecapabilitytopackagetheartifactinanuber-jar,includingitsdependenc......
  • 推荐一个react上拉加载更多插件:react-infinite-scroller
    推荐一个react上拉加载更多插件:react-infinite-scroller 在开发网页和移动应用时,经常需要处理大量数据的展示和加载。如果数据量非常大,一次性全部加载可能会导致页面卡顿或崩溃。为了解决这个问题,我们可以使用无限滚动(InfiniteScroll)的技术。React提供了一个方便的组件库,即......
  • azure data studio SQL扩展插件开发笔记
    node.js环境下拉取脚手架npminstall-gyogenerator-azuredatastudioyoazuredatastudio改代码运行调试扩展,在visualstudiocode中安装插件即可然后visualstudiocode打开进行修改运行即可image.png运行后自动打开auzredatastudio了,下面是我开发的扩展,......
  • vscode插件开发笔记
    https://code.visualstudio.com/api/get-started/your-first-extensionnpminstall-gyogenerator-codeyocode正常开发选择ts或者js结果如下,package.json的contributes.commands节点控制命令生命,contributes.menus定义菜单extension.ts里面注册事件exportfunctionactivat......
  • 在代码中配置乐观锁插件和分页插件
    在代码中配置乐观锁插件和分页插件在代码中配置乐观锁插件和分页插件,您可以按照以下步骤进行操作:配置乐观锁插件:乐观锁插件是MyBatisPlus提供的功能之一,您可以在配置类中进行配置。假设您使用的是SpringBoot,可以创建一个配置类(如MyBatisConfig)并添加@Configuration注解,......
  • 不用额外插件?RunnerGo内置压测模式怎么选
    我们在做性能测试时需要根据性能需求配置不同的压测模式如:阶梯模式。使用jmeter时我们需要安装插件来配置测试模式,为了方便用户使用,RunnerGo内嵌了压测模式这一选项,今天给大家介绍一下RunnerGo的几种压测模式和怎么根据性能需求选择合适的压测模式。RunnerGo提供了以下五种压测模式......
  • 滚动到底部的Vue指令插件
    简介及使用教程VueChatScroll是一个保持可滚动内容滚动到底部的Vue指令插件,用于Vue.js2,当在该元素中添加新内容时,滚动到该元素的底部。安装npmivue-chat-scroll使用importVuefrom'vue'importVueChatScrollfrom'vue-chat-scroll'Vue.use(VueChatScroll)......
  • java 支持 超大上G,多附件上传插件
    ​ javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1. 通过form表单向后端发送请求         <formid="postForm" action="${pageContext.request.contextPath}/UploadServlet" method="pos......
  • 推荐一个react上拉加载更多插件:react-infinite-scroller
    在开发网页和移动应用时,经常需要处理大量数据的展示和加载。如果数据量非常大,一次性全部加载可能会导致页面卡顿或崩溃。为了解决这个问题,我们可以使用无限滚动(InfiniteScroll)的技术。React提供了一个方便的组件库,即react-infinite-scroller,它可以帮助我们实现无限滚动的功能。......