frontend-technologies（前端技术）

Frontend Technologies Skill

Quick Start - React with TypeScript

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

interface Props {
  title: string;
}

export function Example({ title }: Props) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `${title}: ${count}`;
  }, [count, title]);

  return (
    <div>
      <h1>{title}</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
    </div>
  );
}

Core Technologies

Foundation

• HTML5 semantic markup
• CSS3 (Flexbox, Grid, animations)
• JavaScript ES2020+
• TypeScript for type safety

Frameworks

• React 18+ with hooks
• Vue.js 3+ composition API
• Angular 16+ with RxJS
• Svelte for compiler-based approach

Meta-Frameworks

• Next.js - React with SSR, SSG, API routes
• Nuxt - Vue with full-stack capabilities
• SvelteKit - Svelte framework
• Remix - Focus on web fundamentals

State Management

• React Context API
• Redux Toolkit
• Zustand, Jotai, Recoil
• Vue Composition API / Pinia
• MobX, Akita

Styling

• Tailwind CSS
• CSS Modules & BEM
• Styled Components / Emotion
• SASS/SCSS

Build Tools

• Vite (fast development)
• Webpack (powerful bundling)
• Turbopack (next-gen)
• esbuild (transpilation)

Testing

• Jest unit testing
• React Testing Library
• Cypress / Playwright E2E
• Vitest for Vite projects

Best Practices

1. Semantic HTML - Use correct elements for accessibility
2. Responsive Design - Mobile-first approach
3. Performance - Optimize Core Web Vitals
4. Accessibility - WCAG 2.1 AA compliance
5. Type Safety - Use TypeScript
6. Code Quality - ESLint + Prettier
7. Testing - Aim for 80%+ coverage
8. Documentation - Storybook for components

Resources

• MDN Web Docs
• React Documentation
• Web.dev Learning