React Holiday

Day 3: Components are functions

Components are just functions.


How do I write said component functions?


Here’s one that spits out our Hello 🎄 wherever used.

function Greeting() {
  return <h1>Hello 🎄</h1>;

How do I use said component functions?

JSX has you covered. Just use the function name like an HTML tag.

<Greeting />

That’s it?

Pretty much, but here’s something to remember - Capitalize your Custom Components. If you don’t, JSX transformers assume you meant a native DOM element.

Tinker with it

Use the workspace below to play with components.

  • Write and use a component of your own creation.
  • Mix custom components and native components. Any issues?