Elements

createElement

We instantiate React elements using the React.createElement API. Typically, we call this API using JSX elements, but it's also possible to call it directly.

The function signature is: createElement(type, props, children).

Element tree

Let's take a quick peek at the internals of a React element tree. The exact details of the element tree aren't important to understand right now, but it's useful to get the gist of how React works.

In this example, we instantiate a few React components using JSX and then print their value to the console.

If you click the line of text in the console on the right, you can navigate the tree of JavaScript objects.

Element internals

A React element is a JavaScript object containing at least a type and props.

• The type is a function representing what UI element to render.
• The props object may contain arbitrary properties, e.g. foo, plus a children property containing nested React elements. The children property is somewhat special, since it's created automatically from the nested JSX elements in our code.

The ref and key aren't props... we'll come back to those.