Learn React

Fresh

This section walks through React's core concepts, from writing your first component to managing complex application state.

Learning Path

flowchart TD
    A[Quick Start] --> B[Describing the UI]
    B --> C[Adding Interactivity]
    C --> D[Managing State]
    D --> E[Escape Hatches]
    E --> F[React Compiler]

Guide	Topics Covered
Quick Start	Your first component, JSX, props, conditional rendering, lists, event handling, state
Thinking in React	Breaking UI into components, building a static version, identifying state, data flow
Describing the UI	Components, JSX syntax, props, conditional rendering, rendering lists, keeping components pure
Adding Interactivity	Events, state, rendering cycle, state as snapshot, updating objects and arrays
Managing State	State structure, sharing state, preserving/resetting, reducers, context
Escape Hatches	Refs, DOM manipulation, effects, lifecycle, custom hooks
React Compiler	Automatic memoization, installation, configuration

Prerequisites

Basic familiarity with HTML, CSS, and JavaScript. React uses JSX, a syntax extension that lets you write HTML-like markup inside JavaScript.