React(coderwhy)- 09(项目实战 - 1)

13 篇文章 5 订阅

创建React项目

创建项目的方式:create-react-app
项目配置:
         配置项目的icon
         配置项目的标题
         配置jsconfig.json
新建jsconfig.json文件,在文件中粘贴以下内容
{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "jsx": "preserve",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

通过craco配置别名和less文件:
下载安装
npm install @craco/craco

在craco.config.js中粘贴如下代码:

const path = require('path')
const CracoLessPlugin = require('craco-less');

const resolve = pathname => path.resolve(__dirname, pathname)

module.exports = {
  // less
  plugins: [
    {
      plugin: CracoLessPlugin
    },
  ],
  // webpack
  webpack: {
    alias: {
      "@": resolve("src"),
      "components": resolve("src/components"),
      "utils": resolve("src/utils")
    }
  }
}

目录结构

 

 CSS样式的重置

对默认CSS样式进行重置:
         normalize.css
         reset.css

全家桶 – Router配置 

1. 新建router目录,并创建index.js:

  • 创建路由映射表
  • 做异步及重定向处理
import React from "react";
import { Navigate } from "react-router-dom";

const Home = React.lazy(() => import("@/views/home"))
const Entire = React.lazy(() => import("@/views/entire"))
const Detail = React.lazy(() => import("@/views/detail"))


const routes = [
    {
        path: '/',
        element: <Navigate to="/home" />
    },
    {
        path: '/home',
        element: <Home />
    },
    {
        path: '/entire',
        element: <Entire />
    }, {
        path: '/detail',
        element: <Detail />
    }
]

export default routes

2. 解决lazy 的问题

在入口 index.js 中从 react 引入Suspense 来解决lazy问题

import React, { Suspense } from 'react'
import ReactDOM from 'react-dom/client'
import { HashRouter as Router } from "react-router-dom";

import App from '@/App'
import "normalize.css"
import "@/assets/css/index.less"

// @ => src: webpack
// 问题: react脚手架隐藏webpack
// 解决一: npm run eject
// 解决二: craco => create-react-app config

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Suspense fallback="loading ...">
        <Router>
            <App />
        </Router>
    </Suspense>
);

3.在入口组件App.jsx中使用

  • 从react-router-dom中引入 useRoutes
  • 导入写好的路由映射表
  • 调用 useRoutes方法并传入路由映射表
import React, { memo } from 'react'
import { useRoutes } from "react-router-dom";
import routes from "@/router";


const App = memo(() => {
  return (
    <div className='app'>
      <header className='header'>header</header>
      <main className='page'>
        {useRoutes(routes)}
      </main>
      <footer className='footer'>footer</footer>
    </div>
  )
})

export default App

全家桶 – Redux状态管理 

Redux状态管理的选择:
         普通方式:目前项目中依然使用率非常高;
         @reduxjs/toolkit方式:推荐方式, 未来的趋势;

安装:

RTK 默认安装了 redux

npm install @reduxjs/toolkit react-redux

使用RTK创建store

  • 再store目录下的index.js文件引入RTK
  • 使用RTK提供的 configureStore来创建
  • 这里引入 homeReducer 和 entireReducer( 下面有说↓ )
import { configureStore } from "@reduxjs/toolkit";
import homeReducer from "./modules/home";
import entireReducer from "./modules/entire";

const store = configureStore({
    reducer: {
        home:homeReducer,
        entire:entireReducer
    }
})

export default store

再项目入口index.js中使用store

  • 使用react-redux中 提供的Provider组件
  • 引入上面写好的store
  • 再Provider组件上写 store={store}
import React, { Suspense } from 'react'
import ReactDOM from 'react-dom/client'
import { HashRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";
import store from "@/store"

import App from '@/App'
import "normalize.css"
import "@/assets/css/index.less"


// @ => src: webpack
// 问题: react脚手架隐藏webpack
// 解决一: npm run eject
// 解决二: craco => create-react-app config

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        <Suspense fallback="loading ...">
            <Router>
                <App />
            </Router>
        </Suspense>
    </Provider>

);

reducer的创建:

1. homeReducer ( 使用RTK ):

  • HomeReducer 使用RTK 提供的切片 createSlice 来创建
  • 需要指定 name  initialState(初始值) reducers
  • 导出HomeSlice 下的 reducer
import { createSlice } from "@reduxjs/toolkit";


const homeSlice = createSlice({
    name: "home",
    initialState: {
       
    },
    reducers: {

    }
})

export default homeSlice.reducer

2. entireReducer ( 普通写法 )

目录结构:

在reducer.js中 定义recuder:

const initialState = {
   
}


function reducer(state = initialState, action) {
    switch (action.type) {


        default:
            return state
    }
}

export default reducer

 在index.js中引入并导出:

  • 这里导出的是reducer,所以可以在store目录下的index.js中可以
import reducer from "./reducer";

export default reducer

网络请求 - axios 

目录结构:

  • axios二次封装这里采用 class 类的写法
  • config.js中定义了 axios 的配置常量 ( 可往下看 )
  • 定义 get 和 post请求方法
  • 这里我加入了 进度条 ( 可不加 )

在request目录下的index.js中写如下代码:

import axios from "axios";
import { BASE_URL, TIMEOUT } from "./config";
import NProgress from "nprogress";


class HYrequest {
    constructor(baseURL, timeout) {
        this.instance = axios.create({
            baseURL,
            timeout
        })
        this.instance.interceptors.request.use(config => {
            NProgress.start()
            return config
        })
        this.instance.interceptors.response.use(res => {
            NProgress.done()
            return res.data
        }, err => {
            console.log(err);
            return Promise.reject(err)
        })

    }
    request(config) {
        return this.instance.request(config)
    }

    get(config){
        return this.request({...config,method:'get'})
    }

    post(config){
        return this.request({...config,method:'post'})
    }
}

export default new HYrequest(BASE_URL, TIMEOUT)

 在config.js中写以下代码:

export const BASE_URL = "http://codercba.com:1888/airbnb/api"
export const TIMEOUT = 10000

在外层index.js中引入 并导出:

import HYrequest from "./request/index";
export default HYrequest


在Home组件中尝试请求数据:

  • 注意: 这里可忽略,只是尝试请求数据,之后使用 redux 管理
import React, { memo, useEffect, useState } from 'react'
import hyRequest from "@/services";

const home = memo(() => {

  const [highScore, setHighScore] = useState({})

  useEffect(() => {
    hyRequest.get({ url: "/home/highscore" }).then(res => {
      setHighScore(res)
      console.log(res);

    })
  }, [])
  return (
    <div>
      <h2>{highScore.title}</h2>
      <h4>{highScore.subtitle}</h4>
      <ul>
        {highScore.list?.map(item => {
          return <li key={item.id}>{item.name}</li>
        })}
      </ul>

    </div>
  )
})

export default home

 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
React Router是React的一种路由管理工具,它允许我们在应用程序中建立路由,并通过不同的URL路径来加载不同的页面。 而react-router-config是React Router的一个附加库,它提供了一种以配置方式来定义应用程序路由的方法。 路由切入动画是指在切换页面时,为页面添加一些过渡效果和动画,以提升用户体验。 使用react-router-config实现路由切入动画的步骤如下: 1. 首先,在路由配置文件中定义各个页面的路由信息,并设置对应的组件。 2. 在路由配置文件中,为每个路由定义一个transition属性,用于标识该路由的过渡效果。 3. 在根组件中使用React Router提供的Switch组件来包裹所有路由,并使用TransitionGroup组件来包裹Switch组件。 4. 在根组件中使用自定义的AnimatedSwitch组件来替换React Router提供的Switch组件,并将路由配置文件传递给AnimatedSwitch组件。 5. 在AnimatedSwitch组件中根据当前路由的transition属性,为切换的页面添加不同的过渡效果和动画。 例如,可以定义一个FadeIn动画效果,在路由配置文件中为需要应用该动画效果的路由设置transition属性为'fade-in',然后在AnimatedSwitch组件中根据该属性为页面添加相应的CSS动画样式。 总而言之,使用react-router-config可以方便地配置应用程序的路由信息,并结合一些CSS动画库,可以实现各种炫酷的路由切入动画。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值