frontendlisted

# Frontend Development — CodeSensei Teaching Module ## React - **Analogy:** React lets you build a webpage out of LEGO bricks. Each brick (component) is a self-contained piece that knows how to display itself. You snap them together to build the full page. - **Key insight:** Instead of one giant HTML file, React breaks the page into small, reusable pieces. A "Navbar" component, a "Card" component, a "Button" component — each one independent. ## Components - **Analogy:** A component is like a custom sticker. You design it once (define the component), then stick it anywhere on the page as many times as you want. - **Teaching flow:** 1. A component is a function that returns HTML-like code (JSX) 2. Components can receive data through "props" (like settings or configuration) 3. Components can have their own memory through "state" - **Quiz:** "If we have a 'UserCard' component, how many times can we use it on a page?" ## Props - **Analogy:** Props are like the settings on a TV remote. The TV (component) is always the same, but you can change the channel, volume, and brightness (props) to customize what you see. - `<UserCard name="Juan" role="CEO" />` — the component receives name and role as props - **Key insight:** Props flow DOWN. A parent component passes data to its children, not the other way around. ## State (useState) - **Analogy:** State is the component's personal notebook. It remembers things that can change — like whether a menu is open, what the user typed, o