Naar de inhoud

De hoofdinhoud van deze pagina is in het Engels.Deze pagina vertalen

Vaardigheden & technologieën

React roadmap

Learn React with TypeScript: components, state, hooks, data fetching, routing and a full-stack framework.

Tijd
⏱ 4–6 weeks
Level
Intermediate
Steps
5 steps
Architecture ↓Cheat sheet ↓5 interview Q&As ↓
Delen

The roadmap

Click a step to open the full guide.

Best architecture: a React application with a framework

How modern React apps split work between server and browser.

Server vs client

Server

  • Routing & layouts
  • Data fetching (server components)
  • Mutations (server actions)
  • Static pages at build time

Client

  • Interactive components
  • Local UI state
  • Optimistic updates
  • Client-side caching

Why it's built this way

  • Default to server components; use client components only for interactivity.
  • Keep secrets and data access on the server.
  • Feature folders + a shared design system.

React cheat sheet

The essentials on one screen. Bookmark it for revision.

Hooks

useStateLocal state: const [v, setV] = useState(0)
useEffectSync with outside systems after render
useMemoCache an expensive computed value
useCallbackKeep the same function between renders
useRefMutable value / DOM node that doesn't re-render
useContextRead shared data from a provider

Patterns

Listitems.map(i => <Row key={i.id} {...i} />)
Conditional{isOpen && <Modal />}
Controlled input<input value={v} onChange={e => setV(e.target.value)} />
Update arraysetItems(prev => [...prev, item])
Update objectsetUser(u => ({ ...u, name }))

Improve performance

  • Send less JavaScript: render on the server where possible and lazy-load heavy components.
  • Keep state close to where it's used to avoid re-rendering big trees.
  • Use useMemo/React.memo only for measured slow spots.
  • Virtualise very long lists (render only visible rows).
  • Optimise images (correct size, modern formats, lazy loading).
  • Measure with React DevTools Profiler and Lighthouse before optimising.

Security checklist

  • React escapes text by default; avoid dangerouslySetInnerHTML unless sanitised.
  • Never put secrets in client code; anything in the bundle is public.
  • Validate and authorise on the server, not just in the UI.
  • Use HttpOnly cookies for sessions and protect forms against CSRF.
  • Keep dependencies updated and audited.

Most important interview questions

Click a question to see a strong answer. Each step also has its own questions.

1Wat is the virtual DOM?

A lightweight description of the UI that React compares between renders to apply the minimum real DOM changes.

2What causes a component to re-render?

Its state changes, its parent re-renders, or a context it uses changes.

3Controlled vs uncontrolled components?

Controlled inputs get their value from React state; uncontrolled inputs keep their own value in the DOM, read via refs or form data.

4How do you optimise a slow React app?

Profile first; then reduce unnecessary renders (state placement, memo), split code, virtualise long lists, and move work to the server.

5What are React Server Components?

Components that run only on the server, can access data directly and send rendered output without their JavaScript, reducing bundle size.

Related roadmaps

6

Frontend Developer

6 steps · 4–6 months · Beginner

Build fast, accessible websites and web apps.

View roadmap →
6

Full Stack Developer

6 steps · 6–8 months · Intermediate

Build complete web apps, front to back.

View roadmap →
1

React · Step 1 of 5 · 1 week

Components and JSX

Think in components.

A React app is a tree of components. Each takes props and returns UI. Break pages into small, reusable pieces.

What you'll learn

  • JSX
  • Function components
  • Props
  • Rendering lists with keys
  • Conditional rendering
  • Composition

A page as a component tree

  • App
  • Header
  • Logo
  • Nav
  • ProductList
  • ProductCard
  • ProductCard
  • Footer

Key concepts

Component
A reusable piece of UI: a function that returns JSX.
JSX
HTML-like syntax inside JavaScript that compiles to function calls.
Props
Read-only inputs passed from parent to child.

Step by step

  1. 1.1

    Create a project

    Start with a framework template or Vite + React + TypeScript.

  2. 1.2

    Write components

    Functions that return JSX; one component per file.

  3. 1.3

    Pass props

    Send data from parent to child like function arguments.

  4. 1.4

    Render lists

    items.map(...) with a stable key voor each item.

type Product = { id: string; name: string; price: number };

function ProductList({ items }: { items: Product[] }) {
  return (
    <ul>
      {items.map((p) => (
        <li key={p.id}>{p.name} – ₹{p.price}</li>
      ))}
    </ul>
  );
}

Notes

  • Give list items stable keys, not array indexes, when items can move.

Tips & tricks

  • Sketch a page and draw boxes around components before coding.

Interview questions

Why do list items need keys?

Keys let React match items between renders so it updates, moves or removes the right ones efficiently and keeps their state. Use stable IDs, not array indexes, when items can change order.

The quick way to study this

Rebuild a static page as components.

2

React · Step 2 of 5 · 1 week

State and events

Make interfaces interactive.

State is data that changes over time. When state changes, React re-renders. Keep only the minimum in state and compute the rest.

What you'll learn

  • useState
  • Event handlers
  • Controlled forms
  • Lifting state up
  • Derived values

React's render loop

  1. State changes
  2. Component re-renders
  3. React compares (diff)
  4. DOM updated
  5. User interacts

Repeats as a loop

Key concepts

State
Data that changes over time; changing it re-renders the component.
Immutability
Create new objects/arrays instead of changing old ones, so React notices.
Derived value
Compute from state during render instead of storing duplicates.

Step by step

  1. 2.1

    useState

    const [count, setCount] = useState(0).

  2. 2.2

    Events

    onClick, onChange, onSubmit handlers update state.

  3. 2.3

    Controlled inputs

    Input value comes from state; changes go through setState.

  4. 2.4

    Lift state up

    Move shared state to the nearest common parent.

Notes

  • Never mutate state directly; create new objects or arrays.

Tips & tricks

  • If two components need the same state, move it to their parent.

Interview questions

Props vs state?

Props come from the parent and are read-only. State is owned by the component and changes over time.

Why shouldn't you mutate state directly?

React compares references to detect changes; mutating the same object may not trigger a re-render and causes bugs. Use setItems([...items, newItem]).

The quick way to study this

Build a to-do list with add, complete and filter.

3

React · Step 3 of 5 · 1 week

Effects and data fetching

Load data from APIs.

Effects synchronise components with outside systems. For fetching, data libraries handle caching and refetching better than hand-written effects.

What you'll learn

  • useEffect
  • Loading, error and empty states
  • Data-fetching libraries
  • Custom hooks
  • Cleanup

Loading data in a component

  1. Show loading
  2. Request data
  3. Success → show data
  4. Empty → show message
  5. Error → show retry

Key concepts

Effect
Code that runs after render to sync with something outside React.
Dependency array
Tells React when to re-run an effect.
Custom hook
A function starting with use that reuses stateful logic.

Step by step

  1. 3.1

    Fetch data

    Use a data library or framework loader; handle loading, error and empty states.

  2. 3.2

    useEffect for sync

    Only for syncing with outside systems (subscriptions, timers).

  3. 3.3

    Custom hooks

    Move reusable logic into useSomething() functions.

Notes

  • Many effects are unnecessary; compute values during render when you can.

Tips & tricks

  • Always design the loading and error states.

Interview questions

Common useEffect mistakes?

Missing dependencies (stale values), effects that set state on every render (infinite loops), forgetting clean-up, and using effects for values that could just be computed during render.

The quick way to study this

Build a search page over a public API with loading and error states.

4

React · Step 4 of 5 · 1 week

Routing and app structure

Multi-page apps.

Routing maps URLs to pages. Use context for truly global data such as the current user; avoid putting everything in global state.

What you'll learn

  • Client-side routing
  • Layouts
  • URL parameters
  • Context for shared state
  • State management options

Where should state live?

Local state

  • Form inputs
  • Open/closed toggles

URL

  • Search, filters
  • Page number, tabs

Context / store

  • Current user
  • Theme, cart

Key concepts

Prop drilling
Passing props through many layers that don't use them.
Context
React's way to share data with a whole subtree.

Step by step

  1. 4.1

    Routing

    Map URLs to pages; use nested layouts.

  2. 4.2

    Context

    Share truly global data (theme, user) without prop drilling.

  3. 4.3

    URL state

    Keep filters, search and page number in the URL.

Notes

  • Store filters and pagination in the URL so pages can be shared.

Tips & tricks

  • Keep folder structure by feature, not by file type.

Interview questions

When would you use Context vs a state library?

Context for a few values that rarely change (user, theme). A state library when many components read and update complex shared state frequently.

The quick way to study this

Add routing and a shared layout to your search app.

5

React · Step 5 of 5 · 1–2 weeks

Full-stack React

Server rendering and data loading.

Frameworks let React render on the server for speed and SEO, and run server code next to your components.

What you'll learn

  • A React framework (Next.js or similar)
  • Server components
  • Server actions and API routes
  • Caching
  • SEO

Rendering strategies

Static (SSG)

  • Built at deploy
  • Fastest
  • Blogs, docs

Server (SSR)

  • Built per request
  • Fresh data
  • Dashboards

Client (CSR)

  • Built in browser
  • Highly interactive
  • Editors, apps

Key concepts

SSR
Server-side rendering: HTML is built on the server per request.
Hydration
React attaching interactivity to server-rendered HTML in the browser.
Server component
Runs only on the server; can read databases directly; sends no JS.

Step by step

  1. 5.1

    Server rendering

    Pages render HTML on the server for speed and SEO.

  2. 5.2

    Server components

    Fetch data on the server; send less JavaScript to the browser.

  3. 5.3

    Server actions / API routes

    Handle form submits and mutations securely on the server.

Notes

  • Know which code runs on the server and which in the browser.

Tips & tricks

  • Start new projects with a framework rather than plain React.

Interview questions

Wat is hydration and why can it fail?

Hydration attaches event handlers to server HTML. It fails (mismatch warnings) when the server and client render different output, e.g. using Date.now() or browser-only APIs during render.

The quick way to study this

Build a small blog or store with a React framework.

Full Stack Developer roadmap →

Deel deze pagina