Intermediate · 5h 34m · 20 lessons
React
Build interactive UIs from components — from your first useState to custom hooks.
What you'll learn
- ✦Build an interface from small, reusable components written in JSX
- ✦Manage state with useState and update objects and arrays without mutating them
- ✦Pass data down with props, send changes up with callbacks, and lift shared state to a common parent
- ✦Render lists with stable keys, handle events, and show UI conditionally
- ✦Sync with the outside world using useEffect and cleanup, use useRef and useContext, and write custom hooks
- ✦Build controlled forms and diagnose needless re-renders before reaching for memo
Part of these career paths
- Frontend Developer path · course 6 of 8
- Full-Stack Developer path · course 12 of 14
Certification projects
Build 4 projects to earn your certificate
Hands-on work that proves you can apply what you learned — part of the certificate requirements.
Syllabus
Module 1 · 58m
Meet React Free
What you'll be able to do
- Can start a React app with Vite and split a page into a tree of reusable components
- Can convert HTML to JSX and use curly braces to put JavaScript values into markup
- Can explain how React turns a change in state into the smallest set of DOM updates
Module 2 · 52m
State & re-rendering Locked
What you'll be able to do
- Can declare state with useState and predict what a component shows after a setter runs
- Can update arrays and objects in state by replacing them, never mutating them
- Can decide when to pass an updater function and trace a queue of state updates
Module 3 · 46m
Props & data flow Locked
What you'll be able to do
- Can pass data into a component with props, including children and default values
- Can send a change up from a child by calling a callback prop the parent passes down
- Can lift shared state to the closest common parent so siblings stay in sync
Module 4 · 47m
Lists, events & conditionals Locked
What you'll be able to do
- Can render an array with .map() and pick a stable, unique key for each item
- Can wire click and input handlers that pass a function, with or without an argument
- Can show, hide or swap UI with an early return, a ternary or &&, without a stray 0
Module 5 · 1h 8m
The hooks toolbox Locked
What you'll be able to do
- Can choose a useEffect dependency array and predict how often the effect runs
- Can write the cleanup that stops a timer, a listener or a connection
- Can decide between state, a ref and context for a piece of data
- Can extract repeated hook logic into a custom hook that follows the Rules of Hooks
Module 6 · 1h 3m
Building real apps Locked
What you'll be able to do
- Can build a controlled form that checks what people type as they type it
- Can explain what triggers a re-render, measure it, and use memo only where it helps
- Can break a mock-up into a component tree and place each piece of state
- Can choose the next tool for a project: a router, a data library or a framework