Why I love React

Become a Subscriber

React is like my new best friend. I’ve been programming for a little over a decade now, and after hating on the JS ecosystem for years, React has finally made me flip to praising the language more often than cursing it. Therefore, I’m going to share with you some of the past, present and future of web as I have seen it evolve and see if I can’t make you fall in love with React too!

In the beginning

In the early years of web, us front-end developers had it rough. Accessibility concerns, specs that nobody would implement properly, and a wars between proprietary and open source were constantly frustrating us. Writing javascript sucked back then too because we didn’t have transpilers or kickass frameworks like jQuery to manipulate the DOM with. Instead we constantly were prototyping and rolling our own little libraries and frameworks to hack websites together. Ensuring that a simple click event would work between mature, but infuriating browsers like IE6 while still trying to support rapidly evolving open source initiatives led to the idea that we should start creating solutions together. Enough ranting. It’s sufficient to say, things are much better now, and there is a new problem on the opposite end of the spectrum in that we now have too many solutions to these common problems.

If you could only pick one framework

You would probably go with jQuery. It’s the library that has dominated the front-end ecosystem. However, React would be your second (or maybe even your first) choice if you understood the past, present and future. Why? React is an extremely simple, minimal, library (not to be confused with a framework) that gives you utilities rather than assumptions. DOM manipulation and managing state have become the latest hurdles which React aims to overcome. On top of that, React gives you a lot of nice-to-haves that are useful across almost any type of application. This versatility is akin to jQuery and is thus the future of the web. Let me illustrate further…

React is extensible

Mixins, dynamic attributes, simple code base. These make React extremely easy to extend and abstract with vanilla javascript. Just google around and you will find examples of React playing nice with Angular, Backbone, Meteor, and many others. This reminds me of the early days of jQuery and how it was namespaced and architected as to not interfere with MooTools, Prototype and the like.

React teaches you on the fly

Have you seen the error messages in React? They are verbose, beautiful and informative. I have thrown a few of my peers and apprentices into a react project without giving them time to learn the library, and they all have been able to pick it up as they go. Many libraries and frameworks require you to follow some book, in-depth tutorial or documentation to start working with them in a production application. I have yet to encounter the same overhead with React.

React is unassuming

Mostly that is. One-way data binding and scope is so easily managed in React, and while it may be a little more verbose, anyone can read through the code and know exactly what is happening. This is how scope and data binding should be handled in my opinion, as “magic” is often not performant and can be very confining.

Portability is second to none

I have yet to see anything as portable as React components. Bower: check. NPM: check. Drag-and-drop: check. Once again, making a parallel to jQuery.. Show of hands for how many of you have used a jQuery plugin before… oh everyone. Okay then. React components and mixins are already the most abundant and useful extensions I have seen in a front-end library.

Shadow DOM is amazing

Sure, every framework will have it by the end of this year, but give credit where credit is due. React may not be the first to conceive the idea, but I’ll be damned if it is not the most impressive implementation in terms of performance and unobtrusiveness. That type of forward thinking and attention to both detail and broader implementations means that there are some seriously smart people behind the framework, and that makes it extremely future-proof and relevant.

Wrapping up

I will probably come back and add to this over time, but for now, I suggest you take a look at the post on AirPair comparing React to Angular. While I do not want to get in to the flame war of comparing tools, as I value many of them, I do stand by my points in this article and will remain a fanboy of React for quite some time.