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 12: Smoosh components

Compose means โ€œsmoosh things together.โ€

You can smoosh ๐Ÿฅ› and โ˜•๏ธ.

You can smoosh a ๐Ÿ” with your ๐Ÿ˜‹.

You smoosh things all day; itโ€™s not fancy.


HTML is smooshable by default.

  <em>Tilted Heading</em>

The h1 and em are smooshed.

But if we try and smoosh things with our ClapCounter, nothing happens.

  <h1>Clap This!</h1>


Meet children

All react components get a special prop: children.

Up to this point, weโ€™ve had no children. But the stork delivered one when we nested <h1>Clap This!</h1> in <ClapCounter />.


Now that we have children, we can render them. Letโ€™s put them at the top.

class ClapCounter extends React.Component {
  render () {


Congrats! You learned how to smoosh.

Weโ€™ll do more advanced smooshing next week.

Tinker with it

Use the workspace below and explore smooshing.

  • What happens if you keep the {this.props.children} but remove the nested <h1>?
  • Can you smoosh another custom component in ClapCounter? Make one and find out.
โ† Previous
Next โ†’

Learn other React stuff...