A component is a function (React) or a single-file unit (Vue) that receives props and returns UI. Props flow down from parent to child; they are read-only. React: function that returns JSX. Vue: template plus script (and optional style).

Keep components small and focused. When many levels need the same data, use context (React) or provide/inject (Vue) instead of prop drilling. Compose by passing components as props or slots.

useState (React) or ref/reactive (Vue) hold state; changing it triggers a re-render so the UI stays in sync. State is local to the component unless you lift it up or put it in a store.

Lift state up to the lowest common parent that needs it. Avoid global state (context, store) until you have real pain (e.g. many levels, many consumers). Derive values when possible instead of storing them.

Event handlers (onClick, @click, etc.) respond to user input and update state or call props. For data fetching, timers, or subscriptions, use useEffect (React) or onMounted/watch (Vue). Return a cleanup function (or use onUnmounted) so you do not leak listeners or timers.

[MDN – React](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started).