Frontend engineering · Basics
Component
Also called: UI component, Components, Reusable component
Splitting a page into small pieces you can write on their own and reuse. Each piece has its own structure, styles, and logic, and you snap them together like building blocks.
In detail
Components are like LEGO bricks. A navbar, a product card, and a button can each be a brick: build it once, reuse it everywhere. In React, a component is usually a function that returns JSX, in a file named something like ProductCard.tsx. In Vue, it's a .vue file. Components get outside data through Props and remember their own internal changes with State.
Keep three layers apart: a Component is a brick in your project. A Component Library is a whole box of bricks someone else made (like Ant Design or shadcn/ui). A Frontend Framework is the rules and baseplate for putting bricks together (like React or Vue).
Well-split components each do one job, so changing one doesn't break others. When a page file gets past a few hundred lines, it's usually time to have the AI split it into components.
Developer infoTerm ID, DOM cues, match priority
- Term ID
eng-component- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026