React配置与使用

San Xun

已于 2024-01-10 10:43:58 修改

阅读量119

点赞数

文章标签： react.js 前端前端框架

于 2023-07-27 08:08:58 首次发布

本文链接：https://blog.csdn.net/MSanXun/article/details/131926984

版权

创建React项目：npx create-react-app 项目名称

安装redux辅助工具:npm install @reduxjs/toolkit使用方法https://blog.csdn.net/MSanXun/article/details/131947008?spm=1001.2014.3001.5501

安装react-redux：npm install react-redux --save

安装路由：npm i react-router-dom

安装组件库Ant：npm i Antd

index.js的所需基本配置项：

import React from 'react';

import ReactDOM from 'react-dom/client';

import { RouterProvider } from 'react-router-dom'

import router from './router'//我们引入的路由

import { Provider } from 'react-redux';//引入我们安装的第三方redux

import store from './store'//引用自己建的story

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<Provider store={ store }>

<RouterProvider router={ router } />//路由集中存储

</Provider>

</React.StrictMode>

);

Redux的store基本配置：

首先在src中新建story文件夹，story中创建model文件夹，model中创建cat.js

import {createSlice} from "@reduxjs/toolkit"//createSlice创建方法

const cart =createSlice({

name:"cart",

initialState:{//存放数据的位置

cart:[]

},

reducers:{//执行story中方法，操作数据的位置

例：Add(state,{payload:id}){payload是接收的参数

state.cart.push(id)//修改数据时需要进行state.数据名

}

}

})

// export const {Add,....} =cart.actions//需要将我们的方法进行暴露，之后在使用时可以调用

export default cart//暴露我们的cart，在后面story的index.js使用

在我们创建的story下创建index.js：

import { configureStore } from '@reduxjs/toolkit';

import cart from './modules/cart';//引入暴露的cart

const store = configureStore({

reducer: cart.reducer//这是我们调用cart，目前只有一个存放数据的story,多个存放story数据的话还没有写

})

export default store;

如何获取story的值以及方法：

import React, { useMemo } from 'react'

import { useNavigate } from 'react-router-dom'

import { useSelector, useDispatch } from 'react-redux';//useSelector是查看story数据的，useDispatch是使用我们在cart.js中暴露的方法的

import { Add，delChoose,.... } from '../../store/modules/cart';//这是我们之前暴露的那些方法

export default function Cart() {

const navigate = useNavigate();

// 获取到redux中的数据

const cart = useSelector(store => store.cart);//useSelector是查看story中cart数据

useDispatch(Add(2));//useDispatch是使用我们在cart.js中暴露的Add方法

react-router-dom使用

//我们可以在src下建立文件router,在router中建立index.js

import {createBrowserRouter} from "react-router-dom"

import App from "../App.js"//切记引入名称大写

let router=createBrowserRouter([

{

path:"/",

element:<App />,

children:[

                {

                path:"/bb",

        element:<Bb /> }



]

}

])

export default router