--- title: "React Developer Beginner to Expert" description: "A roadmap for learning React, from JSX and components to hooks, state management, performance optimization, testing, and production-grade architecture." author: "Mohammad Abu Mattar" canonical: https://mkabumattar.com/roadmaps/post/react-developer-roadmap --- # React Developer Beginner to Expert This roadmap takes you from JavaScript prerequisites through JSX, hooks, and state management, and on to data fetching, meta-frameworks, performance, and testing. Work through the stages in order, build something small at each step, and treat the optional topics as branches to explore once the required ones feel solid. ## Roadmap ### Stage 1: Prerequisites (JavaScript and TypeScript) React is a JavaScript library, so the fundamentals matter more than React itself at the start. #### Modern JavaScript Understand ES modules, arrow functions, destructuring, spread/rest, promises, and array methods like map and filter. Most React confusion is really JavaScript confusion. - [MDN JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) #### TypeScript basics _(recommended)_ Learn types, interfaces, generics, and how to type props and state. Modern React codebases are overwhelmingly TypeScript. - [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) ### Stage 2: JSX and Rendering Fundamentals Learn how React turns your markup into UI. #### JSX syntax Understand that JSX is syntactic sugar for function calls, how expressions embed with braces, and why you return a single root. #### The render model Learn how React builds a tree, diffs it, and updates the DOM, so re-renders stop feeling like magic. - [React docs, Describing the UI](https://react.dev/learn/describing-the-ui) ### Stage 3: Components, Props, and Composition Components are the unit of reuse in React. #### Function components Write components as functions that take props and return JSX. Class components are legacy; start with functions. #### Props and composition Pass data down with props and compose components together, including the children prop, instead of building deep inheritance. #### Thinking in components _(recommended)_ Practice breaking a UI into a component tree, deciding where each piece of state and markup belongs. ### Stage 4: State and Core Hooks Interactivity comes from state. #### useState Manage local component state and understand that setting state schedules a re-render rather than mutating a variable. - [React docs, State a Component's Memory](https://react.dev/learn/state-a-components-memory) #### useEffect Run side effects like data fetching or subscriptions, and understand the dependency array and cleanup function. #### Rules of hooks Learn why hooks must be called at the top level and only from React functions, and what breaks when you ignore this. ### Stage 5: Advanced Hooks The hooks you reach for as components grow. #### useReducer _(recommended)_ Manage more complex state transitions with a reducer, which scales better than many useState calls. #### useMemo and useCallback _(recommended)_ Memoize expensive computations and stable function references, but only when profiling shows you need them. #### useRef _(recommended)_ Hold mutable values that persist across renders without causing re-renders, and reference DOM nodes directly. ### Stage 6: Custom Hooks and Reusable Logic Extract and share stateful logic. #### Writing custom hooks Move reusable stateful logic into a use-prefixed function, so components stay focused on rendering. #### Composition over duplication _(recommended)_ Recognize when repeated useEffect or useState patterns should become a shared hook. ### Stage 7: Rendering Lists and Conditionals Everyday rendering patterns done right. #### Conditional rendering Render different UI based on state using ternaries, logical AND, and early returns. #### Lists and keys Render arrays with map and give each item a stable key, and understand why index-as-key causes subtle bugs. - [React docs, Rendering Lists](https://react.dev/learn/rendering-lists) ### Stage 8: Forms and Controlled Components Handling user input. #### Controlled inputs Bind input values to state so React is the single source of truth, and handle onChange events. #### Form libraries _(optional)_ Learn a library like React Hook Form for validation and performance once forms get large. ### Stage 9: Context and Prop Drilling Sharing data without threading props through every level. #### Context API Provide and consume shared values (theme, auth, locale) with createContext and useContext. - [React docs, Passing Data Deeply with Context](https://react.dev/learn/passing-data-deeply-with-context) #### When not to use context _(recommended)_ Understand that context is not a state manager and that overusing it causes wide re-renders. ### Stage 10: State Management Libraries When component and context state are not enough. #### Redux Toolkit _(recommended)_ Learn modern Redux, which needs far less boilerplate, for large apps with complex shared state and predictable updates. - [Redux Toolkit docs](https://redux-toolkit.js.org/) #### Lightweight stores _(optional)_ Explore Zustand or Jotai for simpler global state without the Redux ceremony. ### Stage 11: Data Fetching Getting server data into your UI correctly. #### React Query or SWR Use a data-fetching library to handle caching, revalidation, and loading/error states instead of hand-rolling useEffect fetches. - [TanStack Query docs](https://tanstack.com/query/latest) #### Server state vs client state _(recommended)_ Learn to separate cached server data from local UI state, which is the insight these libraries are built on. ### Stage 12: Routing and Meta-Frameworks Moving from a single page to a real application. #### React Router Add client-side routing, nested routes, and route params for multi-page single-page apps. #### Next.js _(recommended)_ Learn the most common React meta-framework for server rendering, file-based routing, and full-stack features. - [Next.js docs](https://nextjs.org/docs) #### Remix _(optional)_ Explore an alternative meta-framework focused on web standards and data loading. ### Stage 13: Performance, Testing, and Production What separates a working app from a professional one. #### Performance optimization _(recommended)_ Use the React Profiler to find real bottlenecks, then apply memoization, code splitting, and lazy loading where they matter. #### Testing Write tests with React Testing Library and Vitest, and add end-to-end tests with Playwright for critical flows. - [React Testing Library docs](https://testing-library.com/docs/react-testing-library/intro/) #### Patterns and architecture _(recommended)_ Learn common patterns and anti-patterns, folder structure, and how to keep a growing codebase maintainable.