React — MERN Stack Roadmap
Building user interfaces with components
Steps in React
- React Fundamentals & JSX — intermediate · How React works, the virtual DOM and writing JSX
- Components & Props — intermediate · Functional components, composing components and passing props
- State & useState — intermediate · Component state, the useState hook and re-renders
- Event Handling in React — intermediate · Synthetic events, handling clicks/inputs and passing handlers
- Conditional Rendering — intermediate · Ternaries, short-circuit rendering and rendering patterns
- Lists & Keys — intermediate · Rendering lists with map() and why keys matter
- Forms & Controlled Components — intermediate · Controlled vs uncontrolled inputs and building forms in React
- useEffect & Side Effects — intermediate · Data fetching, subscriptions, cleanup functions and the dependency array
- React Router — intermediate · Client-side routing, nested routes, dynamic params and navigation
- Context API — intermediate · Avoiding prop drilling with Context and providers
- Custom Hooks — intermediate · Extracting and reusing stateful logic into custom hooks
- State Management (Redux Toolkit / Zustand) — advanced · Global state management beyond Context for larger apps
- Performance Optimization — advanced · React.memo, useMemo, useCallback and avoiding unnecessary re-renders
- Connecting to APIs (Axios / React Query) — advanced · Fetching data from REST APIs, loading/error states and caching with React Query
- Component Styling — intermediate · CSS Modules, styled-components and using Tailwind inside React
- Mini Project: Multi-Page React App — advanced · Build a multi-page React app consuming a public API with routing and state
Part of
- MERN Stack roadmap — the full learning path