JSX Looks Like An Abomination

But it’s Good for You

Eric Elliott
May 20, 2015 · 7 min read

TL;DR

JSX is like a healthy vegetable that tastes like decadent chocolate cake. You feel guilty, but it’s good for you. (Tweet this).

What is JSX?

For those unfamiliar with React, JSX is an inline markup that looks like HTML and gets transformed to JavaScript. A JSX expression starts with an HTML-like open tag, and ends with the corresponding closing tag. JSX tags support the XML self close syntax so you can optionally leave the closing tag off.

JavaScript Expressions

You can embed JavaScript expressions in JSX using syntax that will be familiar to any handlebars user, e.g. `style = { displayStyle }` assigns the value of the JavaScript variable `displayStyle` to the element’s `style` attribute.

Styles

You can set styles by assigning an ordinary JavaScript object to the `style` attribute. You don’t use CSS syntax. Instead, you use the similar JS object literal format.

Events

There’s a set of event handlers that you hook up in a way that should look very familiar to anybody who knows HTML.

Inline JSX

The example above looks about the same as a handlebars template, but you usually see JSX expressions mixed with JavaScript:

JSX is Not an HTML Template Language

Though it looks like it, JSX isn’t a template in the sense that Handlebars and EJS are templates. It’s not a simple token replace and `.innerHTML= foo` dump like so many other tools.

JSX Event Handlers are NOT Like HTML `onClick`

Despite using the familiar attribute syntax, JSX doesn’t handle events like the same syntax in HTML would.

Designers Don’t Mind JSX

At first glance, I worried that designers would be scared off by JSX, but I’ve discussed this concern with lots of teams using JSX, and the design teams adjust quickly, and frequently find it easier than working with HTML templates and CSS, which brings up another point…

Inline Styles Are Good

I struggled with this at first. I was all-in on the idea of CSS, but in practice, CSS has failed in a lot of ways. First, it’s essentially a global playground, and CSS selections often overlap in undesirable ways and create awkward side-effects, which leads you to get more specific with the selector, which in turn makes your CSS selections more brittle, so they break when the DOM changes.

(The Right) Separation of Concerns

React is all about separation of concerns. That may sound surprising coming from a guy who wrote in detail about why business logic and data management should be separated from presentation — but if you’re using React correctly, the only concern you should be worried about is presentation.


If you’re putting business rules
in React components,
you’re doing it wrong.



Stateful components are an
anti-pattern in React.

Avoid `this.state`
and `setState()`.


Update: Anti-Pattern, Really?

Sometimes, but rarely, it can be useful for a component to maintain internal state. As Rich Hickey put it:

What are `props`?

They’re the data that get passed into the component as element attributes. Somewhere else in the app, React listens for state changes and the `render()` method gets called again passing the changed data into the `props`.


Learn JavaScript app development
with Node, ES6 & React.


JavaScript Scene

JavaScript, software leadership, software development, and related technologies.

Eric Elliott

Written by

Make some magic. #JavaScript

JavaScript Scene

JavaScript, software leadership, software development, and related technologies.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade