当前位置: 首页> 教育> 就业 > React实战(一)初始化项目、配置router、redux、axios

React实战(一)初始化项目、配置router、redux、axios

时间:2025/7/11 0:54:48来源:https://blog.csdn.net/DogEgg_001/article/details/139472511 浏览次数:0次

(一)初始化项目

1.安装项目

npx create-react-app 项目名

编译报错:

解决办法:安装最新的babel-preset-react-app 

npm install babel-preset-react-app@latest 

2.配置项目  

(1)配置文件目录 

(2)使用craco配置webpack.config

npm install @craco/craco -D  

配置别名alias

// craco.config.js
const path = require('path')
// 解析绝对路径
const resolve = (pathname)=>path.resolve(__dirname,pathname)module.exports = {// 配置webpackwebpack:{// 配置别名alias:{'@':resolve('src'),}}
}

更改package.json打包命令

react-scripts不会解析craco的配置,使用craco命令运行会自动执行craco配置,再与webpack配置合并 

更改为:

 

这样路径别名就没有报错啦! 

(3)配置less

下载less和craco-less

npm i less craco-less -D

在craco.config配置less

// craco.config.js
const CracoLessPlugin = require('craco-less')module.exports = {// 配置lessplugins: [{plugin: CracoLessPlugin,options: {lessLoaderOptions: {lessOptions: {modifyVars: {},javascriptEnabled: true,}}}}],
...

重新启动,使用下!没报错 !

(4)重置和初设样式

下载normalize.css 

npm i normalize.css

引入:

// App.jsx
import "normalize.css"

设置变量样式variable.less

设置自定义预设样式reset.less

 

(二)配置router

在这个项目里还是采用6.2的写法,就不写6.4的了

安装router

npm i react-router-dom

采用history路由

// index.jsx
import { BrowserRouter } from 'react-router-dom';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>
);

在App.jsx中引入路由

本来应该是用<Routes><Route />...</Routes> 这种结构的,为了把路由结构剥离出来单独放在router文件夹中,使用useRoutes hook解析routes数组

// app.jsx
import { useRoutes } from 'react-router-dom'
import routes from './router'
import Header from './components/Header'
import Footer from './components/Footer'const App = memo(() => {return (<div className='app'><div className='header'><Header /></div><div className='content'>{useRoutes(routes)}</div><div className='footer'><Footer /></div></div>)
})

编写路由routes

这样看的话其实跟6.4的差别不大,跟vue-router越来越相似了 

// router/index.jsx
import { Navigate } from "react-router-dom"
import { lazy } from "react"
// 懒加载
const Home = lazy(() => import('@/views/home'))
const Detail = lazy(() => import('@/views/detail'))
const More = lazy(()=>import('@/views/more'))const routes = [{path:'/',element:<Navigate to="/home" /> // 重定向},{path:'/home',element:<Home />,},{path:'/detail',element: <Detail />,},{path:'/more',element: <More />,},
]export default routes
})

好了就是这样了! 

但是会报警告:

 

(三)配置redux

1.安装redux

npm i @reduxjs/toolkit react-redux

2.创建store 

创建 

// store/index.js
import { configureStore } from "@reduxjs/toolkit";const store = configureStore({reducer:{}
})export default store

 引入

// index.js
import { Provider } from 'react-redux'
import store from './store'const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><Provider store={store}><BrowserRouter><App /></BrowserRouter></Provider></React.StrictMode>
);

3.引入slice

在store的modules文件夹下创建各个组件的reducer切片

// store/modules/home.js
import { createSlice } from "@reduxjs/toolkit";const homeSlice = createSlice({name:'home',initialState:{},reducers:{}
})export default homeSlice.reducer

导入到store

import { configureStore } from "@reduxjs/toolkit";
import homeReducer from './modules/home'const store = configureStore({reducer:{home:homeReducer,}
})export default store

先就这样,等有数据需要处理的时候再继续写 

(四)配置axios 

下载axios

npm i axios

 先建立这样的文件结构

  • modules:存放各模块的接口信息
  • request:配置二次封装axios
  • index.js:封装请求对象的出口

在request/config.js配置axios配置项

// 请求路径
export const BASE_URL = 'http://codercba.com:1888/airbnb/api'
// 请求限制时间
export const TIMEOUT = 1000 * 10

 在request/index.js封装axios

// 对axios二次封装
import axios from "axios";
import { BASE_URL, TIMEOUT } from "./config";class HYRequest{constructor(baseURL, timeout){this.instance = axios.create({baseURL:baseURL,timeout:timeout,})// 响应拦截this.instance.interceptors.response.use(res=>{return res.data},err=>{return err})}request(config){return this.instance.request(config)}// 封装get    get(config){return this.request({...config,method:'get'})}// 封装post    post(config){return this.request({...config,method:'post'})}
}
// 导出实例
export default new HYRequest(BASE_URL,TIMEOUT)

导出到出口文件:

import hyRequest from './request'export default hyRequest

拿home组件试试请求能不能成功

import React, { memo, useEffect } from 'react'
import hyRequest from '@/service'const Home = memo(() => {useEffect(()=>{hyRequest.get({url:'/home/highscore'}).then(res=>{console.log(res);})},[])return (<div>Home</div>)
})export default Home

拿到数据了,搞定 

关键字:React实战(一)初始化项目、配置router、redux、axios

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: