React, JSX and ES6 as a template language

Bertrand Boustany
Feb 23, 2017 · 2 min read

The last few years have seen an important popularity increase of front-end rendering frameworks and what once was a cosmetic paint coating using handwritten HTML and CSS became an abstracted JavaScript process that renders HTML and CSS. The benefits of client-side HTML rendering are plenty but one down side is the rise of complexity for web integrators.

What used to be rendered on the server using a template language (here moustache)…

…became a very noisy JavaScript module…

The majority of the content of this file is keywords and software development notions (module, object, function, point dereference…).

Using ES6 syntactic sugars and react functional component we can greatly reduce this noise.

What happened here? Technically speaking, we export as default an arrow function that destructures its only argument (props) and returns some JSX. The result is a much more simple syntax closer to a template.

But does this scale?

The benefit of this notation is that we get a declarative block at the top of the file that lists the needed properties and a template block at the bottom that uses the properties.

At Korbit we have been using this component style for hyphen.to. This static website can be maintained by developers and non-developers alike.

Korbit Engineering

Trade digital assets.

Bertrand Boustany

Written by

Fintech Software Developer. Functional, reactive and universal JavaScript.

Korbit Engineering

Trade digital assets. Transfer money globally. Engineer the future.

More From Medium

Also tagged ES6

Top on Medium

Ed Yong
Mar 25 · 22 min read

27K

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