2024 年 12 个以上久经考验的 React 样板

选择最流行的 Web 框架来开始

最近，React 已成为有史以来最受欢迎的界面框架之一。根据 2023 年的一项调查，全球 40.58% 的开发人员使用 React.js，使其成为最受欢迎的 Web 框架之一。React.js 由 Facebook 开发，PayPal、Uber、Instagram 和 Airbnb 等其他科技巨头也依赖其构建用户界面。毫无疑问，React 的生产力、基于组件的架构和声明式语法相结合，促进了其广泛的采用和强大的社区支持。这意味着开发人员比以往任何时候都更频繁地使用 React 构建项目。

React 库在设计上不固执己见，这意味着它“开箱即用”，除了定义和管理组件的核心功能之外，几乎不包含任何其他功能。因此，如果不了解 props 传递、分解、构建 React 应用程序文件、整体扩展应用程序以及其他细节方面的最佳实践，很容易陷入困境。通过使用包含内置函数和配置的样板，可以避免这些陷阱，样板提供核心工具和库的全面基础，优化开发流程，并允许开发人员专注于构建应用程序逻辑，而无需处理初始设置和配置。换句话说，样板是启动应用程序开发的标准化起点。目前，在 GitHub 上搜索“react-boilerplate”可找到 44.8k 个代码库。问题在于，应该选择哪个模板进行开发？一个既适合您的应用程序，又有利于可扩展性和未来维护的模板。

React 样板的类型

过去，启动 React 项目最常用的方式是 create-react-app（CRA）——一个由 Facebook 官方支持的流行样板。然而，2023 年 3 月 16 日发布的新版 React 文档不再推荐 CRA 作为创建 React 程序的最佳解决方案。让我们考虑一下替代方案，进行比较，并确定启动项目的最佳方式。
通过深入研究 React 样板的各个方面，让我们来思考一下它们的划分标准：

库和配置：

• 极简样板：为 React 项目提供基本配置，包括基本设置（例如 Webpack、Babel 和 ESLint）。它们假设开发人员会根据需要添加某些库和功能。大多数样板都属于此类。
• 功能丰富的样板：预配置额外的库和工具。这些库和工具可能包括状态管理（例如 Redux）、路由（React Router）和测试，也可能包含基本的 UI 组件和页面，通过提供通用的 UI 元素和布局进一步加快开发速度。

认证和注册：

• 具有授权和注册的样板：包括登录、注册和用户会话的组件。
• 无需身份验证的样板：将身份验证实现留给开发人员。

全栈 vs. 仅前端：

• 全栈样板：提供构建 Web 应用程序的综合解决方案，涵盖前端（React）和后端。
• 仅前端样板：仅关注 React 接口。开发人员需要将其与所需的服务器集成。

UI 组件库：

• 带有 UI 组件的样板：包括一整套遵循一致设计模式的 UI 组件（例如，按钮、表单、模式）。
• 没有 UI 组件的样板：将组件的开发完全留给使用样板的开发人员。

付费与免费：

• 免费/开源样板：免费提供、社区支持且通常维护良好。
• 付费样板：一些商业模板提供附加功能、高级支持或扩展功能。

基于上述分类，可以说最流行的 React 样板，例如 Vite、Create React App (CRA)、Create Next App、Razzle，仅包含开始使用 React 开发所必需的基本库和配置（极简样板）。

React 模板选择标准

在开发过程中，决定使用哪个样板可能非常困难，因为这不仅关乎应用程序的创建，还关乎后续的扩展和维护。那么，如何从种类繁多的现有样板中选择合适的解决方案呢？通常情况下，该如何选择呢？以下是我们建议您在选择样板来启动项目时注意的几个关键点：

• 支持和维护选项：项目是否定期更新？
• 绩效分数
• 代码质量（结构清洁度、可扩展性、代码组织）
• 生产准备：该项目现在是否已准备好投入生产使用？
• 身份验证、路由、国际化、表单处理、测试、基本页面和 UI 组件等功能的可用性- 这个列表还可以继续，您只需要确定项目实施所需的功能，然后在样板中查找它们。

React 项目脚手架工具

开发 React 应用程序的初始步骤通常涉及选择 Vite、Create React App、Create Next App 或 Razzle 作为基础。它们提供类似框架的功能，尤其是在设置初始项目结构、配置构建工具和提供开发服务器方面。

Vite专注于在 Web 开发中提供极速的开发服务器和工作流速度。它在开发过程中使用自己的 ES 模块导入，从而加快了启动时间。

Create React App (CRA)简化了 Webpack、Babel 和其他构建工具的配置工作，让开发者能够专注于 React 代码的编写。它还包含热模块重载等功能，可提高开发效率。

Next.js是一个用于构建服务器渲染和静态生成的 Web 应用程序的 React 框架。它使用合理的默认值配置 Next.js 项目，包括服务器端渲染 (SSR)、基于文件的路由和 API 路由等功能。

Razzle是由 Airbnb 创建的构建工具，它简化了服务器端渲染。它简化了配置服务器端渲染设置的复杂性，使开发人员能够轻松创建功能多样的 JavaScript 应用程序。Razzle 支持代码拆分、CSS-in-JS 和热模块替换等功能，非常适合构建需要服务器端渲染的 React 应用程序。

上述构建工具通常被称为 React 样板。由于它们仅抽象了设置的复杂性，提供了基本配置并优化了构建工作流程，因此功能性不强，本身也不包含任何附加功能。因此，根据上述分类，我们将它们归类为最小样板。本质上，它们通常充当样板模板，也就是说，它们是创建功能更丰富的 React 样板的绝佳工具。

选定样板表

接下来，我们将考虑那些不收取许可费和/或收费提供功能的 React 样板，并考虑上次更新日期（不超过六个月）。基于此，我们考虑了 12 个样板*：

• 截至 2024 年 4 月

按功能比较样板

现在让我们仔细看看开发人员可以使用样板获得的功能以及其他需要考虑的事项：
API 集成：某些模板可能包含用于与特定 API 或服务器服务集成的配置。
状态管理解决方案： Redux、MobX、Recoil 或内置 React 状态管理等选项。此外，很难忽略异步 React Query。
测试配置：预定义的测试设置或根本没有。
身份验证和授权：是否规定了用户身份验证和授权以及如何处理它们，特别是是否与某些身份验证库集成；
国际化 (i18n) 和本地化：使用 react-i18next 或 react-intl 等库提供支持多种语言的能力。ESLint
规则合规性：不仅允许在代码格式化期间检测或修复问题，还允许识别潜在的错误。
样式解决方案：使用 CSS 模块、样式化组件或 UI 库的解决方案，这将确保轻松有效地重用样式化组件。
项目中的类型安全：使用 TypeScript 在开发过程中提供静态类型，并利用类或模块创建更具可扩展性和可靠性的应用程序。
应用主题选择：允许用户根据个人偏好或自动设置在明暗主题之间切换。
现成的表单组件：提供可在表单之间复用的组件，减少代码重复，并促进标准化。它们还可能包含内置验证和错误处理功能，使开发更加可靠。UI
组件库：提供现成的可定制组件，例如按钮和模态窗口，开发人员可以轻松地将其集成到应用程序中，从而节省从头开始设计和编写这些元素的时间和精力。
我们分析了每个样板，并得到了下表：

表格中样板的描述

Extensive-react-boilerplate。这款 React 样板适用于所有类型的项目。它不仅与后端样板nestjs-boilerplate完全兼容，而且可以作为独立的解决方案，这是其主要优势之一。此模板提供广泛的功能，例如：

• 用户身份验证和授权，包括使用 Google 或 Facebook 帐户的可能性。
• 页面私人或公共访问设置。
• ESLint 设置自定义规则以提高代码效率和清洁度。
• 类型安全，确保所编写代码的可靠性。
• 使用自定义 useLanguage 钩子进行项目本地化。
• E2E 测试支持。
• 由用户自行决定采用亮模式或暗模式。
• 基于 MUI 的受控组件库，默认集成 react-hook-form。因此，无需再花费额外时间将输入字段连接到控制器。
• 使用 React Query 进行状态管理以处理异步操作。
• 用户管理功能（CRUD）。
• 具有拖放区功​​能的头像选择和上传功能。
• 支持 Next.js 框架（SSR），以提高应用程序性能和 SEO 优化。

正如您所见，从上面提到的功能来看，该样板显著减少了项目的启动时间（大约 193 小时），值得考虑。

类别：功能丰富的样板、具有授权和注册的样板、仅限前端（并且具有完全兼容的后端样板，因此可以用作全栈样板）、免费。

React-starter-kit。一个基于 React 创建 Web 应用程序的模板。它预配置了 CSS-in-JS、Vitest、VSCode 设置、Cloudflare 支持和 SSR 等设置。它使用 Firestore 连接作为数据库。它包含一些 UI 组件的实现，例如基于 Joy UI 的工具栏或侧边栏。

类别：功能丰富的样板、具有授权和注册的样板、仅限前端、免费。

React-redux-saga-boilerplate。这是一个入门项目，用于创建使用 Redux 进行状态管理的 React 应用。它支持单元测试、端到端测试和 React-helmet，并使用 Emotion 库进行样式设置，从而简化了使用 JavaScript 的 CSS 样式。它包含一些自定义组件，例如使用样式化功能实现的页眉或页脚。

类别：功能丰富的样板、无需授权的样板、仅限前端、免费。

Next-js-Boilerplate。此样板具有灵活的代码结构，您只需选择并保存必要的功能即可。它支持与 Tailwind CSS 集成、使用 Clerk 进行身份验证，并兼容 SQLite、PostgreSQL 和 MySQL 数据库。单元测试使用 Jest 完成，并使用 Zod 库描述验证模式。

类别：功能丰富的样板、具有授权和注册的样板、仅限前端、免费。

Landy-react-template。此样板文件支持多语言，动画流畅，所有内容均存储在 JSON 文件中，用户无需具备 React.js 基础即可管理文本。它包含一组基于 styled-components 样式化 HTML 元素创建的组件（按钮、输入框、文本区域等）。

类别：功能丰富的样板、无需授权的样板、仅限前端、免费。

核心。基于快速项目创建工具 Vite 开发了一个现代化的模板。它支持 TypeScript 以确保类型安全，并包含 ESLint、Prettier、CommitLint、Husky 和 ​​Lint-Staged 的​​良好配置。

类别：简约样板、无需授权的样板、仅限前端、免费。

Nextjs-boilerplate。这个 React 样板使用 Next.js 生成静态页面。它支持 git 消息约定，使用 Plop 生成组件，并使用 Tailwind CSS 进行样式组织。它使用 Storybook 来记录组件文档。

类别：简约样板、无需授权的样板、仅限前端、免费。

React-pwa。一套现成的工具，可帮助您从零开始构建项目。它包含开发者创建 React 应用程序时通常需要的核心库、组件和实用程序的极简组合。它包含自己的 HOC，用于页面错误处理，并且基于 Vite 开发。

类别：功能丰富的样板、无需授权的样板、仅限前端、免费。

维生素。这是一个入门项目，包含 Tailwind CSS，带有基本样式重置功能以及一个可自动整理类的 Prettier 插件。测试部分使用了 Vitest、Testing Library 和 Cypress 等工具，但未包含 React UI 组件库。

类别：简约样板、无需授权的样板、仅限前端、免费。

Next-saas-stripe-starter。使用此样板，您可以使用 Next.js、Prisma、Planetscale、Auth.js v5、Resend、React Email、Shadcn/ui 和 Stripe 等功能扩展项目功能。它包含一个使用 Radix UI 和 Tailwind CSS 构建的组件库。

类别：功能丰富的样板、具有授权和注册的样板、全栈样板、免费。

Gatsby-starter-apple。一个用于创建具有良好响应式设计的应用程序的模板，其中包含移动菜单的动画。所用组件的样式基于 styled-components。该样板文件能够很好地支持搜索引擎优化，并具有 RSS 订阅功能。

类别：简约样板、无需授权的样板、仅限前端、免费。

Fullstack-typescript。这是一个用于快速启动项目的全栈应用程序。它拥有一个基于 Material UI 的自定义组件库，并使用 axios 进行客户端与服务器通信。它不支持某些状态管理技术，例如 Redux、MobX 等。

类别：简约样板、无需授权的样板、全栈样板、免费。

某些功能实现的特殊性

总的来说，React 模板提供了各种旨在加速和标准化开发过程的实现功能。它们包括 UI 组件库，并涵盖了样式、状态管理和基本 ESLint 配置的通用方法。

React UI 组件库

React 样板中的功能实现通常围绕模块化开发，其中组件被设计为可重用和可组合。分析当前的库并根据本文，以下可以被认为是最受欢迎的库：

我们可以肯定地说，Material UI 目前是最受欢迎的库，拥有 9.12 万个 GitHub 星标和超过 300 万次每周下载量。得益于其响应式网页设计 (RWD) 功能，您可以放心，您的应用程序将自动适应各种屏幕和设备。

造型解决方案

React 样板文件中通常包含 CSS 模块、styled-components 或 Sass 等样式解决方案。它们提供了不同的组件样式方法，在保持组件封装性的同时，提供了灵活性和可扩展性。

使用 styled-components 作为样式解决方案的优点：

• 该库自动跟踪页面上呈现的组件并仅应用它们的样式。
• 自动为样式生成唯一的类名，确保类名没有错误。
• 样式附加到特定组件，简化了 CSS 本身的删除。
• 轻松的动态样式（下面的代码示例属于bc-boilerplates）

const AvatarInputContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  position: "relative",
  flexDirection: "column",
  alignItems: "center",
  padding: theme.spacing(2),
  marginTop: theme.spacing(2),
  border: "1px dashed",
  borderColor: theme.palette.divider,
  borderRadius: theme.shape.borderRadius,
  cursor: "pointer",

  "&:hover": {
    borderColor: theme.palette.text.primary,
  },
}));

• 在设置样式时使用组件的动态 props。这可确保样式根据变量的值进行更新。

const StyledCollapseBtn = styled("button")<ICollapse>(({ isOpen, theme }) => ({
  justifySelf: "flex-end",
  color: COLOURS.black,
  backgroundColor: "transparent",
  border: "none",
  cursor: "pointer",
  paddingLeft: theme.spacing(2.5),
  position: "absolute",
  bottom:theme.spacing(3),
  left: isOpen ? "150px" : "unset",
}));

• 这允许在一个组件和另一个组件之间重复使用样式，或者在一个组件和另一个组件之间影响样式（父子关系）。

const Link = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: #BF4F74;
`;

const Icon = styled.svg`
flex: none;
transition: fill 0.25s;
width: 48px;
height: 48px;

${Link}:hover & {
  fill: rebeccapurple;
}
`;

状态管理

状态管理是简化应用程序状态处理、提供可扩展性和可维护性的另一个重要方面，尤其是在复杂的应用程序中。通常，在选择状态管理工具时会想到 Redux、MobX 和 Zustand。然而，它们是客户端库，与 React Query 之类的工具相比，它们用于存储异步数据的应用程序效率可能较低。

React Query 是一个服务器状态库，用于一些样板代码，例如bc-boilerplates。它不仅负责管理服务器和客户端之间的异步操作，还提供了在 React 和 Next.js 应用程序中搜索、缓存和更新数据的即用型功能。只需几行代码，React Query 就可以替换用于管理客户端状态缓存数据的样板代码。

样板中的 ESLint 规则

在项目开发过程中使用 ESLint 规则的效率还体现在编写自定义规则上。由于 ESLint 功能丰富且灵活，您不仅可以创建格式和规则，还可以考虑项目内部的决策。例如，在使用表单时，可以控制并警告开发人员可能出现的不必要的渲染、处理对象时的错误解决方案，或者简单地指出未使用的导入。例如，extensive-react-boilerplate可以解决以下问题：

• 警告有关不正确使用模式的规则

      {
        "selector": "ConditionalExpression[consequent.type=Literal][consequent.value=true][alternate.type=Literal][alternate.value=false]",
        "message": "Do not use \"condition ? true : false\". Simplify \"someVariable === 42 ? true : false \" to \"someVariable === 42\""
      },
      {
        "selector": "JSXElement[openingElement.name.property.name=Provider] JSXElement[openingElement.name.name]",
        "message": "Do not put your regular components inside Context \".Provider\". Create new component, for example ComponentProvider. Put Provider's logic to ComponentProvider. Render \"{children} instead of regular component. Wrap regular component via new ComponentProvider \". Example: \"src/services/auth/auth-provider\""
      },
      {
        "selector": "Property[key.name=/^(padding|margin|paddingLeft|paddingRight|paddingTop|paddingBottom|paddingVertical|marginLeft|marginRight|marginTop|marginBottom|marginVertical)$/][value.type=/^(Literal|UnaryExpression)$/]:not([value.value=\"0 !important\"]):not([value.value=\"0\"]):not([value.value=\"0 auto\"]):not([value.value=\"auto\"])",
        "message": "Use theme.spacing() instead of literal."
      },
      {
        "selector": "CallExpression[callee.name=/^(useQuery|useInfiniteQuery)$/] Property[key.name=queryKey]:not(:has(Identifier[name=key]))",
        "message": "Use key created via createQueryKeys function instead of your solution"
      },
      {
        "selector": "CallExpression[callee.name=refresh]",
        "message": "Do not use refresh() function for update or change result in react-query. Use \"queryClient.resetQueries\" or pass new filter data to queryKey."
      },
      {
        "selector": "ExpressionStatement[expression.callee.object.name=JSON][expression.callee.property.name=parse][expression.arguments.0.callee.object.name=JSON][expression.arguments.0.callee.property.name=stringify]",
        "message": "Do not use JSON.parse(JSON.stringify(...)) for deep copy. Use structuredClone instead."
      }

• 告知不受控制的渲染的可能性

      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFieldArray]",
        "message": "\"useFieldArray\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFieldArray's logic to separate component."
      },
      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useController]",
        "message": "\"useController\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useController's logic to separate component."
      },
      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormContext]",
        "message": "\"useFormContext\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormContext's logic to separate component."
      },
      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormState]",
        "message": "\"useFormState\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormState's logic to separate component."
      },
      {
        "selector": "CallExpression[callee.name=useForm][arguments.length=0], CallExpression[callee.name=useForm][arguments.length=1]:not(:has(Property[key.name=defaultValues]))",
        "message": "Pass object with \"defaultValues\" for correct \"formState\" behavior. More info here: https://react-hook-form.com/api/useform/formstate#main"
      }

结论

选择有效的 React 模板对于项目的成功至关重要。与其重复造轮子，不如充分利用精心挑选的样板文件，它可以显著加快开发进程，并奠定坚实的基础。选择样板文件时，我们建议您熟悉其目录结构和配置文件，以了解其底层基础、易集成性、模块化以及与技术需求的最大契合度。同时，请考虑其现有功能是否能够满足您的需求。这可以节省开发时间，并有可能提供维护良好且经过测试的代码。

由于此类模板功能不足，经常会遇到如何同时应用多个样板的问题，因此bc-boilerplates团队提出了extensive-react-boilerplate的解决方案。我们认为，它能够在众多知名产品中脱颖而出，成为值得您关注的有力竞争者。我们诚邀您试用，并期待您以“新星”的形式提供反馈。

本文全部归功于Olena Vlasenko和Liudmyla Kostenko 🇺🇦