The UI library · Web Dev track 2 / 3

React — build UIs from reusable pieces

In the JavaScript module you built the Notes app by hand — and felt the pain of manually redrawing the page. React removes that pain. You describe what the UI should look like for a given set of data, and React keeps the screen in sync automatically. Here you'll rebuild the same Notes app the React way.

⚛️ Prerequisite: finish the JavaScript module first

React is JavaScript — components are functions, props are arguments, and you'll use map, arrow functions and fetch constantly. If those feel shaky, do the JavaScript module first; it's built to lead straight into this one.

🗺️The journey

1 · Why React exists start

The exact pain from the vanilla Notes app — and how React's "describe, don't redraw" idea fixes it.

2 · Components

A component is a function that returns UI. Your first <Note />.

3 · Props

Pass data into a component — like function arguments for UI.

4 · State (useState) the big one

Data that changes over time. Change state → React re-renders for you.

5 · Lists & forms

Render a list with map + keys, and a controlled input for adding notes.

6 · Effects & fetch

useEffect to load notes from the API when the app opens.

7 · The Notes App in React capstone

The same app from module 1 — rebuilt clean, in React components.

📈Your progress

🔓 You're reading a free chapter of React — the first two are open.
Unlock the rest of this course with a one-time payment.
Unlock this course →
🔓 See course prices