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.
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…
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).
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 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.
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.
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.
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.