The Top 5 Benefits of React that Make Life Better

How do you compare ReactJS with other frameworks? Why pick one over the other? In this article, I’ll present my top 5 reasons why you should choose React for your next project.

The JavaScript ecosystem is very dynamic. New tools and libraries pop up regularly, each one a little different from the rest, and the user has a wide selection to pick from. Frameworks are no exception.

React has already hit the point of being mainstream and is used by a number of large companies including, of course, Facebook, but also Netflix, AirBNB, DropBox, IMDb, PayPal, Tesla Motors, Walmart and many others. Pretty good company to keep! There is a robust ecosystem to support it with tools, support, and experienced developers. And, of course, there is its Facebook parentage.

How do you compare React with other frameworks? They are not interchangeable and each one has pros and cons depending on what you are trying to achieve. Why pick one over the other? In this article, I’ll present my top five reasons why you should choose React for your next project.

Want to know more about how it stacks up against “the competition”? For a more detailed comparison between Angular, React, and Vue, take a look at this webinar "How to Choose the Right JavaScript Framework for Your Next Enterprise App (Angular, Vue, React)." You can also read our writeup of that webinar right here.

1. Easy to Learn, Easy to Use

Being able to do awesome things is great, but only if you don’t have to spend the rest of your life becoming proficient in a new technology. React is easy to learn and easy to use and comes with a good supply of documentation, tutorials and training resources. Anyone who comes from a JavaScript background can understand and start using React in a few days. This makes all the great things it does even greater because you can actually use them in short order.

Granted, that comes partly because it’s a very focused solution. It’s the V in the MVC – the view part. It is generally referred to as “one of the JavaScript frameworks”, but many would argue that it is not a real framework but rather just an open-source UI library. Of course, not everyone needs a full-blown framework solution, and React provides a lot of value to the right audience. And even if you do, there are other ways to fill in the rest of the MVC model.

If you want more support, there are many training options including formal classes and informal tutorials. There are a large number of books, including several O’Reilly books, and over 250 books about React listed on Amazon. Finally, there are over 64,000 questions tagged with “reactjs” on Stackoverflow, so there is no shortage of answers, suggestions and examples available to help you with your project.

2. Reusable Components

Components are wonderful and React is based on them. You start with small things, which you use to build bigger things, which you use to build apps. Each component has its own logic and controls its own rendering, and can be reused wherever you need them. Code re-use helps make your apps easier to develop and easier to maintain. They also help you implement a consistent look and feel across the whole project. This may be a short description, but using components provides a large advantage in your development efforts.

3. The Virtual DOM

One of the really cool parts of React is the virtual DOM. Normally, when you develop an app that has a lot of user interaction and data updates, you have to carefully consider how your app structure is going to impact performance. Even with fast client platforms and JavaScript engines, extensive DOM manipulation can be a performance bottle-neck and even result in an annoying user experience. Worse, because the DOM is tree-structured, simple changes at the top level can cause huge ripples to the user interface.

React solves this by using a virtual DOM. This is, as the name implies, a virtual representation of the DOM. Any new view changes are first performed on the virtual DOM, which lives in memory and not on your screen. An efficient algorithm then determines the changes made to the virtual DOM to identify the changes that need to be made to the real DOM. It then determines the most effective way to make these changes and then applies only those changes to the real DOM. This guarantees a minimum update time to the real DOM, providing higher performance and a cleaner user experience all around.

The actual process is a bit more complicated than that and you can read more about how React identifies the changes made to the virtual DOM and creates the list of changes that need to be made to the actual DOM. For more information, read the page on Reconciliation on the React website.

4. Great Developer Tools

New technologies can be fun, but only if you can actually use them in a development environment. That means having tools to help you design and debug the new technology, and React is well covered in terms of design and debugging tools. React Developer Tools, available for Chrome and Firefox, is a browser extension for React. It allows you to inspect the React component hierarchies in the virtual DOM. You can select individual components and examine and edit their current properties and state. You can also track the hierarchy of any component and discover both parent and child components. You can find them on Github, in the Chrome store, or the Firefox add-ons page.

If you are using Redux, there is a similar set of developer tools for Redux that allows you to observe dispatched actions and current state stores, and watch changes on those stores. You can also dispatch actions or modify stores and see the changes reflect right away. Updates are kept within the tool and you can return to previous states, so time travel is even possible without the use of a TARDIS. 

Note that although Redux itself didn’t make my top five, it certainly deserves honorable mention.There’s an interesting episode on Redux on the Eat Sleep Code podcast, featuring front-end developer Margaret James.

5. It’s Easier to Write with JSX

Yes, yes, I know… yet another syntax (YAS). But JSX is really just a mix of HTML and JavaScript. You don’t have to use it to use React, but you will want to. JSX lets you add bits of HTML to your JavaScript. It’s the Reeses’ Peanut Butter Cup of the React ecosystem–combining two great flavors that taste great together. This lets you come up with much simpler and cleaner code, and while we have mixed the chocolate and the peanut butter together in a new way, they are still just two familiar flavors.

JSX produces React “elements” and has a number of side benefits, including helping prevent injection attacks. To be fair, there are raging debates on whether JSX is a good thing because it makes coding easier, or a bad thing because it may or may not violate separation of concerns.

6. The Ecosystem

Yes, I know, I said top five. This isn’t really about React itself but more about the whole ecosystem around it. As mentioned above, there is a lot of training content, numerous posts, and lots of people whom you can draw on for help with any project. On top of that, there are many third-party tools that play in the React environment. Naturally, one of the first ones you should look at is the Kendo UI component library for React. Kendo UI gives you instant access to a sophisticated library of components ranging from feature-rich data grids and charts to basic buttons. Integration into your app is easy both for the code itself and for the theme support. Kendo UI comes with a library of existing themes, and provides an easy-to-use theme editor so you can quickly match any existing theme that you are using. Kendo UI is just one example of the many tools available to help you build out your web app using React.

That’s my top five (six), and your mileage may vary. There are certainly many other nice features about using React. Which brings me back to my #1 item – it’s quick and easy to learn. Give it a try, see if you like it.