React 🎄


We'll start from basics and get all the way to Suspense, Hooks, and advanced composition!
Each day is a 2-3 minute read with CodeSandbox and quick assignments.
Check out 2017 (below) for examples.

Day 3: Components are functions

Components are just functions.

🤯

How do I write said component functions?

Easy.

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 />
<Greeting></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?
← Previous
Next →

Learn other React stuff...