React Roadmap

A step-by-step React roadmap: what to learn in order, the related skills and the best places to learn each step.

The stack, end to end

  • Frontend: JavaScript, DOM and events, Promises and async/await, ES modules, Fetch API, TypeScript, Interfaces and types, Generics, React, Components and props, State and hooks, React Router, Data fetching, Next.js, Server-side rendering, Routing, SEO basics
  • Testing: Unit testing, Component testing, End-to-end testing

  1. JavaScript

    Suggested pace: Start here

    JavaScript makes pages interactive and also runs on servers. Learn the language properly: types, functions, scope, objects and arrays, the DOM, events, promises and async/await, and modules.

    Skills

    • JavaScript
    • DOM and events
    • Promises and async/await
    • ES modules
    • Fetch API

    Tips

    • Build small things (a to-do list, a quiz, a weather widget) before jumping to a framework.

    Where to learn

  2. TypeScript

    Suggested pace: Next

    TypeScript adds types to JavaScript so many mistakes are caught before the code runs. It is now common in frontend and Node.js teams. Learn basic types, interfaces, generics and how to type API data.

    Skills

    • TypeScript
    • Interfaces and types
    • Generics

    Tips

    • Turn a small JavaScript project into TypeScript to learn quickly.

    Where to learn

  3. React

    Suggested pace: Then

    React builds interfaces from reusable components. Learn components, props, state, hooks, forms, routing and how to fetch and show data from an API.

    Skills

    • React
    • Components and props
    • State and hooks
    • React Router
    • Data fetching

    Tips

    • Build one project with real data and several pages, for example a job board or a recipe finder.

    Where to learn

  4. Next.js and server-rendered React

    Suggested pace: After that

    Next.js adds routing, server rendering and API routes to React. It matters when search visibility and fast first load are important, for example on marketing sites and blogs.

    Skills

    • Next.js
    • Server-side rendering
    • Routing
    • SEO basics

    Tips

    • Compare the HTML your page returns with JavaScript turned off. That is what search engines see first.

    Where to learn

  5. Testing frontend code

    Suggested pace: Later

    Write tests so changes do not break things: unit tests for functions and components, and a few end-to-end tests of the main user journeys.

    Skills

    • Unit testing
    • Component testing
    • End-to-end testing

    Tips

    • Test behaviour a user would notice, not internal details.

    Where to learn

Frequently asked questions

Where should I start with React?

Start at step 1 and work down in order, because later steps build on earlier ones. If you are signed in, the roadmap compares your resume with each step and marks where you could start.

Is React worth learning?

Check how many job adverts in your area mention React, and whether it fits the kind of work you want. This roadmap shows what to learn; the Browse jobs page shows what employers are asking for.

How do I know I am ready to apply?

When you can build a small project from start to finish without copying a tutorial, and explain why you made your choices. Apply while you keep learning; you do not need to know everything.