利用Create React App实现零配置开发的最佳实践 – wiki基地

作者： /

Create React App 最佳实践：打造高效零配置 React 开发体验

在现代 Web 开发中，React 已经成为构建用户界面的首选 JavaScript 库。然而，在 React 项目的初始设置阶段，开发者往往需要花费大量时间和精力在配置 Webpack、Babel、ESLint 等工具上。Create React App (CRA) 的出现，为 React 开发者提供了一个零配置的开发环境，极大地简化了项目搭建过程，让开发者能够专注于业务逻辑的实现。

本文将深入探讨 Create React App 的最佳实践，帮助开发者充分利用 CRA 的优势，打造高效、可维护的 React 项目。我们将涵盖从项目初始化、目录结构、代码规范，到性能优化、测试、部署等各个方面，力求提供一份全面、实用的 CRA 使用指南。

一、项目初始化与基本配置

  1. 使用最新版本的 Create React App

始终使用最新版本的 CRA 来创建项目。新版本通常包含了性能改进、bug 修复和新特性。

bash
npx create-react-app my-app
cd my-app
npm start
或者使用yarn
bash
yarn create react-app my-app
cd my-app
yarn start

  1. 选择合适的模板 (TypeScript)

CRA 支持 JavaScript 和 TypeScript 两种模板。对于新项目，强烈建议使用 TypeScript 模板。TypeScript 提供了静态类型检查，可以在编译时发现潜在的错误，提高代码质量和可维护性。

bash
npx create-react-app my-app --template typescript

  1. 理解 CRA 的内置配置

CRA 内部已经集成了 Webpack、Babel、ESLint 等工具，并提供了合理的默认配置。开发者无需手动配置这些工具，可以直接开始编写代码。但是，了解 CRA 的内置配置可以帮助我们更好地理解项目的构建过程，并在需要时进行自定义。可以通过 npm run eject (或 yarn eject) 命令来暴露 CRA 的内部配置，但这会使项目失去 CRA 的零配置特性，因此不推荐在生产环境中使用。只应该在非常需要自定义配置，并且你完全理解自己在做的事情时才执行 eject。

二、目录结构与代码组织

一个清晰、合理的目录结构对于项目的可维护性至关重要。以下是一种推荐的目录结构：

my-app/
├── public/ # 静态资源 (HTML, favicon, images)
│ ├── index.html
│ └── ...
├── src/ # 源代码
│ ├── components/ # 通用组件
│ │ ├── Button/
│ │ │ ├── Button.tsx
│ │ │ ├── Button.test.tsx
│ │ │ └── Button.module.css # 或 .scss, .less
│ │ └── ...
│ ├── features/ # 特性模块（按业务功能划分）
│ │ ├── User/ # 用户相关
│ │ │ ├── components/ # 该feature的组件
│ │ │ ├── api.ts # 该feature的api
│ │ │ ├── UserList.tsx
│ │ │ └── ...
│ │ └── ...
│ ├── pages/ # 页面组件 (通常对应路由)
│ │ ├── Home/
│ │ │ ├── Home.tsx
│ │ │ ├── Home.module.css
│ │ │ └── ...
│ │ ├── About/
│ │ └── ...
│ ├── App.tsx # 根组件
│ ├── App.test.tsx
│ ├── index.tsx # 应用入口
│ ├── index.css # 全局样式
│ ├── services/ # API 请求等服务
│ ├── utils/ # 工具函数
│ ├── types/ # TypeScript 类型定义 (可选)
│ ├── store/ # 状态管理 (Redux, Zustand, etc.)
│ ├── hooks/ # 自定义 Hooks
│ └── setupTests.ts # 测试环境配置
├── .env # 环境变量
├── .gitignore
├── package.json
├── tsconfig.json # TypeScript 配置 (如果使用 TypeScript)
└── README.md

关键点解释：

  • public/ 目录： 存放静态资源，如 HTML 文件、favicon、图片等。这些文件不会被 Webpack 处理。
  • src/ 目录： 存放项目的源代码。
  • components/ 目录： 存放通用的、可复用的组件。每个组件通常包含一个 .tsx 文件（组件逻辑）、一个 .test.tsx 文件（单元测试）和一个 .module.css 文件（样式，推荐使用 CSS Modules）。
  • features目录: 存放按业务功能划分的模块。例如用户模块,支付模块. 每个模块可以有自己的组件, api请求方法, 样式等.
  • pages/ 目录： 存放页面级别的组件，通常对应于应用的路由。
  • App.tsx： 应用的根组件。
  • index.tsx： 应用的入口文件，负责渲染根组件。
  • services/目录: 存放和后端API交互的逻辑, 将API请求封装成函数.
  • utils/ 目录： 存放工具函数，如日期格式化、数据处理等。
  • types/ 目录： 存放全局的 TypeScript 类型定义 (如果使用 TypeScript)。
  • store/ 目录： 存放状态管理相关的代码 (如果使用 Redux、MobX 等状态管理库)。
  • hooks/目录: 存放自定义的React Hooks.
  • .env 文件： 存放环境变量，如 API 地址、密钥等。
  • setupTests.ts： 用于配置测试环境，如设置全局的 mock、配置测试库等。

三、代码规范与质量

  1. 使用 ESLint 和 Prettier

CRA 默认集成了 ESLint，用于检查代码风格和潜在的错误。强烈建议结合 Prettier 使用，实现代码的自动格式化。

  • 安装 Prettier：

    bash
    npm install --save-dev --save-exact prettier
    或者
    bash
    yarn add --dev --exact prettier

  • 配置 Prettier（在项目根目录下创建 .prettierrc.js 或 .prettierrc.json 文件）：

    javascript
    // .prettierrc.js
    module.exports = {
    semi: true,
    trailingComma: 'all',
    singleQuote: true,
    printWidth: 80,
    tabWidth: 2,
    };

  • 配置 ESLint 与 Prettier 集成：

    bash
    npm install --save-dev eslint-config-prettier eslint-plugin-prettier
    或者
    bash
    yarn add --dev eslint-config-prettier eslint-plugin-prettier
    在 .eslintrc.js (CRA 自动生成的) 中添加：
    javascript
    extends: [
    // ... 其他配置
    'plugin:prettier/recommended', // 放在最后
    ],

  • 在 VS Code 中安装 ESLint 和 Prettier 插件，并配置保存时自动格式化。

  • 遵循 Airbnb 代码风格规范

Airbnb 的 JavaScript 代码风格规范是业界广泛认可的规范。CRA 默认的 ESLint 配置已经部分遵循了 Airbnb 规范。可以通过安装 eslint-config-airbnb 来进一步增强：

bash
npx install-peerdeps --dev eslint-config-airbnb
或者
yarn add -D eslint-config-airbnb @typescript-eslint/eslint-plugin@^6.0.0 @typescript-eslint/parser@^6.0.0 eslint@^8.0.0 eslint-plugin-import@^2.25.2 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react@^7.28.0 eslint-plugin-react-hooks@^4.3.0

然后在 .eslintrc.js 中修改 extends：

javascript
extends: [
'airbnb',
'airbnb-typescript', // 如果使用 TypeScript
'plugin:prettier/recommended', // 放在最后
],

  1. 编写有意义的注释

良好的注释可以提高代码的可读性和可维护性。注释应该解释代码的意图、逻辑和复杂的部分，而不是简单地重复代码的功能。 使用JSDoc/TSDoc风格的注释。

  1. 组件设计原则

  2. 单一职责原则： 每个组件应该只负责一个明确的功能。

  3. 高内聚、低耦合： 组件内部的代码应该紧密相关，组件之间的依赖关系应该尽量减少。
  4. 可复用性： 尽量设计通用的、可复用的组件。
  5. 可组合性： 将复杂的组件拆分成更小的、可组合的组件。
  6. 使用 Props 传递数据： 通过 props 将数据从父组件传递到子组件。
  7. 使用 State 管理组件内部状态： 使用 useState 或 useReducer Hook 来管理组件内部的状态。

  8. 避免过深的组件嵌套： 过深的组件嵌套会影响性能和可读性。可以使用 React Context 或状态管理库来解决。

  9. 使用 Hooks

Hooks 是 React 16.8 引入的新特性，可以让你在函数组件中使用 state 和其他 React 特性。使用 Hooks 可以使组件代码更简洁、更易于理解和测试。

  • useState： 用于管理组件的状态。
  • useEffect： 用于处理副作用，如数据获取、DOM 操作、订阅事件等。
  • useContext： 用于访问 React Context。
  • useReducer： 用于管理复杂的状态逻辑。
  • useCallback： 用于缓存函数，避免不必要的重新渲染。
  • useMemo： 用于缓存计算结果，避免不必要的重复计算。
  • 自定义 Hooks： 可以将组件的逻辑提取到自定义 Hooks 中，实现代码的复用。

四、性能优化

  1. 代码分割 (Code Splitting)

CRA 默认支持代码分割，可以将应用的代码拆分成多个 chunk，按需加载，减少初始加载时间。

  • 使用 React.lazy 和 Suspense 进行组件级别的代码分割：

    “`javascript
    import React, { lazy, Suspense } from ‘react’;

    const LazyComponent = lazy(() => import(‘./LazyComponent’));

    function MyComponent() {
    return (

    Loading…\

    }>

);
}
“`

  • 使用动态 import() 进行路由级别的代码分割：
    结合 react-router-dom

    “`javascript
    import { BrowserRouter as Router, Route, Routes } from ‘react-router-dom’;
    import React, { lazy, Suspense } from ‘react’;

    const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

function App() {
  return (
    <Router>
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/about" element={<About />} />
          </Routes>
       </Suspense>
    </Router>
  );
}

    “`

  • 生产环境构建

    • CRA 提供了 npm run build (或 yarn build) 命令来构建生产环境的代码。生产环境构建会对代码进行压缩、优化和混淆，减小文件体积，提高加载速度。

    1. 图片优化

    2. 使用 WebP 格式的图片，可以显著减小图片体积。

    3. 对图片进行压缩，可以使用工具如 TinyPNG、ImageOptim 等。
    4. 使用 <img> 标签的 srcset 属性，为不同屏幕密度的设备提供不同尺寸的图片。

    5. 使用懒加载 (Lazy Loading) 技术，延迟加载不在视口内的图片。

    6. 使用 CDN 加速静态资源

    将静态资源部署到 CDN 上，可以利用 CDN 的分布式节点，加快资源加载速度，减轻服务器压力。

    1. 避免不必要的渲染

      • 使用 React.memo 避免函数式组件在props不变的情况下重新渲染。
      • 使用 useMemo 和 useCallback 避免重复计算和创建函数。
      • 使用虚拟化列表 (如 react-window 或 react-virtualized) 来渲染大型列表，只渲染可见的列表项。

    2. 开启Gzip压缩
      大多数服务器都支持Gzip压缩。 开启后可以大幅减少传输的资源大小。

    五、测试

    CRA 默认集成了 Jest 作为测试框架，并提供了 react-testing-library 用于编写 UI 测试。

    1. 单元测试

    单元测试用于测试组件的逻辑是否正确。使用 react-testing-library 可以模拟用户交互，测试组件的渲染结果和行为。

    “`javascript
    // Button.test.tsx
    import React from ‘react’;
    import { render, screen, fireEvent } from ‘@testing-library/react’;
    import Button from ‘./Button’;

    test(‘renders button with text’, () => {
    render(;
    }
    “`

    1. 使用 Sass/SCSS 或 Less
      CRA 内置了对Sass/SCSS 和 Less 的支持。只需安装相应的预处理器：

      bash
      npm install sass
      # 或者
      yarn add sass
      或者
      npm install less less-loader --save-dev
      # 或者
      yarn add less less-loader --dev
      然后你就可以把你的样式文件命名为 .scss, .sass 或 .less， CRA会自动处理它们。

    2. 使用自定义 Hooks

    自定义 Hooks 可以将组件的逻辑提取出来，实现代码的复用。自定义 Hooks 的名称应该以 use 开头。

    “`javascript
    // useCounter.js
    import { useState } from ‘react’;

    function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);

     const increment = () => setCount(count + 1);
 const decrement = () => setCount(count - 1);

 return { count, increment, decrement };

    }

    export default useCounter;
    “`

    1. 使用 Proxy 代理

    在开发环境中，可以使用CRA内置的代理功能来解决跨域问题. 在package.json中添加:

     ```json
 "proxy": "http://localhost:5000",
 ```

    这将把所有未知请求代理到 http://localhost:5000.

    1. 使用绝对路径导入

    CRA 支持使用绝对路径导入模块, 可以避免使用相对路径 ../../../components/Button. 在项目根目录创建 jsconfig.json 或 tsconfig.json (如果使用 TypeScript):

    ```json
// jsconfig.json 或 tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
```

    然后就可以这样导入：
    javascript
    import Button from 'components/Button';

    总结

    Create React App 为 React 开发者提供了一个零配置的开发环境，极大地提高了开发效率。通过遵循本文介绍的最佳实践，开发者可以充分利用 CRA 的优势，打造高效、可维护的 React 项目。

    记住，最佳实践并非一成不变，需要根据项目的具体情况进行调整。希望本文能为你提供有价值的参考，帮助你更好地使用 Create React App 进行 React 开发。

    发表评论

    您的邮箱地址不会被公开。 必填项已用 * 标注

    滚动至顶部