Props

ELI5 — The Vibe Check

Props are how you pass information INTO a component, like giving a coffee machine its settings. You tell the component 'hey, be blue and say Hello' and it uses those values. Props only flow downward — from parent to child.

Real Talk

Props (short for properties) are read-only inputs passed from a parent component to a child component. They allow components to be configurable and reusable. In React, props are plain objects; in Vue, they're declared with defineProps(). Components should never mutate their own props.

Show Me The Code

// React
function Badge({ label, color }) {
  return <span style={{ color }}>{label}</span>;
}

// Usage
<Badge label="Admin" color="red" />

When You'll Hear This

"Pass the user's name as a prop to the Avatar component." / "Don't mutate props — emit an event instead."