Learn React - Complete Roadmap

A structured path from JavaScript fundamentals to production-ready React skills. Follow the sections in order - each builds on the last. You will build real intuition, not just copy-paste knowledge.

study, coding, productivity

by Morris

JavaScript Prerequisites

These are the JS concepts React leans on heavily. If any of these feel shaky, spend a day reviewing them before touching React - confusion here causes confusion everywhere.

• Understand ES6 modules: import / export syntax
• Master arrow functions and how `this` behaves differently inside them
• Learn destructuring for objects and arrays
• Understand the spread operator and rest params
• Get comfortable with array methods: map, filter, find, some, reduce
• Understand promises and async/await
• Learn optional chaining (?.) and nullish coalescing (??)
• Understand closures - functions that remember their surrounding scope

React Mental Model

Before writing a single component, get these three ideas into your head. They explain 90% of React's behavior.

• Understand declarative vs imperative UI - describe what, not how
• Understand one-way data flow - data flows down, events flow up
• Understand the Virtual DOM - React batches and minimizes real DOM updates
• Understand the component tree - components compose into a tree, state lives at a node
• Set up a project with Vite - Create React App is deprecated

Components and JSX

The building blocks. Nail these before moving to state.

• Write your first functional component and understand JSX is not HTML
• Understand props - how parent components pass data to children
• Implement conditional rendering with ternary and && operator
• Render lists with .map() and understand why keys matter
• Use React Fragments to avoid unnecessary wrapper divs
• Explore component composition - build UI by combining small components
• Learn the class components exist but skip learning them in depth

State and Events

State is what makes your UI interactive. These patterns cover 80% of real-world React work.

• Use useState to add interactivity to a component
• Build controlled inputs - the input value is always driven by state
• Lift state up to share it between sibling components
• Compute derived values during render instead of storing them in state
• Update objects and arrays in state immutably
• Use the functional form of setState when new state depends on old state
• Handle form submission with onSubmit and preventDefault

Hooks Deep Dive

Hooks are the heart of modern React. Understanding these deeply separates developers who are confused by React from those who are comfortable with it.

• Learn the useEffect dependency array - the most misunderstood part of React
• Return a cleanup function from useEffect to avoid memory leaks and stale updates
• Understand stale closures - the most common React bug
• Use useRef for values that persist across renders without causing re-renders
• Use useReducer when state logic is complex or next state depends on action type
• Extract reusable logic into custom hooks
• Learn useMemo and useCallback - and know when NOT to use them

Component Patterns

Design patterns that make React code maintainable as apps grow.

• Apply the single responsibility principle - each component does one thing
• Use composition to share behavior without prop drilling
• Build compound components for tightly coupled UI groups
• Understand when to use Context vs prop drilling vs lifting state
• Use error boundaries to prevent one component failure from crashing the whole app

Routing with React Router v6

React Router v6 is the standard for client-side routing in React. v6 has significant API changes from v5 - make sure your docs match the version you are using.

• Set up BrowserRouter and define routes in App.tsx
• Use Link and NavLink for navigation instead of anchor tags
• Read URL parameters with useParams
• Navigate programmatically with useNavigate
• Use Outlet for nested routes - parent layout + child content
• Build a protected route that redirects unauthenticated users
• Use useSearchParams to read and update URL query strings

State Management

Most apps do not need Redux. Start with the simplest tool that works and add complexity only when needed.

• Learn the Context API for sharing global data (theme, auth, locale)
• Understand Context performance: every consumer re-renders when value changes
• Install Zustand and set up a global store for frequently-updating shared state
• Learn when Redux is and is not appropriate
• Understand optimistic updates - update UI immediately, rollback on error

Data Fetching

Fetching data in useEffect works but has sharp edges. Learn the right way to do it before you learn why libraries solve it better.

• Fetch data in useEffect with loading and error states
• Understand the problems with raw useEffect data fetching
• Install TanStack Query (formerly React Query) and replace useEffect fetching
• Use useMutation for POST/PUT/DELETE with optimistic updates
• Learn when to use React Server Components vs client-side fetching

TypeScript with React

TypeScript catches an entire class of bugs at compile time. Add it to new projects from day one.

• Type component props with interfaces
• Use generics with useState for non-obvious types
• Type event handlers correctly
• Use React.FC sparingly - prefer typed props directly
• Define shared types in a types file and import them

Performance and Tooling

React is fast enough for most apps without any optimization. Profile before you optimize - premature optimization adds complexity for no gain.

• Use React DevTools to inspect component trees and find re-render causes
• Understand when React.memo prevents re-renders
• Use React.lazy and Suspense to code-split large components
• Set up Vitest and React Testing Library for component tests
• Analyze your production bundle with rollup-plugin-visualizer

Capstone Project

Build a complete app that uses every concept from this roadmap. Do not skip this - building something real is what converts knowledge into skill.

• Plan a task management app: features list, data model, component tree
• Implement authentication with protected routes and persisted sessions
• Build the data layer with Zustand - boards, columns, tasks
• Implement search and filtering with useMemo
• Add drag-and-drop with @dnd-kit
• Write at least 5 component tests covering user interactions
• Deploy to Vercel or Netlify and share the URL