React Components

A component is a function whose name starts with a capital letter and returns UI. Hello is a component. div is not — lowercase is treated as an HTML tag. If you write function card() and then <card />, React looks for a real HTML <card> element, not your function. Capital C: function Card() { … } then <Card />. That naming rule is not style. It is how React decides.

You split a page so each file has one job: Header, ProductCard, Footer, CartButton. ProductCard does not fetch the whole user profile. Header does not calculate GST. Small components are easier to test and reuse. A 400-line App.jsx is how juniors drown.

Function components are the default today. They take props as the first argument: function Price({ amount }). They can call hooks. Class components still appear in old codebases: class Box extends Component { render() { return … } }. You must be able to read a class. You should not start a new screen as a class unless the team file already is one.

Let’s take Badge on the board. function Badge({ text }) { return <small>{text}</small>; } then inside Product: <Badge text="Sale" />. Screen: Sale next to the title. Same Badge on ten cards. That reuse is why we bother with components at all.

Props in, UI out. A component should not secretly read a global variable for the thing it displays — pass it in. Side effects (fetch, timers, document.title) go in useEffect, not in the middle of the return. Pure render + effects on the side is the mental model.

Trap: creating a component inside another component’s body on every render (function Parent() { function Child() {…} }). Child remounts every time Parent renders — lost state, slow. Define Child outside Parent, or pass it as a stable component.

React Components — on screen — Shoes + Sale badge. Product uses Badge. Name starts with a capital letter.