---
id: "prereq-react-components"
type: "prereq"
source_timestamps: ["00:14:11", "00:15:39"]
tags: ["web-development", "react"]
related: ["entity-remotion", "concept-programmable-video"]
reason: "Necessary to grasp why 'programmable video' is more editable and scalable than pixel-generated video."
sources: ["s48-markdown-design-meeting"]
sourceVaultSlug: "s48-markdown-design-meeting"
originDay: 48
---
# Familiarity with React component architecture

## Prerequisite

Familiarity with **React component architecture** — props, composition, state, and how components can be parameterized and version-controlled.

## Why It's Required

The argument for [[concept-programmable-video|programmable video]] (and the [[contrarian-programmable-vs-generative-video|contrarian framing against generative pixel video]]) hinges on understanding *why code is more powerful than pixels*. Without React fluency, the audience can't grasp:

- Why [[entity-remotion|Remotion]] videos are 'infinitely editable.'
- How a single component can drive 1,000 parameterized variants.
- Why version control of video makes localization and data updates trivial.
- Why the agent-renderer loop (Claude writes React → Remotion renders MP4) is so leveraged.

## What 'Understanding React Components' Means Practically

- Components are reusable functions that take **props** and return UI.
- Composition: components contain other components.
- Parameterization: the same component renders differently for different props.
- Code is **version-controllable** (git), so changes are diffable and revertable.

## If Your Audience Lacks This

Ground them in:
1. A simple `<Greeting name='Alice' />` example.
2. The idea that the same `<Greeting>` works for any name.
3. The leap: in Remotion, a `<Promo title='X' headline='Y' />` works for any campaign.

## Related
[[entity-remotion]] · [[concept-programmable-video]] · [[contrarian-programmable-vs-generative-video]] · [[claim-remotion-top-skill]]