JSX looks like HTML, but actually, we’re just writing JavaScript code in that snippet!

HTML tags are not natively supported in JavaScript though, hence the code in the snippet only executes if it’s transpiled to “regular” JavaScript.

JSX is just syntactical sugar! It doesn’t run natively in the browser and React does not depend on it!

You simply use JSX in React projects because you can write your rendered HTML code as - well - HTML code. This of course means, that you could also just skip the JSX step and instead directly write the code to which it would get compiled to.

Here, we use a method provided by React: createElement. You therefore need to import React into your JS file:

import React from'react'

This is the reason why you have to add this import to your JS files where you use JSX, too. Did you ever wonder why you needed it, even though you did never use the React object? Well, JSX and the code it gets transpiled to (which does use the React object) is the reason.

Let’s take a closer look at createElement.

We pass three arguments to it:

'div': This tells React which HTML element you eventually want to render to the DOM

null: This defines which properties you want to set on the created element (e.g. add a CSS class)

'I\'m JSX': This defines what goes between the HTML tags (i.e. between <div> and </div> in this case)

Okay, so we have these React elements which we create with React.createElement. But what is that actually and how do we render it to the DOM?

You might recall that vanilla JS has a createElement method, too:

document.createElement('div')// This creates a <div>

React.createElement essentially creates a JS object with all the configuration required to render it to the real DOM. And that rendering is done with the help of another package from the React universe: ReactDOM.