在使用React进行开发时，存在各种方便的工具和库。在这里，我将介绍在使用React开发单页面应用（SPA）时，我通常在开始时引入的一些东西。基本上，我介绍了从与代码相关的一般标准工具到与构建和测试相关的一切。

我在我们家的React开发中经常使用的工具

建筑工具: Vite

我使用Vite作为React的构建工具。通常，在开始创建React应用程序时，我们会引入构建工具或类似Next.js的框架来生成应用程序的模板。如果我正在开发小型SPA且需要服务器端，我通常会选择使用Python等其他语言，因此选择了Vite。但是，如果有大型应用程序或需要SSR等需求，最近也经常使用Next.js。提到React的构建工具，还有webpack和Create React App，但由于Vite构建速度更快，因此我选择了Vite。Vite的易用性和配置性与Create React App没有特别大的差异，但从使用感受来看，Vite比Create React App更快。

2. 编程语言: TypeScript

TypeScript是一种扩展JavaScript的编程语言，它可以进行静态类型检查和其他附加功能。React可以仅使用JavaScript编写，但是使用TypeScript可以享受到静态类型检查的好处，因此基本上建议使用TypeScript进行编写。引入TypeScript并不复杂，只需在使用Vite生成应用程序模板时指定TypeScript即可一同生成。使用TypeScript本身并不困难，因为诸如VSCode等功能强大的编辑器可以提供各种支持（例如，在鼠标悬停在变量上时显示类型定义等），只需充分利用这些支持即可。

3. UI组件库：Ant Design

在中国，引入UI组件库并不是必需的。如果引入，您可以使用已经实现得非常好的按钮、表格、模态框、弹出框等常用前端组件，因此即使不花费太多时间在设计上，也可以创建出漂亮的界面。Ant Design是一款非常受欢迎的UI组件库，由阿里巴巴开发。我选择使用它主要是因为我已经熟悉它的使用。当然还有其他一些像Material-UI这样的UI组件库，可以根据个人喜好进行选择。

4. 路由库：React Router。

使用React创建应用程序时，所有页面都会在同一个URL下生成。但是，如果想要用户页面在/user，商品页面在/item等不同的URL下显示，可以使用React Router来实现。

5. CSS相关：SCSS和CSS模块

Web应用的前端部分由HTML、JavaScript和CSS组成，而SCSS和CSS模块是用来方便处理CSS部分的工具。

首先，SCSS是对CSS语法的扩展，可以使用变量和嵌套结构。因此，可以以易于管理的形式编写代码，例如将颜色定义放在单独的文件中。

/* CSSの例 */
.header {
  background-color: #0000ff;
}
.header a {
  color: #ff0000;
}

/* SCSSの例 */
$primary-color: #0000ff;
$link-color: #ff0000;

.header {
  background-color: $primary-color;
  a {
    color: $link-color;
  }
}

接下来是关于CSS Modules的部分，你可以在React代码中通过导入.modules.scss文件并将CSS应用到组件级别来实现。通常，由于CSS是全局应用的，所以需要小心命名以确保在为每个组件创建.css文件时不会发生名称冲突。但当使用CSS Modules时，你可以像下面这样通过className={styles.title}来写class名称，并且在渲染时会为class名称添加一个唯一的字符串，因此你不再需要在代码中担心名称冲突。这使得它与像React这样的组件化框架非常匹配，使得你可以独立管理包含样式的组件。

/* ./Component.module.scss */

.title {
  background-color: #fff;
}

// Component.tsx

import React from 'react';
import styles from './Component.module.css';

const Component = () => {
  return <div className={styles.title}>User Component</div>;
};

export default Component;

6. 静态代码分析工具：ESLint，Prettier

ESLint是一种用于项目内编码规范和检查的JavaScript静态分析工具，Prettier用于自动格式化代码的缩进、换行等。由于在之后安装静态分析工具会导致代码难以修改，因此在开始项目开发之前需要安装它们。

7. 制作人员：编剧

Playwright是一种工具，可用于前端测试和网页抓取等操作。类似的工具还有Selenium和TestCafe。前端的单元测试通常会使用Jest或React Testing Library等工具，但是Playwright可以在实际浏览器中自动操作并进行测试，以绘制出应用程序正在显示的浏览器状态。特别是Playwright有以下方便的UI模式：

由于需要自动操作浏览器，因此在测试运行环境中需要浏览器。特别是如果想要以无头方式运行，可能需要准备一些环境，这可能会有些麻烦。但是，使用Playwright官方提供的Docker镜像就很方便，因为一切必要的东西都已经包含在其中。

总结

我在React中经常使用的工具向大家介绍一下。如果经常进行React开发，可能会使用或引入类似的工具。如果还有其他常用的工具，请在评论栏中留言。