frontend-coding

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Coding

前端编码

Overview

概述

Expert frontend development guidance covering React, Vue, Angular, TypeScript, state management, component architecture, performance optimization, accessibility, testing, and modern web APIs.

专业的前端开发指导，涵盖React、Vue、Angular、TypeScript、状态管理、组件架构、性能优化、可访问性、测试及现代Web API。

Core Capabilities

核心能力

Framework Expertise - React, Vue, Angular, Svelte
TypeScript - Type-safe development
State Management - Redux, Vuex, Pinia, Context API
Component Patterns - Composition, hooks, composables
Performance - Code splitting, lazy loading, optimization
Accessibility - WCAG compliance, ARIA
Testing - Jest, Testing Library, Cypress

框架专业能力 - React、Vue、Angular、Svelte
TypeScript - 类型安全开发
状态管理 - Redux、Vuex、Pinia、Context API
组件模式 - 组合、hooks、composables
性能优化 - 代码分割、懒加载、性能调优
可访问性 - WCAG合规、ARIA
测试 - Jest、Testing Library、Cypress

Quick Start

快速开始

React Component Example:

tsx

import React, { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
}

export const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

React组件示例:

tsx

import React, { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
}

export const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

Critical Tips

关键提示

Use TypeScript - Type safety prevents runtime errors
Component composition - Build reusable, composable components
Performance matters - Memoization, lazy loading, code splitting
Accessibility first - WCAG compliance from the start
Test thoroughly - Unit, integration, E2E testing

使用TypeScript - 类型安全可避免运行时错误
组件组合 - 构建可复用、可组合的组件
重视性能 - 记忆化、懒加载、代码分割
优先考虑可访问性 - 从一开始就遵循WCAG合规标准
全面测试 - 单元测试、集成测试、端到端测试

Framework-Specific Guidance

框架专属指导

React Development - See react-development.md for:

Functional components and hooks (useState, useEffect, useCallback, useMemo)
Custom hooks and composition patterns
Context API and prop drilling solutions
React Server Components and Next.js

React Advanced Patterns - See react-patterns.md for:

Custom hooks patterns (data fetching, form handling, debouncing)
Higher-order components (HOC) and render props
Compound components and controlled/uncontrolled patterns
Error boundaries and suspense

Vue.js Development - See vuejs-development.md for:

Composition API and Options API
Composables and reactivity system
Vue Router, Pinia state management
Nuxt.js and server-side rendering

Vue Advanced Patterns - See vue-patterns.md for:

Composables organization and reusability
Provide/inject pattern and plugin development
Custom directives and render functions
Advanced reactivity patterns

React开发 - 详见react-development.md：

函数式组件与hooks（useState、useEffect、useCallback、useMemo）
自定义hooks与组合模式
Context API与属性透传解决方案
React Server Components与Next.js

React高级模式 - 详见react-patterns.md：

自定义hooks模式（数据获取、表单处理、防抖）
高阶组件（HOC）与渲染属性
复合组件与受控/非受控模式
错误边界与Suspense

Vue.js开发 - 详见vuejs-development.md：

组合式API与选项式API
Composables与响应式系统
Vue Router、Pinia状态管理
Nuxt.js与服务端渲染

Vue高级模式 - 详见vue-patterns.md：

Composables的组织与复用
Provide/Inject模式与插件开发
自定义指令与渲染函数
高级响应式模式

Cross-Framework Topics

跨框架主题

Component Patterns - See component-patterns.md for:

Compound components (tabs, accordions, modals)
Render props and slots patterns
Controlled vs uncontrolled components
Container/presentational component separation

State Management - See state-management.md for:

Redux, Zustand, Jotai (React)
Pinia, Vuex (Vue)
NgRx, Akita (Angular)
Server state management (React Query, SWR, TanStack Query)

TypeScript Best Practices - See typescript-best-practices.md for:

Type safety, inference, and utility types
Generics and advanced type patterns
Type guards and narrowing
Framework-specific TypeScript patterns

Best Practices - See best-practices.md for:

Project structure and code organization
Naming conventions and file naming
Testing strategies (unit, integration, E2E)
Security best practices (XSS, CSRF, input validation)

Performance & Accessibility - See performance-testing.md for:

Code splitting and lazy loading
Bundle optimization and tree shaking
Performance monitoring and profiling
WCAG compliance and accessibility testing

组件模式 - 详见component-patterns.md：

复合组件（标签页、折叠面板、模态框）
渲染属性与插槽模式
受控与非受控组件
容器/展示组件分离

状态管理 - 详见state-management.md：

Redux、Zustand、Jotai（React）
Pinia、Vuex（Vue）
NgRx、Akita（Angular）
服务端状态管理（React Query、SWR、TanStack Query）

TypeScript最佳实践 - 详见typescript-best-practices.md：

类型安全、类型推断与工具类型
泛型与高级类型模式
类型守卫与类型收窄
框架专属TypeScript模式

最佳实践 - 详见best-practices.md：

项目结构与代码组织
命名规范与文件命名
测试策略（单元、集成、端到端）
安全最佳实践（XSS、CSRF、输入验证）

性能与可访问性 - 详见performance-testing.md：

代码分割与懒加载
包优化与Tree Shaking
性能监控与分析
WCAG合规与可访问性测试