Senior Front-end Engineer — React Syllabus
How to learn fast with these sequence
- JavaScript
- TypeScript
- React Fundamentals
- React Architecture
- TanStack Query
- Zustand / Redux Toolkit
- HTML + CSS + Tailwind
- Accessibility
- Next.js
- React Performance
- Testing
- Vite + Webpack
- Design Systems + Storybook
- SSR / SSG / RSC
- API Contracts + Front-end DX
- Advanced React
- Capstone Project
- Interview Practice
1. Modern JavaScript
- ES6+
- Async/Await, Promises
- Modules
- Closures
- Destructuring & Spread
- Event Loop
- DOM & Browser APIs
2. TypeScript
- Types & Interfaces
- Generics
- Utility Types
- Union & Intersection Types
- Type Narrowing
- Type-safe API contracts
- Advanced TypeScript
3. HTML & CSS
- Semantic HTML
- Forms
- Responsive Design
- Flexbox & Grid
- CSS Modules
- Tailwind CSS
- Cross-browser compatibility
4. Accessibility
- WCAG fundamentals
- Keyboard navigation
- ARIA
- Focus management
- Screen readers
- Accessible forms/components
5. React Fundamentals
- Components
- Props & State
- JSX
- Hooks
- useEffect
- useMemo / useCallback
- useRef
- Rendering lifecycle
- Reconciliation
- Component composition
6. React Architecture
- Component architecture
- Reusable components
- Custom hooks
- Feature-based architecture
- Shared design system
- Error boundaries
- Forms & validation
7. State Management
- Context API
- Redux Toolkit
- Zustand
- Server state vs client state
- React Query / TanStack Query
- Caching & invalidation
- Pagination & optimistic updates
8. Next.js
- App Router
- Routing
- Layouts
- Server & Client Components
- SSR
- SSG
- Data fetching
- Caching
- Middleware
- API integration
9. Build Toolchain
- Vite
- Webpack fundamentals
- Environment variables
- Code splitting
- Tree shaking
- Lazy loading
- Bundle analysis
10. Performance
- Rendering optimization
- React.memo
- useMemo / useCallback
- Code splitting
- Lazy loading
- Image optimization
- Bundle size
- Core Web Vitals
- Lighthouse
11. Testing
- Jest
- Vitest
- React Testing Library
- Unit testing
- Component testing
- Integration testing
- Playwright
- E2E testing
- Mocking APIs
12. API & Frontend DX
- REST API integration
- API contracts
- Type-safe API clients
- Error/loading states
- Authentication
- Environment configuration
- Developer tooling
13. Design Systems
- Design tokens
- Reusable UI components
- Storybook
- Component documentation
- Figma → React workflow
- Versioning & consistency
14. Advanced React
- React Server Components
- SSR/SSG architecture
- Streaming
- Suspense
- Concurrent rendering
- Micro-frontends
15. UI & Visualization
- Framer Motion
- D3.js fundamentals
16. Senior Engineering Skills
- Code review
- Refactoring
- Frontend architecture decisions
- Technical documentation
- Mentoring
- Strong English communication
17. Capstone Project
Build a production-style React + TypeScript application with:
- React + Vite
- Next.js
- Tailwind
- TanStack Query
- Zustand/Redux Toolkit
- Storybook
- Accessible components
- Unit + component + E2E tests
- Performance optimization
- SSR/SSG
- CI/CD
- API integration
Top comments (0)