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
-
Semantic HTML - Use correct elements for accessibility
-
Responsive Design - Mobile-first approach
-
Performance - Optimize Core Web Vitals
-
Accessibility - WCAG 2.1 AA compliance
-
Type Safety - Use TypeScript
-
Code Quality - ESLint + Prettier
-
Testing - Aim for 80%+ coverage
-
Documentation - Storybook for components
Resources
-
MDN Web Docs
-
React Documentation
-
Web.dev Learning