⚛️🌲 React Holiday

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

December 03, 2017

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?


Written by chantastic.
Follow his nonsense on Twitter.