JavaScript Curriculum
"The coffee shop site works but every change means editing raw HTML. React lets you build the menu as reusable components, update state without touching the DOM, and compose complex UIs from simple pieces."
React turns your UI into a tree of components — each one a function that takes data and returns what to display. Learn the mental model, the hooks, and the patterns that power every modern React app.
What you'll ship
A fully interactive Coffee Menu React app — components, props, state, effects, routing, and data fetching. The same app you built with vanilla JS, rebuilt the React way.
Lessons
What is React
Virtual DOM, JSX, component model, declarative UI
Your First Component
Function components, JSX syntax rules, returning elements, export
Props
Passing data, prop types, default values, children, callback props, spread
State — useState
useState hook, re-renders, state updates, immutability, functional updates
Event Handling
Synthetic events, onClick/onChange, handler patterns, preventDefault, forms
Conditional Rendering
Ternary, &&, early return, nullish coalescing, loading/error/empty states
Lists & Keys
.map(), key prop, stable keys, filter+map, Fragment with key
Forms in React
Controlled inputs, textarea, select, radio, checkbox, validation, uncontrolled
useEffect
Side effects, dependency array, cleanup, fetch in useEffect, timers
Component Composition
children prop, slot patterns, compound components, container/presenter, specialisation
Lifting State Up
Shared state, sibling communication, common ancestor, callbacks, data flow
useRef
useRef, DOM access, mutable values, previous value, forwardRef
Custom Hooks
Extracting logic, reusable hooks, hook rules, useFetch, useDebounce
useReducer
useReducer, reducer function, dispatch, actions, complex state
Context API
createContext, useContext, Provider, prop drilling, context value
Performance — memo & callbacks
React.memo, useMemo, useCallback, render profiling, premature optimisation
React Router
BrowserRouter, Routes, Route, Link, NavLink, useParams, useNavigate, nested routes, Outlet
Data Fetching Patterns
fetch in useEffect, loading/error/data state, AbortController, parallel fetches, useFetch hook, mutations
Component Patterns
HOC, render props, compound components, controlled components, custom hooks
Capstone — Coffee Menu App
All React skills combined — components, state, effects, context, routing, data fetching