Leon . Kang
Back to articles
Coding 2/2/2026 8 min read

秩序与美:我如何构建我的个人 Web 空间 (React 19 + TS 5 + Tailwind 4)

🌟 愿景

一直想做一个介于“随手涂鸦”和“工业级产品”之间的东西。通过坚持 TDD 流程和组件驱动开发(CDD),为自己搭建了一套既能玩转复杂逻辑,又能保持视觉丝滑的 Web 应用框架。

🚀 技术方案

“三剑客”的使用心得

  • React 19: 为什么非它不可?因为它早已超越了 UI 库,成为了我的思维底座。特别是 React 19 的 Actions 模式和 use 原语,让原本繁琐的异步逻辑和状态管理变得非常纯粹。这种声明式的开发范式,是我构建高度抽象且可复用的 RT 组件集的核心基石。
  • TypeScript 5: TS 不仅仅是类型标注,它是我的“防错网”。我利用 TS 5 的声明式特性在组件间建立了强类型契约,这让我在大范围重构代码时心态非常放松。
  • Tailwind CSS 4: 脱离了以前繁琐的配置,Tailwind 4 的纯 CSS 配置模式让我管理设计令牌(Design Tokens)时感觉顺手多了。

基础设施的选择

  • Ant Design 6: 我把它作为视觉基石,因为它提供了极佳的组件一致性。
  • React Router v7: 它统一了数据加载和状态持久化,让这个 Web 应用用起来有种原生 App 的流畅感。
  • Redux Toolkit & TanStack Query: RTK 帮我打理 UI 状态,Query 负责和服务器同步数据,缓存和预取做得非常到位。

📁 RT 组件库

我根据原子设计理念,自己写了一套名为 RT (React-Toolkit) 的组件库。它们是我整个应用的视觉基础:

src/components/
├── RTHeading/      # 我设计的标题系统,兼顾 SEO 和视觉节奏
├── RTText/         # 专门处理多语言排版和行高的正文组件
├── RTButton/       # 交互核心,我集成了防抖和触感反馈
├── RTStack/        # Flexbox 辅助组件,帮我减少了大量的零散 CSS
├── RTImage/        # 会“偷懒”的图片加载器,支持渐进式显示
└── RTContainer/    # 响应式安全区域控制

🛠 对开发体验 (DX) 的偏执

我深信,好的流程才能出好的产品。在开发这个项目时,我有几个坚持:

  • Biome: 我抛弃了以往 ESLint + Prettier 那套笨重的配置。Biome 运行得极快,让我能更专注于写代码本身,而不是去修格式。
  • Storybook 10: 我的组件都是在 Storybook 里独立“练出来的”。我会在这里测试每一种边缘情况,确保它们在任何地方都不掉链子。
  • Strict TDD: 核心逻辑我坚持“先写测试,后写代码”。这种契约精神给了我长期维护这个项目的信心。

🎨 视觉与交互的“小巧思”

我喜欢在细节上下功夫。我集成了 tsparticlesTextTypewriter 这种轻量级的库,不想让数据看起来太死板。配合 Tailwind 的微过渡动画,我希望你在点击每一个按钮时都能感受到即时的“呼吸感”。

🌍 三语切换的“灵魂”

通过 react-i18next,我实现了中、英、日三语切换。我不只是做了文字翻译,连布局都根据不同语言的长度做了自适应,确保不管你读哪种语言,体验都是一致的。

📁 项目目录概览

src/
├── app/
│   ├── core/           # 核心应用配置(Providers, Store, Theme)
│   ├── resume/         # 模块化业务视图
│   └── nav/            # 路由网格配置
├── components/         # 自研 RT (React-Toolkit) 组件库
├── shared/
│   ├── api/            # 强类型 API 客户端 (Axios)
│   ├── hooks/          # 高度抽象的自定义复用逻辑
│   ├── utils/          # 函数式工具方法
│   └── forms/          # 基于 RHF + Zod 的表单解决方案
├── i18n/               # 国际化多语言资源
└── styles/             # Tailwind 4 现代样式系统