Now that our environment has been set up to support JSX, we can dive into the most basic example: generating a div element.

This is how you would create a div element with React's createElement function:

  React.createElement('div')

And this is the JSX for creating a div element:

  <div />

It looks similar to regular HTML.

The big difference is that we are writing the markup inside a .js file, but it is important to note that JSX is only syntactic sugar, and it gets transpiled into JavaScript before being executed in the browser. 

In fact, our <div /> element is translated into React.createElement('div') when we run Babel, which is something we should always keep in mind when we write our templates.