react项目规范新手教程

简介

React是一种流行的JavaScript库，用于构建用户界面。搭建一个React项目并不难，但确保项目的结构和配置正确可以帮助你更有效地开发和维护应用程序。以下是搭建React项目的一些步骤：

项目规范：项目中有一些开发规范和代码风格

  1. 文件夹、文件名称统一小写、多个单词以连接符（-）连接；
  2. JavaScript变量名称采用小驼峰标识，常量全部使用大写字母，组件采用大驼峰；
  3. CSS采用普通CSS和styled-component结合来编写（全局采用普通CSS、局部采用styled-component）;
  4. 整个项目不再使用class组件，统一使用函数式组件，并且全面拥抱Hooks；
  5. 所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹；
  6. 组件内部的状态，使用useState、useReducer；业务数据全部放在redux中管理；
  7. 函数组件内部基本按照如下顺序编写代码：
  • 组件内部state管理；
  • redux的hooks代码；
  • 其他hooks相关代码（比如自定义hooks）；
  • 其他逻辑代码；
  • 返回JSX代码；
  1. redux代码规范如下：
  • redux目前我们学习了两种模式，在项目实战中尽量两个都用起来，都需要掌握；
  • 每个模块有自己独立的reducer或者slice，之后合并在一起；
  • redux中会存在共享的状态、从服务器获取到的数据状态；
  1. 网络请求采用axios
  • 对axios进行二次封装；
  • 所有的模块请求会放到一个请求文件中单独管理；
  1. 项目使用AntDesign、MUI（Material UI）
  • 爱彼迎本身的设计风格更多偏向于Material UI，但是课程中也会尽量讲到AntDesign的使用方法；
  • 项目中某些AntDesign、MUI中的组件会被拿过来使用；
  • 但是多部分组件还是自己进行编写、封装、实现；
  1. 其他规范在项目中根据实际情况决定和编写；

创建项目

◼ 创建项目的方式：create-react-app
◼ 项目配置:
 配置项目的icon
 配置项目的标题
 配置jsconfig.json
◼ 通过craco配置别名和less文件：

jsconfig.json

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

项目目录结构划分

在一个React项目中，保持代码规范和结构清晰有助于提高可维护性和可读性。以下是一些新手可以遵循的规范和最佳实践来创建React项目：

项目结构

  1. 目录结构：

    • src/: 源代码目录，存放组件、页面、样式等。
    • public/: 存放静态资源，如图片、字体等。
    • assets/: 可存放项目中使用的资源文件，例如图片、字体、图标等。
    • components/: 存放可复用的组件。
    • pages/: 存放页面级组件。
    • styles/: 存放全局样式文件。
    • utils/: 存放通用函数。
    • services/: 存放API调用相关代码。
    • hooks/: 存放自定义Hook。
    • tests/: 存放测试文件。

  2. 组件划分：

    • 函数式组件：优先使用函数式组件，配合React Hooks使用。
    • 逻辑与展示分离：在组件内部，将逻辑代码和展示代码分开，便于理解和维护。

  3. 文件命名：

    • 文件命名采用驼峰式或帕斯卡命名法（例如：MyComponent.js）。
    • 文件扩展名为.js或.jsx，具体视项目的配置而定。

  4. 样式：

    • 使用模块化CSS或CSS-in-JS来管理组件的样式，避免样式冲突。
    • 使用命名空间或特定命名规则（如BEM）来规范样式类名。

在这里插入图片描述

别名配置 @

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from '@/App';// @ => src:webpack  (采用第二种方法)
// 问题 react脚手架隐藏webpack
// 解决一 npm run reject
// 解决二 craco =>create-react-app config const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App /></React.StrictMode>
);

在这里插入图片描述

安装依赖

npm i @craco/craco@alpha -D

修改配置
创建文件夹craco.config.js

const path = require('path')const resolve = (pathName) => path.resolve(__dirname, pathName)
module.exports = {// less// webpackwebpack: {alias: {'@': resolve('src'),'components': resolve('src/components'),'utils': resolve('src/utils'),},},
}

在修改package.json

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

启动

npm run start

配置less

在这里插入图片描述

安装

npm i craco-less@2.1.0-alpha.0 -D

配置
在这里插入图片描述
craco.config.js

const path = require('path')
const CracoLessPlugin = require('craco-less');const resolve = pathname => path.resolve(__dirname, pathname)module.exports = {// lessplugins: [{plugin: CracoLessPlugin},],// webpackwebpack: {alias: {"@": resolve("src"),"components": resolve("src/components"),"utils": resolve("src/utils")}}
}

CSS样式的重置

  1. 对默认CSS样式进行重置:
  • normalize.css
    安装
npm i normalize.css
  • reset.less

@import "./variables.less";body, button, dd, dl, dt, form, h1, h2, h3, h4, h5, h6, hr, input, li, ol, p, pre, td, textarea, th, ul {padding: 0;margin: 0;
}a {color: @textColor;text-decoration: none;
}img {vertical-align: top;
}ul, li {list-style: none;
}

variables.less定义变量

@textColor: #484848;
@textColorSecondary: #222;

在这里插入图片描述
index.js中配置

import "normalize.css";
import './assets/css/index.less';

全家桶 – Router配置

安装

npm i react-router-dom

index.js 配置

import React, { Suspense } from 'react'
import ReactDOM from 'react-dom/client'
import { HashRouter } from "react-router-dom"const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<React.StrictMode><Suspense fallback="loading"><HashRouter><App /></HashRouter></Suspense></React.StrictMode>
)

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

在这里插入图片描述
App.jsx

import React, { memo } from 'react'
import { useRoutes } from 'react-router-dom'
import routes from './router'const App = memo(() => {return (<div className='app'><div className='header'>header</div><div className='page'>{useRoutes(routes)}</div><div className='footer'>footer</div></div>)
})export default App

全家桶 – Redux状态管理

安装

npm i @reduxjs/toolkit react-redux

开始配置

  1. 创建文件 sotre
    在这里插入图片描述
  2. store/index.js

import { configureStore } from '@reduxjs/toolkit'
import homeReducer from './modules/home'
import entireReducer from './modules/entire'// 两种方式配置 reducer
const store = configureStore({reducer: {},
})export default store
  1. 入口 修改index.js
import { Provider } from 'react-redux'
import store from './store'// 使用 Redux Provider 包裹应用
root.render(<React.StrictMode><Suspense fallback="loading"><Provider store={store}><HashRouter><App /></HashRouter></Provider></Suspense></React.StrictMode>
)
  1. 在 Store 中注册 State Slice
    在这里插入图片描述
    home.js
import { createSlice } from '@reduxjs/toolkit'const homeSlice = createSlice({name: 'home',initialState: {productList:[]},reducers: {}
})
// 注册到store中
export default homeSlice.reducer

如果我们将所有的逻辑代码写到一起，那么当redux变得复杂时代码就难以维护。

  • 接下来，我会对代码进行拆分，将store、reducer、action、constants拆分成一个个文件。
  • 创建store/index.js文件：
  • 创建store/reducer.js文件：
  • 创建store/actionCreators.js文件：
  • 创建store/constants.js文件：

reducer.sj

const initialState = {currentPage: 3,
}function reducer(state = initialState, action) {switch (action.type) {default:return state}
}export default reducer

index.js

import reducer from './reducer'export default reducer

store/index.js


import { configureStore } from '@reduxjs/toolkit'
import homeReducer from './modules/home'
import entireReducer from './modules/entire'// 两种方式配置 reducer
const store = configureStore({reducer: {home: homeReducer, // 注册reducerentire: entireReducer, // 注册reducer},
})export default store

运行项目
在这里插入图片描述

网络请求 - axios

安装

npm i axios

目录
在这里插入图片描述
配置
request/config.js

export const BASE_URL = 'http://codercba.com'
export const TIMEOUT = 10000

request/index.js


import axios from 'axios'
import { BASE_URL, TIMEOUT } from './config'
// 创建实例
class CRequest {constructor(baseURL, timeout) {this.instance = axios.create({baseURL,timeout,})this.instance.interceptors.response.use((res) => {return res.data},(err) => {return 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 CRequest(BASE_URL, TIMEOUT)

services/index.js

import hRequest from './request';export default hRequest

组件中测试

import React, { memo, useEffect } from 'react'
import hRequest from '@/services'
const index = memo(() => {// 网络请求useEffect(() => {hRequest.get({ rul: '/home/highscore' }).then(res => {console.log(res);})},[])return (<div>Home</div>)
})export default index

以上配置是基础版本，后续会随着项目的深入而继续完善

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/620502.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【计算机毕业设计】4S店车辆管理系统——后附源码

【计算机毕业设计】4S店车辆管理系统——后附源码

&#x1f389;**欢迎来到我的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 一名来自世界500强的资深程序媛&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于…
阅读更多...
Oracle 11g完全卸载教程（Windows）

Oracle 11g完全卸载教程（Windows）

文章目录 一、停止Oracle服务二、卸载Oracle1、卸载Oracle产品2、删除注册表3、删除环境变量以及其余文件 一、停止Oracle服务 进入服务 找到服务中的Oracle服务并且停止 全部停止运行成功 二、卸载Oracle 1、卸载Oracle产品 点击开始菜单找到Oracle&#xff0c;然后点击…
阅读更多...
打破常规：AI如何帮助从业者规避营销活动风险

打破常规：AI如何帮助从业者规避营销活动风险

人工智能时代&#xff1a;如何利用AI提升营销效果 在当今商界&#xff0c;市场策划活动对于企业来说至关重要&#xff0c;它们不仅可以吸引消费者的注意&#xff0c;还可以扩大企业的市场份额。然而&#xff0c;这些活动本身带来的风险也不容忽视。为了帮助企业在策划活动时做出…
阅读更多...
芯片封测：从入门到精通

芯片封测：从入门到精通

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…
阅读更多...
1.C++入门

1.C++入门

1.关键字&#xff08;C98&#xff09; 2.命名空间 在 C/C 中&#xff0c;变量、函数和后面要学到的类都是大量存在的&#xff0c;这些变量、函数和类的名称将都存 在于全局作用域中&#xff0c;可能会导致很多冲突。使用命名空间的目的是 对标识符的名称进行本地化 &#xff…
阅读更多...
linux shell脚本编写（2）

linux shell脚本编写（2）

Shell: 命令转换器&#xff0c;高级语言转换成二进制语言。是Linux的一个外壳&#xff0c;它包在Lniux内核的外面&#xff0c;用户和内核之间的交互提供了一个接口。 内置命令&#xff1a;在shell内部不需要shell编辑 外置命令&#xff1a;高级语言要用shell转换成二进制语言 …
阅读更多...
视频号正式推出电商项目，不需要自己直播，也能变现成功！

视频号正式推出电商项目，不需要自己直播，也能变现成功！

大家好&#xff0c;我是电商笨笨熊 视频号推出电商项目&#xff0c;这一举动又成了电商圈的热谈&#xff1b; 作为一个不需要自己直播也能卖货的变现方式&#xff0c;对于普通人确实是一个风口&#xff0c;解决了众多玩家想要利用直播变现但又没有相关经验&#xff0c;没有粉…
阅读更多...
GPT人工智能在线网页版大全

GPT人工智能在线网页版大全

平民不参与内测&#xff0c;还能使用 ChatGPT 吗&#xff1f; 自去年 ChatGPT 爆红以来&#xff0c;关于它的消息铺天盖地。如果你真的想使用它&#xff0c;途径有很多。除了官方网站外国内还有许多 ChatGPT 的镜像网站&#xff0c;其中不乏免费的 3.5 版本。虽然有些网站需要…
阅读更多...
反序列化漏洞笔记

反序列化漏洞笔记

1 PHP 序列化基础概念 1.1 什么是序列化 序列化可以实现将对象压缩并格式化&#xff0c;方便数据的传输和存储。 为什么要序列化&#xff1f; PHP 文件在执行结束时会把对象销毁&#xff0c;如果下次要引用这个对象的话就很麻烦&#xff0c;所以就有了对象序列化&#xff0…
阅读更多...
端口协议（爆破、未授权）

端口协议（爆破、未授权）

常见端口服务及攻击方向&#xff1a; 弱口令爆破 工具&#xff1a;https://github.com/vanhauser-thc/thc-hydra hydra是一个支持多协议的自动化的爆破工具。 支持的服务、协议&#xff1a; telnet ftp pop3[-ntlm] imap[-ntlm] smb smbnt http-{head|get} http-{get|post}-…
阅读更多...
Python学习笔记14 - 集合

Python学习笔记14 - 集合

什么是集合 集合的创建方式 集合的相关操作 集合间的关系 集合的数学操作 集合生成式 列表、字典、元组、集合总结
阅读更多...
matlab学习001-简单的矩阵输入运算及绘制信号曲线

matlab学习001-简单的矩阵输入运算及绘制信号曲线

目录 1&#xff0c;熟悉简单的矩阵输入 1.1&#xff0c;创建矩阵 1.2&#xff0c;在命令行调用文件中的变量 1.3&#xff0c;ones函数 1.4&#xff0c;who和whos的使用 2&#xff0c;绘制信号曲线 2.1&#xff0c;实指数信号 2.2&#xff0c;频率为50Hz的周期方波信号…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023