React.
js Learning Roadmap
This roadmap is designed for a learner dedicating 10–12 hours per week. It uses Vite for
project setup and introduces styling libraries after mastering Redux Toolkit.
Phase 1: Web Development Fundamentals (2 weeks)
Goal: Build strong foundations before React.
Topics:
• HTML: Semantic tags, forms, structure
• CSS: Flexbox, Grid, Box model, transitions
• JavaScript (ES6+): let/const, arrow & normal functions, objects & arrays,
map/filter/reduce, async/await
• Git & GitHub basics
Mini Projects:
• Portfolio with Contact Form (HTML/CSS)
Phase 2: React Basics (2–3 weeks)
Goal: Understand React core concepts & start building.
Topics:
• Why React?
• Project setup with Vite
• JSX: Syntax & rules
• Functional components & props
• State & useState
• Event handling
• Conditional rendering
• Rendering lists with keys
Mini Projects:
• Counter App
• Task Tracker App
Phase 3: React Intermediate (2 weeks)
Goal: Work with side effects & routing.
Topics:
• useEffect: Fetching & side effects
• Controlled components (forms)
• Lifting state up
• Component hierarchy & data flow
• React Router v6: Routes, nested routes, navigation
Mini Projects:
• Weather App (API-based)
• Multi-page Portfolio
Phase 4: State Management with Redux Toolkit & Styling (2–3
weeks)
Goal: Manage complex state and introduce styling libraries.
Topics:
• Redux Toolkit: Store, Slice, Reducers, Actions & Dispatch, useSelector & useDispatch
• Folder structure for Redux
• Styling libraries: Tailwind CSS, Material UI/Ant Design (optional)
Mini Projects:
• Shopping Cart App (Redux Toolkit + Tailwind)
Phase 5: Backend Integration & APIs (2 weeks)
Goal: Connect frontend with a backend.
Topics:
• REST APIs (fetch, axios)
• Handling loading, error & empty states
• Authentication basics (tokens, localStorage)
• Environment variables (.env)
Mini Projects:
• Blog App or Mini eCommerce (frontend only)
Phase 6: Production-Level React (2 weeks)
Goal: Optimize, deploy, and add TypeScript.
Topics:
• TypeScript basics for React
• Folder structure & scalable architecture
• Code splitting & lazy loading
• Testing basics (Jest, React Testing Library)
• Deployment (Vercel, Netlify)
Mini Projects:
• Final Project: Full-stack app (React + Spring Boot)
Phase 7: Optional Advanced Track
Goal: Explore advanced concepts after mastering core React.
Topics:
• Next.js (SSR, SEO)
• Framer Motion (animations)
• WebSockets with React (real-time)
