HOME
ABOUT
PROJECTS
BLOG
CONTACT

TWIL: ES* Shorthands for React Bliss

In learning React, I've found that it does a lot of things beautifully. With that said, it also does some things not-so-beautifully (mostly due to JavaScript idiosyncrasies more than anything else).

Binding Insanity

Exhibit one:


*Okay, I know inline binding is bad for performance. This is just an example.

I know it's just 10 more characters, but having to put .bind(this in front of every function signature is annoying at best and downright maddening at worst. Fortunately, ES7 has a solution to this:

See? That was easy!

Object.extend all the things

React (and Flux in particular) has this philosophy where data should be immutable for the sake of keeping your application state clear. Historically, shallow copies of your state have been accomplished through Object.extend

Fortunately, one again, there's a far more elegant implementation from ES7 (The Spread Operator):

I know, you're mind has been blown. Now if only there was a similar shorthand for deep copies..

Anyhow, these two shorthands have kept me from going insane while learning and developing apps in React. I'll keep this post updated with any new discoveries I might find.