Build with Components

Why components?

In the previous exercise, you added HTML directly to the main page of your portfolio. That works, but it's not how modern web development is typically done. As projects grow, putting everything in one file becomes unwieldy — hard to find things, hard to maintain, and easy to break something accidentally. This is where components come in.

Components are reusable pieces of UI, each defined in its own file. Think of them like building blocks — self-contained units that you can reuse with different content. If you've ever used symbols or components in Figma, this concept will feel immediately familiar. A Figma component has a defined structure that you can reuse across your design, customizing it with overrides for each instance. Code components work the same way.

Props, children and imports

Components often support props — short for properties. Props are inputs that let you customize what a component displays. They're the code equivalent of Figma variants: the same component in multiple versions. A Button component might have a text prop; a ProjectCard might have title, description, and image props. You pass values in when you use the component, and it renders accordingly.

A related concept is component children (also called slots). Children refers to elements that you pass into the component. Usually, that means content that you want nested inside the component as a wrapper. They're the code equivalent of Figma slots.

To use a component, you need to import it first. Components live in separate files (usually in a components/ folder), and before you can place one on a page, you need to tell the framework where to find it. This is done with an import statement at the top of the file. Forgetting to import is one of the most common errors you'll encounter — and now you'll know what's happening when you see it.

Composition and reusability

Composition is the idea of building complex UIs from simple pieces. You nest components inside other components (as children or hardcoded inside directly), creating a hierarchy: a page contains sections, sections contain cards, cards contain headings and buttons. Each level of this tree handles one thing well. This makes code much easier to understand than one massive file where everything is mixed together.

The practical power of components is reusability. Without components, showing five project cards means copying and pasting the same HTML five times. Change the design of a card and you'd need to update all five copies. With components, you define the card once and use it five times — change the component file and every instance updates. Consistency is guaranteed.

How Astro components work

In Astro (the framework you're using), a component file has two parts: the frontmatter (JavaScript between --- delimiters at the top, where you define props and logic) and the template (the HTML below, where you write the structure). This pattern is similar across most frameworks — React, Vue, and others all have their own version of the same idea.

When to use components

Components don't have to be complex. Sometimes a component is just a few lines of HTML wrapped in a file for organization. Other times it's a sophisticated piece of UI with conditional logic, data fetching, and nested sub-components. The right level of abstraction depends on the situation — not everything needs to be a component, but anything you'll reuse or that represents a distinct concept probably should be.

Understanding components is one of the most transferable skills in web development. Every modern framework is built around this concept. When you read code in a real codebase, the structure is almost always component-based. And when you ask AI to build something, it will create components. Knowing how they work — how props flow, how composition works, how to spot when a component is doing too much — gives you the ability to evaluate and direct that output effectively.