What is JSX?

How JSX Transforms into JavaScript

What is createElement?

Pragmas and babel-transform-react-jsx

WTF is JSX

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.

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 <div> component, while the <h1> and <p> 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 <p> 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.

Course

WTF is JSX

What is createElement?

Share this video with your friends