⚛️🌲 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 1: Hello 🎄

December 01, 2017

In C, programs have a main() function. It’s where programs starts.

React apps are similar; on the web they start with ReactDOM.render().

ReactDOM.render(someReactComponent, someDOMNode)

WTF is ReactDOM?

React is used all over—web, mobile, desktop, VR, appliances. Lots of places.

Instead of stuffing all those smarts into one enormous library, each platform has a partner library.

On the web, that’s ReactDOM.

We use React to create components and ReactDOM to render them into the DOM.

ReactDOM.render(
  React.createElement('h1', {}, 'Hello 🎄'),
  document.getElementById('root')
)

Tinker with it

Use the window below and play around with render().

  • Comment out the import statements. What errors do you get?
  • Change the component type to something other than h1.
  • Put some values in the empty object (second argument). What happens? What errors do you get?

chantastic

Written by chantastic.
Follow his nonsense on Twitter.