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.
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.
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.
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.
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.
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.
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.
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.
John Willoughby is a product marketing manager and a software developer based in the Boston area. He is passionate about helping to give other developers better tools which is why he loves working with Kendo UI.