# Your First Component A React component is a JavaScript function that starts with a capital letter and returns JSX. That is the whole definition. Everything else — props, state, hooks — builds on top of this foundation. ## Component Anatomy Click each part of this component to understand what it does: There is no magic. React calls your function with the props object, takes the JSX you return, and renders it to the DOM. When state changes, React calls your function again and updates only what changed. That is the entire React model. ## JSX Rules — The Six You Must Know JSX looks like HTML but it is not. These differences trip up every beginner: JSX is not HTML processed by the browser — it is JavaScript preprocessed by Babel. Every JSX attribute becomes an object key, which is why HTML attributes that clash with JS keywords must be renamed: class → className, for → htmlFor. ## Build a Component Live Adjust the props and see the component and generated JSX update in real time: Never modify props inside a component. Props flow down from parent to child and are owned by the parent. If a child needs to change something, it calls a callback prop passed from the parent. This is React's one-way data flow. ## Your Challenge Write a `MenuCard` component: accepts `name`, `price`, `emoji`, `featured` props. Returns a `div.card` with the emoji in a span, name in h3, price formatted as `£X.XX` in `p.price`, and if featured is true — a `span.badge` with "⭐ Featured". Export as default. Use it three times in App with different props.