Alternatives to the react.createElement() Method

Repeated usage of react.createElement() might compromise the readability of our React components. In fact, nesting many invocations of the react.createElement() method, even with our h() alias, will make it hard to understand the HTML structure we want our components to render.

For this reason, it’s not very common to use react.createElement() directly. To address this problem, the React team offers and encourages an alternative syntax called JSX.

Using JSX

JSX is a superset of JavaScript that allows us to embed HTML-like code into JavaScript code. JSX makes the creation of React elements similar to writing HTML code. With JSX, React components are generally more readable and easier to write. Let’s see what we mean here by looking at a concrete example. Let’s rewrite our “Hello React” application using JSX.

Try it yourself

You can go through the code by executing the following command: