Living with JSX

The Pragma

Declare this per-file or per-function to tell your transpiler the name of a function that should be called at runtime for each node. In the example below, we say "inject a call to an h() function for each node": */ @jsx h /**.

Transpilation

If you’re not using a transpiler yet, you should be. Writing, debugging, testing, and running JavaScript is all more effective when using ES6/ES2015. Choosing a popular transpiler is highly recommended, so I’ll assume that’s what you're using. Along with converting your ES6/ES7+ syntax to today's JavaScript, Babel, for example, supports transpiling JSX right out of the box. You don’t need to add or change anything to use this feature. It’s easiest to see how this works by looking at a very simple example: before, / @jsx h / let foo = <div id="foo">Hello!</div>* and after, var foo = h(’div’,{id:’’foo”}, ‘Hello!’). You might be looking at that second code snippet, thinking it wouldn’t be so bad just to build UI using functions. This is why I started to get on board with JSX: if it disappeared off the earth, writing the output by hand would still be pretty comfortable.

Let’s build a JSX renderer

We need to define the h() function that our transpiled code is calling. You can name this function whatever you want; I’m using h() because the original idea for this type of "builder function" was called hyperscript (hypertext + javascript).

Using JSX

We know that JSX is transformed into h() function calls, which create a simple “Virtual DOM tree.” We can use the render() function to make a matching “real” DOM tree, and it looks like this:

Partials, Iteration & Login: no new syntax

Instead of the limited concepts introduced by template languages, we have all of JavaScript. “Partials” are a concept introduced by logicless/limited-topic template engines to reuse chunks of a view across differing contexts.

Iteration is something each new template language seems to re-invent. With JSX, there is no one-off syntax to learn: iterate how you would anywhere else in your JavaScript program. You pick the iteration style that best suits a given task: [].forEach(),[].map() , for and while loops, etc.

Logic, like iteration, is something template languages love to re-invent. On one hand, logicless templates provide. a very poor means of embedding logic into a view: limited constructs like {{#if value}} push logic into a controller layer, encouraging bloat. This circumvents building a language for describing more complex, avoiding predictability & security pitfalls.

On the opposite end of the spectrum, engines that use code generation -a technique that ranges from gross to unforgivable- often boast the ability to execute arbitrary javascript expressions for logic or even iteration. Here is a good enough reason to avoid this at all costs: your code is being ripped out of its original location (perhaps a module, a closure, or within markup) and evaluated “somewhere else”. That’s not predictable or secure enough for me.

Putting all Together