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 ( {title} Count: {count} <button onClick={() => setCount(c => c + 1)}> Increment ); }


## 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](https://developer.mozilla.org/)
- [React Documentation](https://react.dev/)
- [Web.dev Learning](https://web.dev/learn/)

About this skill

Quick Start - React with TypeScript