Web Development with React

How the web works

Follow one click from the address bar to a finished page: URLs, DNS, HTTP requests and responses, and how the browser turns HTML, CSS and JavaScript into what you see. This is the mental model every React developer works on top of.

HTML and CSS essentials

Build a responsive menu page for the Brew & Bean coffee shop with semantic HTML and modern CSS: the box model, Flexbox, Grid and a media query. React outputs HTML and is styled with CSS, so these basics carry straight into every React app.

Modern JavaScript for React

Learn the JavaScript that React code uses on every line: const and let, arrow functions, template literals, destructuring, spread, map/filter/find/reduce, modules, conditional expressions and async/await. You will run every example with Node.js on Brew & Bean menu data.

Start a React project with Vite

Create a React project with Vite, run it in the browser, understand each file, and clean it up into the Brew & Bean starting point. This is the base for every later lesson.

Components and JSX

Build the Brew & Bean page from small components and learn the rules of JSX: one parent, className, braces for JavaScript, and imports and exports between files.

Props and composition

Make components reusable with props, understand why props are read-only, and build wrapper components with children. Your menu cards start showing real Brew & Bean data.

State and events

Make the Brew & Bean page interactive with useState and event handlers. Build a working cart, learn why state must never be mutated, and see how to lift state up.

Lists, keys and conditional rendering

Turn arrays of data into lists of components with map(), understand why every item needs a stable key, and show or hide parts of the screen with conditional rendering. You will build a filterable Brew & Bean menu.

Forms and validation

Build a Brew & Bean pickup-order form with controlled inputs, one shared change handler, validation on submit and clear error messages. Learn why the server must still check everything.

useEffect and fetching data

Learn what an effect is, how the dependency array works, and how to fetch data safely with loading and error states, cleanup and cancellation. You will load the Brew & Bean menu from a JSON file.

Custom hooks

Learn the rules of hooks and how to pull repeated stateful logic into your own functions. You will write useFetch, useLocalStorage and useDebounce hooks and use them to build a Brew & Bean cart that survives a page refresh.

Routing with React Router

Turn a single-page React app into a multi-page experience with React Router: routes, links, a shared layout, URL parameters, redirects, a 404 page and navigation from code. You will build the Brew & Bean site with Home, Menu, Item and Order pages.

Styling: CSS modules and Tailwind CSS

Learn two popular ways to style React components: CSS Modules, which scope plain CSS to one component, and Tailwind CSS, which uses small utility classes. You will style a Brew & Bean menu card both ways and learn when to pick which.

TypeScript with React

Add types to a React app so mistakes show up in your editor instead of in the browser. Learn types for props, state, events, fetched data and custom hooks by typing a Brew & Bean order screen.

Managing app state: Context, Zustand and server state

Learn to sort state into kinds and pick the right tool for each: useState, lifting up, Context, Zustand, or TanStack Query for data from a server. Avoid the most common mistake: putting everything in one global store.

Next.js: server rendering and when you need it

Understand client-side vs server rendering, then build a small Next.js app with file-based routes, server components that fetch data, a dynamic page and one interactive client component. Learn when Next.js is worth it and when plain React is enough.

Performance and accessibility

Learn what makes a React app feel slow, how to measure it before fixing it, and the handful of techniques that matter most. Then learn the basics of accessibility so keyboard and screen reader users can use your app too.

Testing React components

Set up Vitest and React Testing Library in a Vite project, then write tests that act like a user: render a component, click, type, and wait for fetched data. Learn what to test, how to mock fetch, and how to read a failing test.

Project: recipe finder app

Build and finish a recipe finder with React, Vite and React Router: search recipes from a free public API, open a detail page with ingredients and steps, and save favourites that survive a page refresh. Ready to deploy in the next lesson.

Deploy and share your app

Put your React app on the internet with a public link: build it, push it to GitHub, deploy on a free host such as Vercel or Netlify, fix the refresh-gives-404 problem, and handle environment variables safely.

React interview essentials

The React questions that come up again and again in frontend interviews, with short, correct answers you can say in your own words, the classic pitfalls (stale state, missing keys, effect loops) and the small coding tasks interviewers like to set.