03. Components of your own

Make your own components and use them like HTML tags: write one once, show it as many times as you like.

Any function that returns JSX, with a name starting with a capital letter, is a component. Use it like a tag: <Welcome />. Write it once, use it many times.

JSX

1function Rule() {2  return <p className="rule">Be kind. Be on time.</p>;3}4
5export default function App() {6  return (7    <div>8      <h1>Class rules</h1>9      <Rule />10      <Rule />11    </div>12  );13}

The capital letter matters: <Rule /> is your component, but <rule /> would be treated as an unknown HTML tag. Components can use other components, and that's how big apps are built: App uses Header, Header uses Logo, and so on.

Your turn

1Steps

1Make a component called Star that returns <span className="star">★</span>.
2In App, show a heading My rating, and then a <div className="stars"> with your Star used 4 times.

Write your component in App.jsx, as export default function App(); the preview shows it as you type.

Starting code

The editor starts empty. Copy this into it to begin, or write your own from scratch.

JSX

1export default function App() {2  return (3    <div>4      <h1>My rating</h1>5      <div className="stars">★★★★</div>6    </div>7  );8}

2Expected output

Your page should have

The heading says My rating
There are exactly 4 stars
Each star shows ★
App.jsx has a component called Star
App uses <Star />

Submit answer checks each of these.

3Hints

Stuck? Open one hint at a time: each gives a bit more help.

Hint 1

Write function Star() { … } above App, returning one span.

Hint 2

function Star() { return <span className="star">★</span>; }

Hint 3

In App: <div className="stars"><Star /><Star /><Star /><Star /></div>