frontend-react

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Development Skill

React开发技能

Comprehensive skill for modern React development, focusing on Next.js, TypeScript, Tailwind CSS, and the wider React ecosystem.

全面的现代React开发技能，聚焦Next.js、TypeScript、Tailwind CSS及更广泛的React生态系统。

Technology Stack

技术栈

Core Framework: React + Next.js

核心框架：React + Next.js

React Fundamentals

React基础

Component-Based: Declarative UI building blocks
Hooks: Functional state and side-effect management (
```
useState
```
,
```
useEffect
```
,
```
useContext
```
)
Virtual DOM: Efficient reconciliation and rendering
React Server Components (RSC): Server-side rendering with zero client-side bundle size for static content

基于组件：声明式UI构建块
Hooks：函数式状态和副作用管理（
```
useState
```
、
```
useEffect
```
、
```
useContext
```
）
虚拟DOM：高效的协调与渲染
React Server Components (RSC)：服务端渲染，静态内容的客户端包体积为零

Next.js Features (App Router)

Next.js特性（App Router）

App Router: File-system based routing in
```
app/
```
directory
Server Actions: Direct server-side mutations from client components
Streaming SSR: Progressive rendering with Suspense
Metadata API: SEO and social share optimization
Route Handlers: API endpoints (GET, POST, etc.) in
```
route.ts
```
files
Middleware: Request interception and processing

App Router：基于
```
app/
```
目录的文件系统路由
Server Actions：从客户端组件直接调用服务端突变操作
流式SSR：结合Suspense的渐进式渲染
Metadata API：SEO与社交分享优化
Route Handlers：在
```
route.ts
```
文件中定义API端点（GET、POST等）
Middleware：请求拦截与处理

UI Framework: Tailwind CSS + shadcn/ui

UI框架：Tailwind CSS + shadcn/ui

Tailwind CSS

Utility-first CSS framework
Responsive design with prefixes (
```
md:
```
,
```
lg:
```
)
Custom configuration via
```
tailwind.config.ts
```
Dark mode support

实用优先的CSS框架
带前缀的响应式设计（
```
md:
```
、
```
lg:
```
）
通过
```
tailwind.config.ts
```
进行自定义配置
支持暗黑模式

shadcn/ui

Reusable components built with Radix UI and Tailwind CSS
Accessible and customizable
"Own your code" philosophy (components copied to your project)
Key Components: Button, Dialog, Form, Dropdown, Card, Sheet

基于Radix UI和Tailwind CSS构建的可复用组件
无障碍且可定制
“自主掌控代码”理念（组件复制到你的项目中）
核心组件：Button、Dialog、Form、Dropdown、Card、Sheet

State Management

状态管理

Local State:
```
useState
```
,
```
useReducer
```
Global State: React Context, Zustand (for lightweight global state)
Server State: TanStack Query (React Query) for async data fetching and caching

本地状态：
```
useState
```
、
```
useReducer
```
全局状态：React Context、Zustand（轻量级全局状态管理）
服务端状态：TanStack Query（React Query）用于异步数据获取与缓存

Project Architecture

项目架构

Recommended Directory Structure (Next.js App Router)

推荐目录结构（Next.js App Router）

src/
├── app/
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page
│   ├── globals.css        # Global styles
│   ├── (auth)/            # Route group (doesn't affect URL path)
│   │   ├── login/
│   │   │   └── page.tsx
│   │   └── register/
│   │       └── page.tsx
│   └── api/               # API routes
├── components/
│   ├── ui/                # shadcn/ui components
│   │   ├── button.tsx
│   │   └── ...
│   ├── Navbar.tsx
│   └── Footer.tsx
├── lib/
│   ├── utils.ts           # Utility functions (cn, etc.)
│   └── db.ts              # Database connection
└── hooks/                 # Custom React hooks
    └── use-toast.ts

src/
├── app/
│   ├── layout.tsx         # 根布局
│   ├── page.tsx           # 首页
│   ├── globals.css        # 全局样式
│   ├── (auth)/            # 路由组（不影响URL路径）
│   │   ├── login/
│   │   │   └── page.tsx
│   │   └── register/
│   │       └── page.tsx
│   └── api/               # API路由
├── components/
│   ├── ui/                # shadcn/ui组件
│   │   ├── button.tsx
│   │   └── ...
│   ├── Navbar.tsx
│   └── Footer.tsx
├── lib/
│   ├── utils.ts           # 工具函数（cn等）
│   └── db.ts              # 数据库连接
└── hooks/                 # 自定义React hooks
    └── use-toast.ts

Best Practices

最佳实践

Component Design

组件设计

Server by Default: Use Server Components for everything that doesn't need interactivity.
Client Boundary: Add
```
'use client'
```
directive only when using hooks or event listeners.
Composition: Use
```
children
```
prop to avoid prop drilling.
Micro-Components: Break down complex UIs into smaller, single-responsibility components.

默认使用服务端组件：所有不需要交互的内容都使用Server Components。
客户端边界：仅在使用hooks或事件监听器时添加
```
'use client'
```
指令。
组合：使用
```
children
```
属性避免属性透传。
微组件：将复杂UI拆分为更小的、单一职责的组件。

Performance

性能优化

Image Optimization: Use
```
next/image
```
for automatic optimization.
Font Optimization: Use
```
next/font
```
to prevent layout shift.
Lazy Loading: Use
```
next/dynamic
```
or
```
React.lazy
```
for heavy components.
Code Splitting: Automatic in Next.js, but be mindful of large dependencies.

图片优化：使用
```
next/image
```
进行自动优化。
字体优化：使用
```
next/font
```
避免布局偏移。
懒加载：对重型组件使用
```
next/dynamic
```
或
```
React.lazy
```
。
代码分割：Next.js会自动处理，但需注意大型依赖包。

Accessibility (a11y)

无障碍访问（a11y）

Use semantic HTML tags (
```
<main>
```
,
```
<article>
```
,
```
<nav>
```
).
Ensure all interactive elements have keyboard support.
Use valid ARIA attributes when semantic HTML isn't enough.
Radix UI primitives (used in shadcn/ui) handle many a11y concerns automatically.

使用语义化HTML标签（
```
<main>
```
、
```
<article>
```
、
```
<nav>
```
）。
确保所有交互元素支持键盘操作。
当语义化HTML不足时，使用有效的ARIA属性。
shadcn/ui所使用的Radix UI原语会自动处理许多无障碍问题。

Common Code Patterns

常见代码模式

Next.js Page (Server Component)

Next.js页面（服务端组件）

tsx

import { db } from "@/lib/db"

export default async function DashboardPage() {
  const data = await db.user.findMany()

  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Dashboard</h1>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  )
}

tsx

import { db } from "@/lib/db"

export default async function DashboardPage() {
  const data = await db.user.findMany()

  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Dashboard</h1>
      <ul>
        {data.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  )
}

Client Component with State

带状态的客户端组件

tsx

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div className="flex gap-4 items-center">
      <span>Count: {count}</span>
      <Button onClick={() => setCount(c => c + 1)}>Increment</Button>
    </div>
  )
}

tsx

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div className="flex gap-4 items-center">
      <span>Count: {count}</span>
      <Button onClick={() => setCount(c => c + 1)}>Increment</Button>
    </div>
  )
}