React Workshop Series

Day 1 · Topic 1 of 15Teaching & theory

Foundations & build/Why React & Next.js?

Your Day 1 slide companion

Follow the topics in order, use the Copy buttons and checkpoints, and raise your hand when you need a helper. Your code is expected to grow one small step at a time.

9 theory5 hands-on

Why React? Why Next.js?

Slide companion · 15–27

Your takeaway: Explain the different jobs of HTML, React, and Next.js—and why we are using all three together.

Start with the problem

Why can't we just use HTML?

We can—and HTML is still the foundation of every page we build. React and Next.js help when a site grows and the same interface, data, and behaviour appear in many places.

Imagine manually writing 50 similar student cards. Copying the markup works at first, but a new logo or card layout means finding and editing every copy. The difficult part is not the first card; it is keeping all 50 copies consistent later.

Repeated by hand

50 copies → 50 places to maintain

One forgotten copy can look different from the others.

Reusable component

One card template → reused many times

Change the shared structure once, then each use receives its own details. We will build this pattern in the Components topic.

Concept preview — do not copy yetConcept only

1// Build the shared shape once...
2function StudentCard({ name }) {
3  return <article><h2>{name}</h2></article>;
4}
5 
6// ...then reuse it with different information.
7<StudentCard name="Aisha" />
8<StudentCard name="Marcus" />

HTML is not the enemy

React components still produce interface elements such as headings, paragraphs, links, and images. Your HTML knowledge remains useful; React gives you a practical way to compose and update those elements.

Three layers, three different jobs

Foundation

HTML, CSS, and JavaScript

HTML describes content, CSS styles it, and JavaScript adds behaviour. React and Next.js build on these web foundations rather than replacing them.

UI library

React

React helps us describe an interface as reusable components and update that interface when its data changes. It focuses mainly on the UI layer.

React framework

Next.js

Next.js uses React and adds an application structure plus integrated features such as routing, rendering, image handling, and server code.

Our project

React inside Next.js

This is not React versus Next.js. A Next.js app is a React app with framework conventions and tools around it.

The kitchen analogy from the slides

React library = your utensils

A knife is a focused tool. The chef chooses when and how to use it. In the same way, React gives us focused tools for composing user interfaces.

Next.js framework = a recipe or meal kit

The kit supplies a useful structure and agreed places for things. You still choose what to build, but you do not have to invent every convention yourself.

A useful correction to remember

React does not make routing or data fetching impossible. It simply does not prescribe a complete app solution by itself; developers can add other libraries. Next.js is one framework that integrates those app-level decisions for us.

What Next.js adds to our toolkit

Comparison of React's focus and features integrated by Next.js
Need	React's focus	Next.js integration
Reusable UI	Components and updates	Uses React components
Pages and URLs	Not prescribed by React itself	App Router and file conventions
Search-friendly output	Needs an app-level approach	Rendering and metadata tools that support discoverability
App features	Combine React with other tools	Image optimisation, server features, and build tooling

These features give us a strong starting point; they do not guarantee a fast or highly ranked website automatically. Our content and code still matter.

Checkpoint — explain it to a partner

Finish this sentence: “React helps me ______; Next.js helps organise the full app by ______.” If you can describe their different jobs, you are ready to set up the project.

Day 1 — Why React & Next.js?