Web Frameworks & Stacks: React, Next.js and Express

Published 8 Nov 20265 min read

Web Frameworks & Stacks is an interactive web frameworks course that explains how modern websites are built. In 25 sections it covers why frameworks exist, single-page and multi-page apps, React components, props and state, Next.js server rendering and file-based routing, Express on the backend, the full stack, and package managers, with diagrams and a practice question every few sections.

It explains the ideas behind the tools rather than walking through one project, so terms like SSR, hydration, props and routes stop being jargon.

What the course covers

Sections	Topic	What you do
1 to 4	Why frameworks exist, and how they update the page	Compare plain JavaScript with a framework, then match the concepts
5 to 7	Single-page and multi-page apps	Watch both request flows side by side, then classify statements
8 to 10	React components, JSX and props	Fill in the blanks of a React component
11 to 13	State and reactivity	See state flow down as props, then sort features into state or props
14 to 16	Next.js and rendering: CSR, SSR and SSG	Compare the strategies, then pick one for each scenario
17 to 19	Express and the full stack	Follow a request through frontend, backend and database, then order the steps
20 to 22	Client-side and server-side routing	Click files in a Next.js project to see their URLs, then map files to routes
23 to 25	npm, yarn and starting a project	Watch create-next-app run, then answer questions about a package.json

The frontend

Plain JavaScript makes you find each element and change it by hand. A framework flips that: you describe what the page should look like for the current data, and it works out the changes. React does this with components, functions that return JSX. Data flows down from parent to child as props, and data that changes lives in state, which re-renders the component when it is updated.

function Welcome({ name }) {
  return <p>Welcome, {name}!</p>;
}

<Welcome name="Priya" />

Rendering and routing

Next.js builds on React. It can render pages on the server (SSR) so they appear straight away, build them ahead of time (SSG) for speed, or leave them to the browser (CSR), and you can mix all three in one site. Its file-based routing turns a file such as app/about/page.tsx into the page at /about.

The backend and the full stack

Express is a small Node.js framework for servers and APIs. Put together, a full-stack app has three layers: the frontend sends a request, the backend handles it and asks the database, and data comes back as JSON for the page to show.

Try a question from the course

A multi-page app loads a whole new HTML page from the server every time you click a link. A single-page app loads once, then swaps content in the browser and only fetches data. So a page that flashes white and reloads completely on each click is acting like a multi-page app.

Now classify a statement, then press Mark to check your answer in the course.

Press Mark to have your answer marked in the Web Frameworks & Stacks course.

Who this course is for

Beginners who know some HTML, CSS and JavaScript and keep meeting React and Next.js in tutorials and job adverts.
Students on web development or computing courses who need the big picture of a modern stack.
People building sites with AI tools who want to understand the project the AI created.

What you need to know first

Basic HTML, CSS and JavaScript, especially functions. The HTML, CSS & JavaScript course covers enough to start. Knowing what an API is helps for the Express sections, and the APIs course explains that in depth.

How long it takes

There are 25 sections and most take a few minutes. Learners without a plan can open two sections of a course a day, in order, so the whole course takes 13 days. A plan removes the daily limit and lets you go straight to any topic, such as rendering strategies.

Guided courseHosting & DeploymentThe next step after building with a framework: domains, DNS, deploying from Git, CI/CD and HTTPS.

Common questions

Is this web frameworks course free?

You can take every section without paying, two sections a day, in order. A plan removes the daily limit and opens any section straight away.

Does this course teach me to build a React app?

It teaches the ideas you need to understand one: components, JSX, props, state, rendering and routing, with short code examples and practice. It is not a step-by-step project tutorial, so pair it with building something small in the Code Editor or your own project.

What is the difference between React and Next.js?

React is a library for building user interfaces from components. Next.js is a framework built on React that adds routing, server-side rendering and static generation.

What is the difference between props and state?

Props are read-only values a component receives from its parent. State is data a component owns and can change, and changing it re-renders the component.

What are SSR, SSG and CSR?

Server-side rendering builds the page on the server for each request. Static site generation builds it once, ahead of time. Client-side rendering sends JavaScript that builds the page in the browser.

What is a full stack developer?

Someone who works on all three layers of a web app: the frontend people see, the backend server, and the database behind it.

Revision cards

Say the answer first, then flip the card to check it.

Where to go next

Solve it
Code Editor
Write and run code right in your browser
Open the tool
Learn it
Web Frameworks & Stacks
React, Next.js and Express: understand the modern web stack
Start the course