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

这篇具有很好参考价值的文章主要介绍了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, 将图标换为自己项目的图标

react创建项目,React,react.js,代码规范,前端

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

<title>网易云音乐</title>

配置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"
    ]
  }
}

通过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")
    }
  }
}

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

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

别名配置完成, 接下来我们配置一下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")
    }
  }
}

目录结构

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

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

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

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

hooks: 自定义的hook函数

router: 路由相关

services: 网络请求相关

stores: 状态管理, redux相关

utils: 封装的工具函数

views: 页面相关

react创建项目,React,react.js,代码规范,前端

样式重置

对默认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/>)

创建一个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;
}

并且引入

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/>)

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

配置完成使用, 还需要在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>
)

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

同样需要对根组件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>
)

axios配置

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

首先安装axios: npm i axios

一般会对axios进行二次封装, 代码如下文章来源地址https://www.toymoban.com/news/detail-793219.html

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)
export const BASE_URL = "http://codercba.com:1888/airbnb/api"
export const TIMEOUT = 10000

到了这里,关于React框架创建项目详细流程-项目的基本配置-项目的代码规范的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Python - 【FastAPI】框架配置搭建基本使用

    之前在面试的时候面试官有提到过这个框架,但是个人在之前的项目中没有用到过,只是有听过,并没有实际的应用,因此,个人自己研究了一下,这是个新型的框架,使用起来相对挺简单。FastAPI是一个基于Python的现代Web框架,它具有快速构建高性能API的特点。 中文文档:

    2024年02月11日
    浏览(37)
  • django 项目基本配置

    使用命令创建项目 效果 根目录创建apps用以放置所有包 切换至apps目录创建子应用 muxi_shop_back/settings.py 数据库配置 创建数据库 配置静态文件路径 数据库配置 如果是协同开发数据库表是提前准备好的,可以将表的字段映射到本地 setting配置文件 注: 安装mysqlclient 可能会显示以

    2024年02月07日
    浏览(41)
  • 【详细】Jmeter的安装配置与基本操作

    1、Jmeter环境搭建 安装JDK:https://www.oracle.com/cn/java/technologies/downloads/ 安装Jmeter:https://jmeter.apache.org/download_jmeter.cgi 注意:下载JDK,注意电脑操作系统及位数;Jmeter版本要与JDK版本匹配;Jmeter安装路径不能有中文或空格 2、Jmeter基本配置 (1)Jmeter界面汉化 永久性:修改bin目录下

    2024年02月03日
    浏览(45)
  • 【框架篇】Spring Boot核心介绍及项目创建(详细教程)

    Spring Boot 是基于 Spring 开发的一种轻量级的全新框架,不仅继承了 Spring 框架原有的优秀特性,而且还通过简化配置来进一步简化了 Spring 应用的整个搭建和开发过程。通过 Spring Boot ,可以轻松地创建独立的,基于生产级别的和基于 Spring 的应用程序。 Spring 的诞生是为了简化

    2024年02月16日
    浏览(42)
  • STM32-IAP基本原理及应用 | ICP、IAP程序下载流程 | 程序执行流程 | 配置IAP到STM32F4xxx

    ①在线编程(ICP,In-Circuit Programming) :通过JTAG/SWD协议或者系统加载程序(Bootloader, 串口 )下载用户应用程序到微控制器中。 ②在程序中编程(IAP,In Application Programming) :通过任何一种通信接口(如IO端口,USB,CAN,UART,I2C,SPI等)下载程序或者应用数据到存储器中( 需要在此前通过在线编

    2024年02月07日
    浏览(45)
  • Android Studio 安装配置详细步骤,以及使用的基本操作

    一.Android SDK下载和安装     如果本地已有合适版本Android SDK,则无需再下载,或者可以使用SDK Manager更新SDK;      如果没有SKD,则需要下载了,其实在安装Android Studio过程中会选择下载最新SDK安装,但是速度极慢,我习惯先把SDK下载下来,在安装完Android Studio后再配置(当

    2023年04月18日
    浏览(50)
  • Git的基本操作(安装Git,创建本地仓库,配置Git,添加、修改、回退、撤销修改、删除文件)

    Git 是开放源代码的代码托管⼯具,最早是在Linux下开发的。开始也只能应⽤于Linux平台,后⾯慢慢的被移植到windows下,现在,Git可以在Linux、Unix、Mac和Windows这⼏⼤平台上正常运⾏了。 如果你的的平台是centos,安装git相当简单,以我的centos7.6为例: 我们还可以用下面的指令来

    2024年03月28日
    浏览(68)
  • docker基本操作:安装部署、设置ssh远程登入、配置docker镜像文件并创建docker容器

    Docker 是一个流行的应用程序容器化和部署平台,允许开发人员轻松地创建、部署和管理容器中的应用程序。 请注意运行此命令需要 root 或 sudo 权限,因此可能需要在命令前加上 sudo 并输入密码。 一、更新系统工具(ubuntu) 安装docker 查看docker版本 启动docker服务 二、一些基本

    2024年02月04日
    浏览(67)
  • anaconda 安装、配置、开机启动和基本操作 (windows+linux 详细)

    包括notebook的开机启动,启动脚本、配置等,2023年12月4日更新教程 anaconda是conda中的一种,也可以选用其它的conda anaconda会把python、pip等直接安装上,不用额外装配了,省心 conda对于需要多个python环境的开发者非常方便 演示版本2023.09 安装方法对于其它版本基本一致 官网: an

    2024年02月02日
    浏览(48)
  • 快速上手: Linux环境配置, 基本指令与项目部署要点

    Linux 是由林纳斯·托瓦兹(Linus Torvalds)在 1991 年创立并发展至今成为服务器操作系统领域的核心系统。 Linux 与 Windows 一样,是一种操作系统(搞管理的软件),Linux 严格意义来说只是一个 “操作系统内核”;一个完整的操作系统 = 操作系统内核 + 配套的应用程序。 Linux 可以

    2024年02月10日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包