CoffeeScript was the first language I wrote React in. CoffeeScript is a compile-to-JavaScript language that preceded Babel and heavily informed the syntactic additions in ES6/ES2015 and everything after.

Philosophically, it didn’t jive with JSX. And in 2014, I suggested that my team skip JSX if we wanted to keep using CoffeeScript.

So, I’ve written a lot of JSX-less React. And it taught me a lot about the framework.

Let’s de-JSX a typical element creation:

With JSX: <MyComponent />

Without JSX: React.createElement(MyComponent)

Without a dedicated function declaration:

React.createElement(function MyComponent() {
    return React.createElement("div", null, "Hello, My Component")
})

JSX is not HTML

The last code block is SO much harder to read but it’s informative. It’s a mental step I frequently take when trying to solve problems in React.

It’s helps me understand where JSX is not HTML — a topic we’ll cover in the days to come.

Take it home

Take a minute to explore where removing JSX might be an improvement. Are there patterns you use today today that feel odd in JSX? Do they make more sense with JSX removed?

If you want to see something real odd, take the last example (above) and change it to an inline class component.