ReactUSWDS 组件库使用教程

ReactUSWDS 组件库使用教程

react-uswds USWDS 3.0 components built in React 项目地址: https://gitcode.com/gh_mirrors/re/react-uswds

1. 项目介绍

ReactUSWDS 是一个基于 React 和 TypeScript 构建的前端组件库，旨在遵循美国 Web 设计系统（USWDS）3.0 的设计模式。该项目的主要目标是提供符合 USWDS 规范的常见 UI 组件，从而减少基于该标准的项目的 UI 开发工作量。

ReactUSWDS 的主要特点包括：

• 基于 USWDS 3.0 设计模式
• 使用 React 和 TypeScript 构建
• 提供丰富的 UI 组件
• 遵循最佳实践，确保组件的可访问性和语义化

2. 项目快速启动

安装

首先，使用 npm 或 yarn 安装 @trussworks/react-uswds 包：

yarn add @trussworks/react-uswds
# 或者
npm i @trussworks/react-uswds

使用

在项目中导入 ReactUSWDS 组件，例如 Alert 组件：

import { Alert } from '@trussworks/react-uswds';

function App() {
  return (
    <div>
      <Alert type="success" heading="Success">
        This is a success alert!
      </Alert>
    </div>
  );
}

export default App;

确保在项目中导入 ReactUSWDS 的 CSS 文件：

@import '~@trussworks/react-uswds/lib/index.css';

如果项目中尚未使用 USWDS，还需要导入 USWDS 的样式：

@import '~uswds/dist/css/uswds.min.css';

3. 应用案例和最佳实践

ReactUSWDS 已经被多个联邦和州政府项目采用，以下是一些应用案例：

• DOL Unemployment Insurance Claimant Experience Pilot
• New Jersey's Unemployment Insurance Claimant Intake Pilot
• USA.gov Vote.gov Search.gov
• CDC ReportStream EpiSync National Electronic Disease Surveillance System Base System
• Centers for Medicare & Medicaid Services (CMS): EASi Application Model Innovation Tool (MINT)

最佳实践包括：

• 确保使用与 ReactUSWDS 版本匹配的 USWDS 版本，以避免意外的标记和 CSS 组合问题。
• 不要在项目中同时使用 USWDS 的 JavaScript 文件，以避免某些组件（如 ComboBox）初始化两次。

4. 典型生态项目

ReactUSWDS 可以与其他基于 React 的项目和框架结合使用，以下是一些典型的生态项目：

• NASA's Americana Remix stack
• USDS's Gatsby starter template
• Nava's Next.js starter template

这些项目提供了与 ReactUSWDS 结合使用的示例和最佳实践，帮助开发者更好地理解和应用 ReactUSWDS 组件库。

---

通过本教程，您应该能够快速上手使用 ReactUSWDS 组件库，并了解其在实际项目中的应用和最佳实践。

react-uswds USWDS 3.0 components built in React 项目地址: https://gitcode.com/gh_mirrors/re/react-uswds