React实战（一）初始化项目、配置router、redux、axios
(一)初始化项目
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 = {
// 配置webpack
webpack:{
// 配置别名
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 = {
// 配置less
plugins: [
{
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(
);在App.jsx中引入路由
本来应该是用… 这种结构的，为了把路由结构剥离出来单独放在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 (
编写路由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: // 重定向
},
{
path:'/home',
element:,
},
{
path:'/detail',
element: ,
},
{
path:'/more',
element: ,
},
]
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(
);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 (
Home
)
})
export default Home拿到数据了，搞定
