In a nutshell

Each React renderer has an entry point API that lets us tell React to render a particular React element tree inside a container host instance. For example, React DOM provides you with the ReactDOM.render API:

ReactDOM.render(reactElement, domContainer)

This tells React to make the domContainer host tree match your reactElement tree.

So, something like:

ReactDOM.render(
  // { type: 'button', props: { className: 'blue' } }
  <button className="blue" />,
  document.getElementById('container')
);

results in:

const domContainer = document.getElementById('container')
const domNode = document.createElement('button')
domNode.className = 'blue'

domContainer.appendChild(domNode)

If the React element has child elements in props.children, then React will recursively create host instances for them too on the initial render.

Sources

• React as a UI runtime – Overreacted