Component
ELI5 — The Vibe Check
A component is a self-contained LEGO brick for your UI. It's a chunk of HTML, CSS, and JavaScript bundled together that you can drop anywhere and reuse as many times as you want. Build once, use everywhere, fix in one place.
Real Talk
A component is a reusable, encapsulated unit of UI that manages its own template, logic, and styles. Modern frameworks like React, Vue, Angular, and Svelte are all component-based. Components accept inputs (props), manage internal state, and emit events.
Show Me The Code
<!-- Vue component -->
<template>
<button @click="count++">Clicked {{ count }} times</button>
</template>
<script setup>
const count = ref(0);
</script>
When You'll Hear This
"Extract that into a component so we can reuse it in three places." / "The Button component needs a size prop."
Related Terms
Lifecycle
The lifecycle is a component's life story — it's born (mounted), lives and updates (updates), then dies (unmounted).
Props
Props are how you pass information INTO a component, like giving a coffee machine its settings.
React
React is a JavaScript library from Meta for building UIs out of components.
Slot
A slot is a placeholder in a component where a parent can inject its own custom content.
State
State is a component's memory — data that can change over time and causes the UI to update when it does. Think of a counter: the number is state.
Vue
Vue is a JavaScript framework for building interactive UIs. It's famous for being easy to pick up — HTML developers feel right at home.