React

JSX

Write HTML-like syntax inside JavaScript and see how React turns it into a page.

7 minFree preview

Components

Break a screen into small reusable pieces, each one a function that returns JSX.

7 minFree preview

Props

Pass data into components so the same component can show different things.

7 min Account

State

Give a component memory with useState so the screen updates when data changes.

8 min Account

Events and inputs

Respond to clicks and typing, and build a controlled text input.

8 min Account

Lists and keys

Render arrays of data as components with map, and give each item a stable key.

8 min Account

useEffect

Run side effects such as timers, subscriptions and data loading, and clean them up properly.

9 min Account

useRef

Hold a value between renders without re-rendering, and reach a real DOM element such as an input.

8 min Account

Forms

Build forms with several controlled fields, a submit handler and simple validation.

9 min Account

Routing

Show different screens for different URLs in a single-page app, with a tiny router and then React Router.

9 min Account

Context

Share data with many components without passing props through every level.

9 min Account

Build a simple project

A complete task tracker that combines components, props, state, lists, forms, derived data and cleanup.

12 min Account