A wizard builds an iron door for a king’s castle. The wizard likes it so much, he uses his magic to duplicate the door inside the castles of three surrounding kingdoms. When the wizard decides to paint the first iron door blue, the doors of the three other castles also turn blue.
In an enterprise organization, this wizard is a developer, the castles are web pages and the iron door is a React component.
React is a JavaScript library used for building user interfaces (UI) for web and mobile apps. It was first developed by Facebook in 2011. React’s magic lies in the ability to create individual UI components.
While there’s a lot of competition out there from JavaScript frameworks like Angular and Vue, organizations such as Facebook, Twitter and Microsoft have chosen React for its ability to make app development more efficient.
1. Fast Performance
Time saved is money saved. One of the main purposes of React is to be fast. React lets developers create large web applications that can change data without reloading the entire page.
The rendering of React components takes place on the virtual Document Object Model (DOM). Since the virtual DOM is being used instead of the slower real DOM, and React re-renders only the portions of the DOM that need to be updated, load time for the app is much faster. The app does not need to access more data than necessary.
Other programming languages require re-rendering everything, slowing the application down. But React only re-renders the parts that need it. Instead of rebuilding the entire castle every time the door needs to be updated, only the door will be rebuilt.
Since React breaks down complex UI into smaller components without affecting the rest of the application, developers can easily add specific updates to the app.
2. Reusable Components
Just as a wizard can simultaneously propagate changes to multiple castle doors in one go, a developer can code one navigation bar, use it in multiple pages, and only have to change a single file for those changes to propagate to all the other pages.
A React Hook is the wizard’s magic wand. It’s a way to reuse logic across multiple pages.
One of the main goals of enterprise organizations is to complete projects on time. React hooks’ ability to reuse logic within components makes it faster for developers to build and maintain applications while achieving a consistent look and feel across the entire project.
Some commonly re-used components are:
-
navigation bars
-
tooltips
-
button groups
-
data tables
-
charts
This ability to extract logic from a component so it can be reused makes sharing Hooks between many components easy.
Modification propagation also makes maintenance of code less stressful. If a bug is found, instead of having to go into each page and change the code, the bug fix can be done once and it will be fixed wherever the logic was used.
Not having to build out the same thing over and over again not only saves an organization time, but money as well.
3. Native Apps
React Native is another time and money saver. It lets developers make iOS and Android apps.
Before React Native, an organization would need to build the same app twice if they wanted it to be in both the Apple App Store and the Google Play Store. Developers would have to code in Swift or Objective-C for the iOS version and program in Java or Kotlin for the Android one.
With React Native, developers are now able to build a cross-platform app that can run on both the Apple and Android operating systems.
Just as the wizard was able to build the iron doors in different kingdoms, React developers are able to build apps on different platforms.
Software agency Netguru “built the very same app with both React Native and Swift. The latter took as much as 33% more time to build and still was working only on iOS – with no Android version.”
By not having to build an app twice, organizations can have a leg up on finishing projects on time.
And by not needing two different teams—one for iOS and another for Android—organizations can save money on personnel.
According to a VDC survey of enterprise app developers, it takes over 6 months to develop a mobile app, with the cost of each averaging $140,000.
Creative agency Savvy further explains that apps built by global consulting firms “start at $10,000,000 and go up from there,” while apps developed by agencies such as Savvy “cost between $100,000 to $2,500,000” and applications built my smaller shops can “cost anywhere between $30,000 to $100,000.”
With mobile apps costing organizations so much money, it’s essential to find ways to cut costs.
Photo by "My Life Through A Lens" on Unsplash
4. Strong Community Support
As React’s popularity grows, so does the community supporting it. And since it is open source, the library is maintained not only by Facebook, but by thousands of independent React developers worldwide.
Facebook released React Native in 2015, and as of 2020, it has over 9,000 contributors to its GitHub repository. It’s supported by contributions from individuals and even large corporations like Microsoft.
This massive community is keeping React up to date and creating a vast set of reusable components for developers to use. According to a HackerRank survey of 116,648 developers, React is the library most developers want to learn, with 32% of participants saying it’s the library they’re learning next.
It’s so popular that over 469,000 websites are now built using React.
In an interview with tech recruitment agency Built In, Twitter’s Web Team Senior Software Engineer Katie Sievert said that they use React for Twitter’s web app because of “the growing community adoption and internal Facebook usage, which was a positive indication of ongoing support and longevity; ample, easy-to-follow documentation and examples, which is an often overlooked factor in driving adoption.”
Technology changes quickly and becomes obsolete even quicker. With such a large community behind it, React is poised to grow instead of disappear.
Enterprise organizations that use React can benefit from the components, documents and support system provided by the community.
Challenges with React
While a robust community is essential for React’s evolution, the pace at which updates happen can be stressful to developers trying to keep up.
After being released to the public in 2013, React has gone through 40 versions. Each version, while an improvement upon the last, requires developers to study the upgrades and new features. And some changes are major.
2017 saw the introduction of React Fiber, a new core algorithm for building user interfaces. And in 2019, React Hooks were introduced.
This continuous cycle of learning and adopting new changes can feel frenetic.
But if an organization is able to embrace the constant flow of updates, developers can leverage React to build beautiful software.
React at Codazen
Codazen’s development team utilizes React for our projects.
Matin Kajabadi, one of our full-stack engineers, has worked with many other JavaScript frameworks such as Angular, Knockout and Aurora. He says that he prefers React because it cuts down on development time. Matin emphasizes that React’s components are what sets it apart:
In React we can create isolated and at the same time reusable components that can be used somewhere else in the project. It is really important to be able to re-use components as it reduces the development time and any future updates on components can be done in one place in one component rather than so many places that does the same thing. In addition, it is useful because you can use the same component you built for one project and use it for other similar projects that has the same functionalities.
Another of our full-stack engineers, Qi Huang, advises that even though React Hooks allow the team to reuse components and logic, the “whole team should agree upon a decision whether they want to adopt Hooks or not” since they’re optional.
At Codazen, we believe in beautiful software. And if that software can decrease development time and costs, load quickly and is supported by a network of people, then that software is gorgeous.
