I get to hear people complaining:

I can’t really stomach JSX.

And let’s face it. Seeing JSX for the first time can be outraging, even heretical at first.

<SomeComponent firstProp={value} />

What does this HTML do in my JS file?, you are left to wonder.

Where’s that “separation of concerns?” Anyone? Isn’t it a step back?

I’ve felt similarly when I discovered React a few years ago.

The purpose of this post is two-fold: to show what JSX is about, and to list the alternatives. So, without further ado:

JSX is syntactic sugar for constructing your components using a special function.

When do you this:

<a href={someLink}>Text</a>

<SomeComponent firstProp={value} />

What really happens is this:

React.createElement('a', { href: someLink }, 'Text')

React.createElement(SomeComponent, { firstProp: value })

Ever wonder why you have to import React from 'react' even if you don’t use the React variable? Yeah, that’s why.

So we are NOT, in fact, writing HTML. We are just creating React components.

Do you have to use JSX?

Not at all. JSX is optional.

You can write the React.createElement calls by hand, for example.

You pass this into React.createElement:

1. The component to use: like Navbar. Or the name of the HTML tag, as a string: like 'a', or 'div'. This one is required.
2. Optionally, you can pass the props to that component as an object: like { className: 'fancy-btn' }.
3. Optionally, the component can have some children. These can be either strings, like when you want to render some text; or other components obtained from React.createElement. You can pass in as many children as you want.

An example would be:

React.createElement('div', {},
  React.createElement('a', { href: 'https://reddit.com' }, 'Go to Reddit'),
  React.createElement(Footer),
);

Are there other options?

Indeed there are.

As mentioned above, you can use the React.createElement syntax.

1. Save some characters

If typing it every time feels tedious (it sooo does), this one little trick will save you a lot of typing:

const h = React.createElement;

h('a', { href: someLink });

And voila, now you can use the h function in place of React.createElement.

2. Hyperscript

Hyperscript is, in many ways, similar to what we did above.

What it does bring to the table are the shortcuts for adding class names and IDs.

With our h alias from above, to create a div with ID of login-container and the class of container, we would have to do this:

h('div', { id: 'login-container', className: 'container' });

But With Hyperscript, we can do it like this:

h('div#login-container.container');

Kinda like you would write a CSS selector!

To dive deeper, have a look at the readmes of hyperscript itself, as well as its React bindings.

So should you to use JSX?

You don’t. You can, and should, use whatever you like the most on your projects.

Bear in mind that in the React community, JSX is used almost exclusively. Many open-source React apps, documentation, and a variety of articles keep it to JSX.

You might not always get to dictate what the existing projects use, either open-source or at work, so it’s always helpful to understand what JSX is all about.