Suddenly, everybody seems to be talking about React. In Stack Overflow’s latest annual developer survey—the largest such survey on earth—React didn’t just win the “trending tech” section, it wasn’t even close. React was up 311%, double the year-on-year growth of its nearest competitor.

React1(http://stackoverflow.com/research/developer-survey-2016#technology-trending-tech-on-stack-overflow)

So, what is React, and why are people so excited about it?

React is a JavaScript Single Page Application framework, like Angular and Ember and Meteor and Durandal... and so many others that I don’t have the space for them all here. These days, it seems you can hardly turn around without someone releasing another SPA framework. So why, with so many SPAs out there, would you want to use React?

Facebook created React. Why do they use it? According to the React website, they created it “to solve one problem: building large applications with data that changes over time.”

That’s interesting, it tells us that React is designed to handle large sites. And the fact that it’s being used by some of the biggest names out there, like Instagram and Uber and Expedia, tells us it can play in the big leagues. But it still doesn’t tell us why we should choose it over all the other frameworks. So what is it that has the community so excited about React?

For me, the heart of React—the reason why I find it a joy to write, and one of the most productive frameworks I’ve ever used—is a very simple idea: unidirectional data flow. React components don’t update the DOM. All they do is render their output based on the current state of the data. That’s it. As a React programmer, you don’t update the DOM at all. Ever. There’s no complex logic responding to data changes and modifying the DOM. You just render the output based on the current data.

And that’s wonderful. It’s like the early days of the web, when you never had to worry about anything complex happening on the client, because every change meant a full request-response cycle, and a new page being sent back to the client. Life was so much simpler then. Well now that simplicity is back but without the server round-trip.

Of course, the complexity is all still there underneath, otherwise you couldn’t do all of the cool stuff that makes your SPA modern and functional. But the beauty of React is that the complexity is managed for you by the engine itself. Your component re-renders a virtual DOM any time anything changes. React uses a diffing algorithm and executes the minimum necessary DOM updates to bring the two back in sync. And those updates are fast, very fast.

React2(https://auth0.com/blog/2016/01/07/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/)

The fundamental simplicity of React leaves you with pure JavaScript components that fulfill the Single Responsibility principle and are clean, testable, and devoid of dependencies on the current state of the DOM (and the fragility that comes with that). All they do is render their output based on the current state of the data, and raise events based on user actions. And they’re not even limited to rendering HTML. React Native uses the same principles to build native Android and iOS apps. Nor are they limited to JavaScript-aware clients. Isomorphic React allows your components to render on the server-side as readily as on the client.

React is flexible, fast, and a joy to develop. So how do you go about writing a React component? Well, that’s a story for another day.

2 comments

Leave a Reply

Your email address will not be published.