1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    What is createElement?

    Chris BiscardiChris Biscardi
    reactReact

    React's createElement is at the core of most React applications, and due to it being used indirectly through JSX you may not even know it!

    Further, createElement is a normal function and we can implement our own version of createElement to use in our React applications.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Chris Biscardi: 0:00 Here we have a brand-new project that depends on React and ReactDOM. In index.js, we have a complete React app with a problem. When we run the application, we see a SyntaxError on the first JSX bracket.

    0:12 We can solve this problem by manually compiling with JSX the React that createElement calls. Note that we also have to handle the app declaration in renderToString.

    0:22 Now, when we run the application, it outputs the string HTML. CreateElement is a top-level API in the React ecosystem. CreateElement takes the type as the first document, the components props in the second, and any children of the component as the remaining elements.

    0:36 The type can be an HTML host element as a string like div or span, a React component like a class or a function, or a React fragment.

    0:43 Back in our app, the className prop is passed into the

    component, while the

    and

    elements take null props. Note that we can keep that in children to any of the createElement calls. There are some HTML comments in the output, but we won't talk about those today.

    0:58 Here, we've moved the

    element out to its own React component and we can use that component in our createElement call. The new component takes no props and no children. After running the application again, we get the same output.

    1:12 React happens to provide us with createElement function as do other libraries like Preact. If we want to use a custom pragma, we're going to have to implement our own version of createElement using the same type statement.