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.

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Looking for more help?

    Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at infinite.red/react-native for a proposal on your next project!