By Andrew Allbright
React is a popular framework used by most large enterprise ventures and by small lone developers to create views with complicated relationships in a modular fashion. It provides just enough structure to allow for flexibility yet enough railing to avoid common pitfalls when creating applications for the Web. In the style of a top 10 list, I will describe reasons why you should choose this framework for your next project.
10. React.JS Performance
One of the reasons why React became so popular was due to its video game-inspired rendering system. The basics of its system is around minimizing DOM interactions by batching updates, using a virtual memory DOM to calculate differences, and immutable state.
One thing to note is that this approach was counter to other the trends of other JavaScript frameworks at the time. Angular 1, Ember, Knockout, and even jQuery were concerned with data binding to elements on the page. However, it turns out that dirty checking two-way data bindings produces exponentially more calculations as you add more elements into the mix than one way. Angular 2 has since abandoned dirty checking and two-way bindings for a more React-like approach.
9. React Is Easy to Adopt
The short list of lifecycle methods make this framework one of the easiest to understand. In fact, it wouldn’t be unheard of to become proficient with this entire library in under a day. This can be attributed to the “always rerender” nature of each view and how it accommodates state or property changes to its view.
To emphasize this point, look at what all you need to define a simple React component…
javascript
const App = React.createClass({
render: function () {
return (
<div>
This is a component!
</div>
);
}
});
ReactDOM.render(<App />,
document.findElementById('app'));
Your render function lends itself to terser, more immutable, functional programming that has become trendy in the JavaScript community with ES2015, ES2016.
8. JSX
It may seem obvious today, but when React.JS was initially introduced into the JavaScript world at the time the idea of tightly coupling your view definition with the logic that controls, it was controversial. React released into a paradigm where client-side copies of traditional MVC frameworks, like those found on the server-side, were very popular. MVC traditional separates the HTML from controllers whose responsibilities were to combine multiple views and marshal data into them. That literally means these “concerns” were separated into their own files.
The architects of React took another approach; they say the separation of HTML from JavaScript is superficial. Indeed, your HTML and JS application code were very tightly coupled, and keeping them in their own separation files was more a separation of technologies than separation of concerns. Imagine trying to change class names or id tags of HTML elements in a large jQuery application. You would have to verify that none of your DOM bindings were destroyed, suggesting a close relationship between the two.
That’s where JSX comes into the mix. By putting your component logic within the same file as the view it is operating on, it makes the module easier to reason about and the best part is you can leverage vanilla JavaScript to express your view.
javascript
const App = React.createClass({
render: function () {
const {collection} = this.props;
if (!collection) {
return null;
}
return (
<ul>
{collection.map((item, index) => {
return (<li key={index}> item.text </li>);
})}
</ul>
);
}
});
const collection = [
{text: 'JSX is nice'},
{text: 'Because it combines'},
{text: 'JavaScript with a view'},
];
ReactDOM.render(<App {...{collection}} />,
document.findElementById('app'));
7. No Opinion on Server-side Communication
React is a library that defines your view but gives you lifecycle “hooks” to make server-side requests. This is an advantage because it means once you understand how XHR requests are made, you can more easily update what library you use to make these than, say, BackBoneJS. These hooks are state, props, componentWillMount, and componentDidMount (if you want to wait until late in the game).
javascript
const App = React.createClass({
getInitialState: function () {
return {
collection: null
};
}
componentWillMount: function () {
$.get('server/collection')
.then((collection) => {
this.setState({collection});
});
},
render: function () {
const {collection} = this.state;
return (
<div>
<h3> A slightly heavier XHR example </h3>
<div>
{collection ? 'Has collection':
'Does not have collection'}
<SubComponent {...{collection}}
</div>
</div>
);
}
});
const SubComponent = React.createClass({
getDefaultProps: function () {
return {
collection: []
};
},
render: function () {
if (!collection.length > 0) {
return null;
}
return (
<ul>
{collection.map((item, index) => {
return (<li key={index}>
item.text </li>);
})}
</ul>
);
}
});
ReactDOM.render(<App />, document.findElementById('app'));
How you organize multiple different XHR interactions is largely up to you. Common patterns include the one I’ve just described, Flux or Redux.
6. React Is Free and Open Source Software
Although React is curated by the developers at Facebook, it is very much a community-driven library. Viewing the GitHub issue trackers and PR, you get a sense that the React.js developers deputizing themselves to maintain this framework find a joy in sharing code and getting into sometimes heated debate. This is an advantage for your project because you can ensure you will get code that has been vetted by passionate developers.
In fact, communities trends inspire the architects as much as Facebook inspire the community. Redux has all but taken over Flux as a collection of libraries to create larger scale applications and this was created by someone for a conference demo. Facebook haS since embraced it as one of the best options for developers to get started with.
This is not a unique attribute for most JavaScript frameworks, but React is one of the more popular libraries that is written in pure JavaScript. Plus, it’s always fun to see who has been recognized when Facebook puts up its release notes.
5. Very Large Companies Use React
Large companies like Facebook, Netflix, and Walmart have embraced React as their library of choice for handling view related tasks. This vote of confidence is no accident.
4. Built from the Beginning to be Isomorphic
React has a neat feature where it can detect whether or not it needs to initially render the DOM onto the page. That means if you precompiled the view in your server-side code before delivering to the client’s browser, React would be able to simply bootstrap its listeners and go from there.
React provides the means to generate HTML from its syntax easily. This was intentional to gain favor with SEO bots, which traditionally don’t run JavaScript in their crawlers (or at least mark those sites worse than pregenerated ones).
3. Size of the Library
Compared to other frameworks, React’s 43.2 KB is a good size for what you get. For comparision: Angular 2’s minified size is 125 KB, Ember is 113 KB, although Knockout 3.4.0 is 21.9 KB and jQuery 3.0 is 29.8 KB.
2. Cross Platform Support
React’s ecosystem is vast indeed. The way the framework has been moving is towards separating view logic from “purer” business rules. By default, you adopt this strategy. This allows you to target other platforms, such as mobile, Virtual Reality devices, TV experiences, or even to generate email.
1. React Provides Light Railing for Good Practice Applications
The reason you should choose React for your next project is due to its lifecycle methods, state, and props that provide just enough railing to create scalable applications but not enough to stifle liberal use of different libraries. Need XHR data? Use componentWillMount. Need to make a particular component look pretty using a well-known jQuery library? Well, use componentDidMount with componentShouldUpdate or componentDidUpdate to stop DOM manipulations or restyle the element after changes easily.
The point is there is just enough railing that correspond to natural component life cycles within the page to make a great deal of sense to developers of any experience level but not enough to where there is a “React” way of doing things. It is very versatile in that way.
Where Now?
Now that you’ve read this list, I hope I’ve inspired you to find a React boilerplate repo and get started on a new project. React is fun to work with and, as I’ve laid out, there are so many reasons why you should choose this framework over others.
