The Good and Bad parts of JSX

JSX is a de facto standard for declaring components structure in React applications. It became popular because of familiar syntax, in this case it’s HTML. But not only that. I personally started using JSX because it’s less verbose than plain JavaScript and I think it is the main reason.

Compare these two code samples

It’s not really that easy to understand what’s going on in plain JavaScript example. There are a lot of redundancy which doesn’t really tell anything useful e.g. React.createElement, null. While the JSX example is clear about what’s happening here.

JSX seems to be a good choice, and it works well until you try to compose it with plain JavaScript. It simply doesn’t compose, because JavaScript has statements and JSX is based on expressions.

It’s possible to embed a simple condition using ternary operator.

But you can not go any further without hacks. This will not work.

This problem was realized. That’s why JavaScript is going to get do expressions, which will allow to treat blocks of code as expressions. Because of this incompatibility between JSX and JavaScript things like JSX Control Statements is popping out.

It might look like HTML templating, but it’s not. It is still JSX which compiles to plain JavaScript. The important part here is that now we have a unified way of doing things, which in turn provides a lot more flexibility. The irony is that JSX allowed us to escape verbosity of JavaScript, but in chase for flexibility it becomes even more verbose. There’s nothing less verbose in JavaScript than JavaScript itself. JSX can be simplified by using hyperscript or array literals instead of tags.

This doesn’t change the fact that we are doomed to keep adding more syntax into JSX as we need it. Either we stay with incompatible DSL and keep throwing more code around to deal with it, or choose a language with no such problems.