react项目规范新手教程

原创

已于 2024-04-12 14:37:45 修改

· 1k 阅读

12 ·

版权

文章标签：

#react.js #前端 #前端框架 #reactjs

于 2024-04-12 14:35:04 首次发布

本文详细介绍了如何使用React构建项目，包括项目规范、文件夹结构、组件设计、Redux集成、网络请求管理、CSS处理以及使用CRACO进行配置。重点强调了代码组织和最佳实践，帮助开发者提升开发效率和代码可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

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

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

文件夹、文件名称统一小写、多个单词以连接符（-）连接；
JavaScript变量名称采用小驼峰标识，常量全部使用大写字母，组件采用大驼峰；
CSS采用普通CSS和styled-component结合来编写（全局采用普通CSS、局部采用styled-component）;
整个项目不再使用class组件，统一使用函数式组件，并且全面拥抱Hooks；
所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹；
组件内部的状态，使用useState、useReducer；业务数据全部放在redux中管理；
函数组件内部基本按照如下顺序编写代码：

组件内部state管理；
redux的hooks代码；
其他hooks相关代码（比如自定义hooks）；
其他逻辑代码；
返回JSX代码；

redux代码规范如下：

redux目前我们学习了两种模式，在项目实战中尽量两个都用起来，都需要掌握；
每个模块有自己独立的reducer或者slice，之后合并在一起；
redux中会存在共享的状态、从服务器获取到的数据状态；

网络请求采用axios

对axios进行二次封装；
所有的模块请求会放到一个请求文件中单独管理；

项目使用AntDesign、MUI（Material UI）

爱彼迎本身的设计风格更多偏向于Material UI，但是课程中也会尽量讲到AntDesign的使用方法；
项目中某些AntDesign、MUI中的组件会被拿过来使用；
但是多部分组件还是自己进行编写、封装、实现；

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

创建项目

◼ 创建项目的方式：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项目：

项目结构

目录结构：
- src/: 源代码目录，存放组件、页面、样式等。
- public/: 存放静态资源，如图片、字体等。
- assets/: 可存放项目中使用的资源文件，例如图片、字体、图标等。
- components/: 存放可复用的组件。
- pages/: 存放页面级组件。
- styles/: 存放全局样式文件。
- utils/: 存放通用函数。
- services/: 存放API调用相关代码。
- hooks/: 存放自定义Hook。
- tests/: 存放测试文件。
组件划分：
- 函数式组件：优先使用函数式组件，配合React Hooks使用。
- 逻辑与展示分离：在组件内部，将逻辑代码和展示代码分开，便于理解和维护。
文件命名：
- 文件命名采用驼峰式或帕斯卡命名法（例如：MyComponent.js）。
- 文件扩展名为.js或.jsx，具体视项目的配置而定。
样式：
- 使用模块化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
  // webpack
  webpack: {
   
    alias: {
   
      '@': resolve('src')