Creating React Elements

The way we render a react element is very similar to doing something like document.getElementById and then appending our new element. At the highest level of any React project we start by passing JSX into the ReactDOM.render function like this:

const element = <h1 className="heading">Hello, world</h1>
ReactDOM.render(element, document.getElementById('root'))

A core dependency of React is Babel. Under the hood, Babel transpiles that JSX and uses React’s top level api to create a React Element with another function: React.createElement().

This function takes in these params:

React.createElement(type, [props], [...children])

So using that same example above, this…

const element = <h1 className="heading">Hello, world</h1>
ReactDOM.render(element, document.getElementById('root'))

Will transpile into this:

const element = /*#__PURE__*/ React.createElement(
  'h1',
  {
    className: 'heading',
  },
  'Hello, world'
)
ReactDOM.render(element, document.getElementById('root'))

Take a look at the Babel output for more context.

You could almost say that at its core, React uses nothing but functions used to create a UI.