Your First Component

What a component is. A JavaScript function that returns markup. That is the whole idea.

Two rules make it a component rather than an ordinary function: its name starts with a capital letter, and it returns JSX.

Why the capital letter. It is not a style preference. When React sees <card /> it assumes you mean an HTML tag called card. When it sees <Card /> it looks for your component. Lowercase is the single most common reason a component renders nothing at all.

✦ One root element

A component returns exactly one thing, because a function returns one value. Two elements side by side is a syntax error. Wrap them in a div when a wrapper makes sense, or in <> and </> when it would not: that is a fragment, and it groups without adding anything to the page.

How to read the exercises. Each graded task runs your component and then inspects what appeared on the page. It does not read your code, so there is no single expected wording. If your component produces the right result, it passes.