如何设置专业的 React 项目（包括截屏视频）

2025-05-26

如何设置专业的 React 项目（包括截屏视频）

当你开始构建一个新的 React 应用时，你可能会想知道如何以专业的方式进行设置。你应该使用哪些工具？从一开始你需要哪些库？

本文将基于最流行的 React 技术栈，指导您使用以下方式设置新应用程序：

  • Next.js
  • 打字稿
  • ESLint
  • Prettier
  • 样式组件
  • 柏
  • 故事书

下面的视频展示了我如何用这个技术栈为即将到来的自学 React 开发者训练营设置应用程序。视频几乎没有剪辑，展示了整个过程，而不仅仅是最终的效果。如果您需要快速指南，可以在此页面找到所有设置步骤。

Next.js 和 TypeScript

Next.js 是 React 的首选框架。它拥有许多简洁的功能，例如服务器端渲染，这些功能对许多专业应用程序至关重要。许多开发者倾向于在任何新的 React 项目中使用它。

--typescript此命令使用 TypeScript 创建一个新的 Next.js 应用程序。（如果您需要学习的内容太多，可以删除此选项。）



npx create-next-app@latest --typescript
Enter fullscreen mode Exit fullscreen mode

系统会提示你输入项目名称和你选择的包管理器。我直接选择了 npm。

注意：如果您计划在 GitHub 上托管该项目，您可能需要使用以下命令将master分支重命名为：maingit branch -m master main

ESLint

Next.js 应用程序已经设置了 ESLint，它用于通过静态分析代码来检测错误。

不过，在我看来，Next.js 自带的默认规则不够严格。例如，未使用的变量不会导致错误。ESLint文档中提供了一组标准规则。eslint:recommended我们可以在配置文件中扩展它eslintrc.json。



{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Prettier

Prettier 用于根据标准自动格式化您的代码。这使您的代码更具可读性，并节省大量手动工作。

您可以在 IDE 中使用 Prettier 插件。我使用 VS Code 及其Prettier 扩展，并设置以下设置，以便在保存文件时自动格式化。

无标题

要将Prettier 与 ESLint 集成，您可以使用eslint-config-prettier并将其添加到您的eslintrc.json配置中。这样，Prettier 和 ESLint 之间就不会发生冲突。



npm install --save-dev eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode 


{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "prettier"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Next.js 应用默认不使用 Prettier 格式。运行此命令npx prettier --write即可格式化所有文件。

样式组件

styled-components 是一个非常流行的自定义 CSS 库。Next.js 并不支持它，但这个官方示例仓库向我们展示了如何设置它。首先，我们安装这个库。



npm install styled-components
Enter fullscreen mode Exit fullscreen mode

然后我们在文件styledComponents: true中添加到编译器选项next.config.js。



const nextConfig = {
  reactStrictMode: true,
  compiler: {
    styledComponents: true,
  },
};
Enter fullscreen mode Exit fullscreen mode

此外，我们需要根据示例 repopages/_document.tsx创建文件以避免在初始页面加载时出现“无样式内容闪烁” 。



import Document from "next/document";
import { ServerStyleSheet } from "styled-components";
import type { DocumentContext } from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

就是这样。要使用全局样式或其他样式，您需要按照此处所示ThemeProvider编辑文件。pages/_app.tsx

柏

Cypress 是一种常用于编写端到端测试的工具（意味着它像真实用户一样测试从前端到数据库的整个系统）。

对于设置，Next.js 文档再次提供了很大的帮助。首先，我们安装 Cypress。



npm install --save-dev cypress
Enter fullscreen mode Exit fullscreen mode

然后我们将"cypress": "cypress open"其添加到scripts我们的文件中package.json。



{
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "cypress": "cypress open"
  },
Enter fullscreen mode Exit fullscreen mode

最后，运行npm run cypress以初始化项目。这会在你的代码库中创建一些文件夹和演示测试。然后 Cypress UI 会打开，你可以在其中运行演示测试。

打开测试文件时，你会发现 ESLint 会提示全局函数（例如describe或 ）it不存在。为了解决这些错误，我们可以安装 ESLint 插件并调整eslintsrc.json配置文件。



npm install eslint-plugin-cypress --save-dev
Enter fullscreen mode Exit fullscreen mode 


{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "prettier"
  ],
  "plugins": ["cypress"],
  "env": {
    "cypress/globals": true
  }
}
Enter fullscreen mode Exit fullscreen mode

故事书

Storybook 是一个广泛用于文档记录和可视化测试 UI 组件的工具。根据文档，我们首先需要进行初始化或投影。



npx sb init
Enter fullscreen mode Exit fullscreen mode

然后运行 ​​Storybook。这将打开一个新的浏览器标签页，您可以在其中试用一些演示组件。



npm run storybook
Enter fullscreen mode Exit fullscreen mode

自学 React 开发者训练营

文章来源：https://dev.to/profydev/how-to-set-up-a-professional-react-project-include-screencast-180f
Devto 翻译
PREV
Impress hiring managers by presenting your React projects like a pro - Part 2
NEXT
利用这 3 个 React 项目构想打造出色的作品集 - 第 3 部分