React-项目搭建

1、项目搭建

npm i create-react-app -g
create-react-app项目名
npm i --save-dev less less-loader

暴露webpack文件配置

yarn eject

配置脚手架默认配置

• 配置less：less、less-loader
• 配置别名@ 代表src目录(alias)

 alias: {
        '@': path.appSrc,
        ...
     }

2、路由配置

安装依赖

npm i --save react-router-dom axios antd-mobile

目录结构

知乎日报
├─ .DS_Store
└─ report
   ├─ src
   │  ├─ api
   │  │  └─ index.js
   │  ├─ app.jsx
   │  ├─ index.js
   │  ├─ index.less
   │  ├─ page
   │  │  ├─ Home
   │  │  │  └─ index.jsx
   │  │  ├─ LifeService
   │  │  │  └─ index.jsx
   │  │  ├─ Shop
   │  │  │  └─ index.jsx
   │  │  └─ User
   │  │     └─ index.jsx
   │  ├─ router
   │  │  ├─ index.js
   │  │  └─ routes.js
   │  └─ utils
   │     └─ request.js
   └─ yarn.lock

代码

utils/request.js

import axios from 'axios'
import qs from 'querystring'

const errorHandle = (status, info) => {
    switch (status) {
        case 400:
            console.log('语文有误,当前请求无法被服务器理解');
            break;
        case 401:
            console.log('服务器认证失败');
            break;
        case 403:
            console.log('服务器已经理解请求,但是拒绝执行它');
            break;
        case 404:
            console.log('请检查网络请求地址');
            break;
        case 500:
            console.log('服务器遇到了一个未曾预料的状况，导致无法完成请求处理');
            break;
        case 502:
            console.log('服务器宕机');
            break;
        default:
            console.log(info);
            break;
    }
}

const instance = axios.create({
    timeout: 5000
})

instance.interceptors.request.use(
    config => {
        if (config.method === 'post') {
            config.data = qs.stringify(config.data)
        }
        return config
    },
    error => Promise.reject(error)
)

instance.interceptors.response.use(
    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
    error => {
        const { response } = error
        errorHandle(response.status, response.info)
    }
)

export default instance

router/routes.js

import Home from "../page/Home";
import { lazy } from "react";

const routes = [{
    path: '/',
    name: 'home',
    component: Home,
    meta: {
        title: '首页'
    }
}, {
    path: '/LifeService',
    name: 'LifeService',
    component: lazy(() => import('../page/LifeService')),
    meta: {
        title: '生活'
    }
}, {
    path: '/Shop',
    name: 'Shop',
    component: lazy(() => import('../page/Shop')),
    meta: {
        title: '购物'
    }
}, {
    path: '/User',
    name: 'User',
    component: lazy(() => import('../page/User')),
    meta: {
        title: '用户'
    }
}]

export default routes

router/index.js

import React, { Suspense } from "react";
import { Routes, Route, useNavigate, useLocation, useParams, useSearchParams } from 'react-router-dom'
import routes from "./routes";
import { DotLoading, Mask } from 'antd-mobile'

const Element = function Element(props) {
    let { component: Component } = props
    const navigate = useNavigate(),
        location = useLocation(),
        params = useParams(),
        [usp] = useSearchParams()
    return <Component navigate={navigate} location={location} params={params} usp={usp} />
}

const AppRouter = () => {
    return (
        <Suspense fallback={
            <Mask visible={true}>
                <DotLoading color="white" />
            </Mask>}>
            <Routes>
                {routes.map(item => {
                    let { name, path } = item;
                    return <Route
                        key={name}
                        path={path}
                        element={<Element {...item} />}
                    />
                })}
            </Routes>
        </Suspense>
    )
}

export default AppRouter

src/app.js

import React from "react";
import { BrowserRouter } from "react-router-dom";
import AppRouter from './router';

const App = function App(){
    return (
        // BrowserRouter不带井号
        <BrowserRouter>
            <AppRouter />
        </BrowserRouter>
    )
}
export default App

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.less'
import App from './app';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);