frontend-engineer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Engineer

前端工程师

Comprehensive guide for modern React development, emphasizing Suspense-based data fetching, lazy loading, proper file organization, and performance optimization.

现代React开发的综合指南，重点介绍基于Suspense的数据获取、懒加载、规范的文件组织以及性能优化。

When to Use

适用场景

Creating new components or pages
Building new features
Fetching data with TanStack Query
Setting up routing with TanStack Router
Styling components
Performance optimization
Organizing frontend code
TypeScript best practices

创建新组件或页面
开发新功能模块
使用TanStack Query获取数据
配置TanStack Router路由
组件样式编写
性能优化
前端代码组织
TypeScript最佳实践

Quick Start

快速开始

New Component Checklist

新组件检查清单

Use
```
React.FC<Props>
```
pattern with TypeScript
Lazy load if heavy component:
```
React.lazy(() => import())
```
Wrap in
```
<SuspenseLoader>
```
for loading states
Use
```
useSuspenseQuery
```
for data fetching
Import aliases:
```
@/
```
,
```
~types
```
,
```
~components
```
,
```
~features
```
Styles: Inline if <100 lines, separate file if >100 lines
Use
```
useCallback
```
for event handlers passed to children
Default export at bottom
No early returns with loading spinners
Use notification system for user feedback

使用TypeScript的
```
React.FC<Props>
```
模式
若为大型组件则使用懒加载：
```
React.lazy(() => import())
```
用
```
<SuspenseLoader>
```
包裹以处理加载状态
使用
```
useSuspenseQuery
```
进行数据获取
导入别名：
```
@/
```
,
```
~types
```
,
```
~components
```
,
```
~features
```
样式：代码少于100行使用内联样式，多于100行使用单独文件
传递给子组件的事件处理器使用
```
useCallback
```
在文件底部使用默认导出
不要用提前返回的方式实现加载动画
使用通知系统向用户反馈信息

New Feature Checklist

新功能模块检查清单

Create
```
features/{feature-name}/
```
directory
Create subdirectories:
```
api/
```
,
```
components/
```
,
```
hooks/
```
,
```
helpers/
```
,
```
types/
```
Create API service file:
```
api/{feature}Api.ts
```
Set up TypeScript types in
```
types/
```
Create route in
```
routes/{feature-name}/index.tsx
```
Lazy load feature components
Use Suspense boundaries
Export public API from feature
```
index.ts
```

创建
```
features/{feature-name}/
```
目录
创建子目录：
```
api/
```
,
```
components/
```
,
```
hooks/
```
,
```
helpers/
```
,
```
types/
```
创建API服务文件：
```
api/{feature}Api.ts
```
在
```
types/
```
目录中定义TypeScript类型
在
```
routes/{feature-name}/index.tsx
```
中配置路由
懒加载功能模块组件
使用Suspense边界
从功能模块的
```
index.ts
```
导出公共API

Core Principles

核心原则

Lazy Load Everything Heavy: Routes, DataGrid, charts, editors
Suspense for Loading: Use SuspenseLoader, not early returns
useSuspenseQuery: Primary data fetching pattern for new code
Features are Organized: api/, components/, hooks/, helpers/ subdirs
Styles Based on Size: <100 inline, >100 separate
Import Aliases: Use @/, ~types, ~components, ~features
No Early Returns: Prevents layout shift
TypeScript First: Strict mode, no
```
any
```
type

大型资源全懒加载：路由、DataGrid、图表、编辑器等
用Suspense处理加载状态：使用SuspenseLoader，而非提前返回
useSuspenseQuery优先：新代码的主要数据获取模式
功能模块化组织：包含api/、components/、hooks/、helpers/子目录
按代码量选择样式方式：少于100行内联，多于100行单独文件
使用导入别名：使用@/、~types、~components、~features
避免提前返回：防止布局偏移
TypeScript优先：严格模式，禁止使用
```
any
```
类型

Implementation Workflow

实施流程

When implementing frontend code:

Check for existing workflow patterns (spec-first, TDD, etc.) and follow them
Ensure code passes CI checks (types, tests, lint) before committing
Group related changes with tests in atomic commits

在编写前端代码时：

检查现有工作流模式（如先写规范、测试驱动开发等）并遵循
确保代码在提交前通过CI检查（类型校验、测试、代码规范）
将相关修改与测试分组，进行原子提交

References

参考资料

For detailed guidance, see:

```
references/component-patterns.md
```
- Modern React component patterns
```
references/data-fetching.md
```
- Suspense-based data fetching
```
references/file-organization.md
```
- Feature-based organization
```
references/styling-guide.md
```
- Styling patterns and best practices
```
references/routing-guide.md
```
- TanStack Router patterns
```
references/performance.md
```
- Performance optimization
```
references/typescript-standards.md
```
- TypeScript best practices

如需详细指导，请参阅：

```
references/component-patterns.md
```
- 现代React组件模式
```
references/data-fetching.md
```
- 基于Suspense的数据获取
```
references/file-organization.md
```
- 基于功能的文件组织
```
references/styling-guide.md
```
- 样式模式与最佳实践
```
references/routing-guide.md
```
- TanStack Router模式
```
references/performance.md
```
- 性能优化
```
references/typescript-standards.md
```
- TypeScript最佳实践