Learning Redux

Using components

Now that we have a React component, we can render it via React.createElement. Putting everything together, our code should look as follows:

import React from 'react'
import ReactDOM from 'react-dom'

const Greeting = ({ name }) => {
  const uppercaseName = name.toUpperCase()
  return (
    <h1>
      hello {uppercaseName}!
    </h1>
  )
}

ReactDOM.render(
  React.createElement(Greeting, { name: 'dan' }),
  document.getElementById('root')
)

Here is the great thing about React and JSX: instead of rendering simple HTML elements, we can render our React component, as if it was an HTML element:

ReactDOM.render(
  <Greeting name="dan" />,
  document.getElementById('root')
)

Let's think about what happens here:

• We call ReactDOM.render with our Greeting component ...