• React框架创建项目详细流程-项目的基本配置-项目的代码规范

    文章目录

    React创建项目流程与规范

    项目规范

    项目规范: 在项目中都会有一些开发规范和代码风格, 下面介绍一下我采用的规范与风格

    1. 文件夹、文件名称统一小写、多个单词以连接符(-)连接, 组件采用大驼峰;

    2. JavaScript变量名称采用小驼峰标识，常量全部使用大写字母;

    3. CSS采用普通CSS和styled-component结合来编写(全局采用普通CSS或Less、局部采用styled-component);

    4. 整个项目不再使用class组件，统一使用函数式组件，并且全面拥抱Hooks;

    5. 所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹;

    6. 组件内部的状态，使用useState、业务数据全部放在redux中管理;

    7. 函数组件内部逻辑代码基本按照如下顺序编写代码:

      组件内部state管理;

      redux的hooks代码;

      其他hooks相关代码(比如自定义hooks);

      其他逻辑代码;

      返回JSX代码;

    8. redux代码规范如下:

      redux目前我们学习了两种模式, 根据自己的情况选择普通模式还是rtk模式

      每个模块有自己独立的reducer或者slice，之后合并在一起;

      redux中会存在共享的状态、从服务器获取到的数据状态;

    9. 网络请求采用axios

      对axios进行二次封装;

      所有的模块请求会放到一个请求文件中单独管理;

    10. 项目使用AntDesign或者MUI(Material UI)

    其他规范在项目中根据实际情况决定和编写

    项目配置

    创建项目的方式:create-react-app

    项目配置:

    配置项目的icon, 将图标换为自己项目的图标

    在这里插入图片描述

    配置项目的标题: 在public文件夹下的index.html中配置项目的标题

    <title>网易云音乐title>

    • 1

    配置jsconfig.json:这个文件在Vue通过脚手架创建项目时自动生成, React是没有自动生成, jsconfig.json是为了让vs code的代码提示更友好, 按需求决定是否配置;

    {
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "jsx": "preserve",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    通过craco配置别名和less文件(不需要集成less只需要配置别名):

    在项目中层级嵌套会很深, 我们导入文件通常会有../../../甚至更多的上一级目录; 因此我们配置别名解决这个问题, 我的配置是使用@符号表示根目录

    首先安装craco: npm i @carco/craco -D

    如果使用的最新的React版本, 则需要npm i @craco/craco@alpha -D来安装

    安装完成, 在项目根目录下创建craco.config.js文件

    const path = require('path')

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

module.exports = {
  webpack: {
    alias: {
      "@": reslove("src")
    }
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    然后修改根目录下package.json文件中的脚本, 修改为craco启动, 修改如下:

    "scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    别名配置完成, 接下来我们配置一下less, 不需要集成less跳过即可

    首先进行安装: npm i craco-less

    最新版本React同样会有适配问题, 安装方式: npm i craco-less@2.1.0-alpha.0

    安装完成按照如下方式配置less, 配置完成创建一个less文件测试一下, 样式生效就配置成功了

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    目录结构

    接下来对项目src文件夹下进行目录结构的划分, 我是按照如下方式进行划分的:

    assets: 存放静态资源 (如css, img等等)

    base-ui: 存放一些通用的组件, 不只是本项目, 其他项目也会使用的组件

    components: 存放本项目中通用的组件

    hooks: 自定义的hook函数

    router: 路由相关

    services: 网络请求相关

    stores: 状态管理, redux相关

    utils: 封装的工具函数

    views: 页面相关

    在这里插入图片描述

    样式重置

    对默认CSS样式进行重置:

    下载normalize.css, 再在src中的index文件引入normalize.css

    可以通过npm安装npm i normalize.css

    import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入样式重置文件
import "normalize.css"
import App from './App'

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    创建一个reset.css文件, 用来自己编写一些样式的重置

    * {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000;
  outline: none;
}

ul, li {
  list-style: none;
}

input {
  outline: none;
  border: none;
}

i {
  font-style: normal;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    并且引入

    import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入样式重置文件
import "normalize.css"
import "./assets/css/reset.css"

import App from './App'

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    Router配置

    安装: npm i react-router-dom

    安装完成配置映射关系即可, 示例代码如下:

    import React from "react"
import { Navigate } from "react-router-dom"

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

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

export default routes

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    配置完成使用, 还需要在src目录下index.js文件中, 对App组件进行包裹

    import React, { Suspense } from "react"
import ReactDOM from "react-dom/client"
import { BrowserRouter } from "react-router-dom"

import App from "./App"

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(
  <BrowserRouter>
    <Suspense fallback="lodaing">
      <App/>
    </Suspense>
  </BrowserRouter>
)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    Redux状态管理

    Redux有两种模式

    普通方式: 目前项目中依然使用率非常高;

    @reduxjs/toolkit方式: 推荐方式, 未来的趋势;(下面简单演示一样rtk模式)

    rtk模式安装: npm i @reduxjs/toolkit react-redux

    安装完成后再store文件夹下的index.js中进行配置

    import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
  reducer: {}
})

export default store

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    同样需要对根组件App进行包裹

    import React, { Suspense } from "react"
import ReactDOM from "react-dom/client"
import { Provider } from "react-redux"

import App from "./App"
import store from "./stores"

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(
  <Provider store={store}>
    <App/>
  </Provider>
)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    axios配置

    项目中我采用axios发送网络请求

    首先安装axios: npm i axios

    一般会对axios进行二次封装, 代码如下

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

class YQRequest {
  // 传入默认配置信息, 创建新的实例
  constructor(baseURL, timeout=10000) {
    this.instance = axios.create({
      baseURL,
      timeout
    })

    // 响应成功的拦截, 返回res.data
    // this.instance.interceptors.response.use(res => {
    //   return res.data
    // }, err => {
    //   return err
    // })
  }

  // 1.封装request
  request(config) {
    // 返回一个Promise, 对数据转换
    return new Promise((reslove, reject) => {
      this.instance.request(config).then(res => {
        reslove(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  }

  // 2.封装get
  get(config) {
    //  调用自己的request函数
    return this.request({ ...config, methods: "get" })
  }

  // 3.封装psot
  post(config) {
    //  调用自己的request函数
    return this.request({ ...config, methods: "post" })
  }
}

export default new YQRequest(BASE_URL, TIMEOUT)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    export const BASE_URL = "http://codercba.com:1888/airbnb/api"
export const TIMEOUT = 10000

    • 1
    • 2
  • 相关阅读:
    软件设计师--知识产权高频考点总结
    汇智知了堂携手西华大学共探鸿蒙生态发展之路
    java开发之个人微信助手的开发
    Ps：色彩范围
    ES单节点部署
    期末测试——JavaScript方式练习题
    Espressif-IDE NameError: name ‘websocket‘ is not defined 解决方法
    【华为OD机试真题 JS】可以组成网络的服务器
    Zookeeper
    2021年CSDN年度总结：回顾过去 掌握现在 展望未来
  • 原文地址：https://blog.csdn.net/m0_71485750/article/details/126923270