React Bootcamp

# React bootcamp - 10 working days

Day 1 - Tooling: Vite + TypeScript, ESLint flat config, Prettier, Tailwind.
Day 2 - JSX + components: stateless first, props, conditional rendering.
Day 3 - State + effects: useState, useReducer, useEffect, derived state.
Day 4 - Forms: controlled inputs, Zod + react-hook-form for production.
Day 5 - Data: TanStack Query (or SWR), Suspense, error boundaries.

Weekend project: a small list-detail app with optimistic UI.

Day 6 - Routing: TanStack Router or React Router v7; nested routes, loaders.
Day 7 - Performance: Profiler, virtualisation, code splitting.
Day 8 - Testing: Vitest + RTL + MSW + Playwright.
Day 9 - Accessibility: semantic HTML, focus management, axe in tests.
Day 10 - Deploy + observability: Vercel/Cloudflare/Netlify, Web Vitals reporting, Sentry.

Capstone: ship a small SaaS-style app with auth (mock OK), CRUD, and tests, deployed publicly.

## Tips

- TypeScript strict from day one
- Default to function components + hooks
- TanStack Query removes 90 percent of state management headaches
- React Compiler will auto-memo soon - do not pre-memo today

## Common mistakes

- Effects to sync derived state (just compute during render)
- Sprinkling useMemo / useCallback without measuring
- Using context for non-stable data (causes re-renders cascades)
- Skipping form validation libs and rebuilding them

// 30-day plan in the lesson body.
console.log('Start building.');