Components and Why They Exist
Goal — Understand why modern sites are built from reusable components, and set up a React project.
By the end — A React project scaffolded with Vite, committed — and a feel for what a component is.
1See the problem components solve
On a plain HTML page, repeating a card or a button means copying the code everywhere. Changing it means editing every copy — tedious and error-prone as a site grows.
Explain why copying HTML for repeated elements becomes a problem as a site grows.2Meet the idea of a component
A component is a reusable piece of interface you define once and use many times. Change it once, it updates everywhere it appears.
Explain what a UI component is, using a button or a card as the example.3Understand what React is
React is the most common tool for building interfaces out of components. It is why "components" is the language of modern web work.
Explain what React is and why it exists, in plain terms for a designer.4Set up a modern project, guided
Vite is a fast tool that scaffolds and runs a React project. Let Claude set it up and explain what it creates.
Set up a simple React project for this site using Vite, and explain the main folders and files it creates.Approve the steps as it goes. Then read its explanation of the structure — src, the entry file, the first component.
5Understand the shape
See how the smallest component turns into what you see on screen — that is the whole idea in miniature.
Show me the smallest component in the project and explain how it turns into what I see on screen.Then commit it.
Open the Terminal app.
git add . && git commit -m "Set up React project" && git pushRecap — You learned why components exist and scaffolded a React project with Vite — the foundation for building interfaces from reusable parts.