Component-Based Architecture
Modern frontend frameworks share a powerful idea: build complex interfaces from simple, reusable pieces called components. Instead of writing one massive HTML file, you create small building blocks that snap together like LEGO bricks.
What Is a Component?
A component is a self-contained UI unit that bundles everything it needs to work. Each component typically has:
- Inputs (props): Data passed in from parent components
- Internal state: Data the component manages itself
- Rendered output: The actual UI the user sees
Think of a Button component. It receives a label and click handler as inputs, might track whether it's being pressed as internal state, and renders an actual button element. That same button can appear throughout your app without duplicating code.
From Simple to Complex
Components range from tiny to elaborate:
Button → Simple, highly reusable
UserCard → Displays user info with avatar and name
SearchBar → Input field + button + suggestion dropdown
UserList → Composes multiple UserCards together
Dashboard → Composes dozens of components into a full page
The magic happens through composition — complex components are built by combining simpler ones. A Dashboard doesn't need to know how a Button works internally. It just uses it.
Components Across Frameworks
Every major framework implements components differently, but the concept remains the same. Here's a simple button in each:
// React - uses functions and JSX
function Button({ label, onClick }) {
return <button onClick={onClick}>{label}</button>;
}
<!-- Vue - uses single-file components -->
<template>
<button @click="onClick">{{ label }}</button>
</template>
<!-- Svelte - compiles away the framework -->
<script>
export let label;
export let onClick;
</script>
<button on:click={onClick}>{label}</button>
// Angular - uses decorators and classes
@Component({
selector: 'app-button',
template: '<button (click)="onClick.emit()">{{label}}</button>'
})
export class ButtonComponent {
@Input() label: string;
@Output() onClick = new EventEmitter();
}
Despite syntax differences, each defines a reusable button that accepts a label and emits click events.
Thinking in Components
When building a UI, start by identifying the components. Look at a design and draw boxes around distinct pieces. Ask yourself:
- What's reusable across pages?
- What has its own data or behavior?
- What could be tested independently?
Good component design leads to code that's easier to understand, test, and maintain. When you fix a bug in your Button component, every button in your app gets fixed.