You most likely use React apps every day, while watching your favorite TV shows, browsing through social media, and checking your email. Let's find out which famous companies built their apps with ReactJS and why.
Here are examples of internet giants using React apps and why they choose this framework:
Let’s face it – the digital world is changing as we speak. In such a reality, it is definitely hard to adapt to trends. However, that is precisely what the big names in the industry are doing.
Major apps like Facebook, Instagram, Netflix, and others are constantly improving their experience and adapting to new frameworks and trends. As of recently, there is a big word of mouth going around ReactJS and its impressive features. Why do internet giants use React?
In case you still haven’t heard about the potential of ReactJS, they are numerous. Basically, React has become very popular among developers and there are lots of resources that make most of its technical merits – just like NodeJS and numerous other related JavaScript frameworks/tools.
The proof of its popularity is best described by the apps that are using ReactJS – and today, we are showing you the list of the most impressive React apps.
To cut a long story short, React is a JavaScript library for building User Interfaces. It is widely used for creating dynamic and interactive web applications. Its primary focus is on efficiently updating and rendering components in response to changes in data, leading to a more seamless and responsive user experience. React JS is used in web development to create web apps while React Native is dedicated to applications that run on iOS and Android devices.
Very often it’s misinterpreted as a tool, framework, or language. Vendors working with React are able to create large web applications which use data that can change over time, without reloading the page. Its main goal is to be fast, simple, and scalable. React processes only user interface in applications.
It is simply a JavaScript runtime. A lightweight, fast, and modern way to execute code on your computer.
React promotes a component-based architecture, where the user interface is broken down into reusable parts. Each react component encapsulates a specific piece of functionality or UI element. This modular approach allows developers to create a library of React components, leading to consistent design patterns and visual elements throughout the React application. It also facilitates code reuse and easier maintenance.
With React's component-based approach, UI components can be reused across different parts of the application. This reusability not only saves web development time but also ensures a consistent look and feel across various sections of the app. Developers can use complex UI structures to create React app by combining and nesting simpler reusable components, leading to a more organized and efficient design process.
React employs virtual DOM elements, an in-memory representation of the actual DOM. When data changes occur, React calculates the difference between the current virtual DOM and the new one. This approach minimizes direct manipulation of the actual DOM, resulting in fewer reflows and repaints, and ultimately improving rendering performance. Users experience smoother interactions and faster UI updates, which contributes to a better user experience.
React's declarative syntax allows developers to describe the desired UI state and how it should change over time. This approach is more intuitive and easier to reason about than imperative UI manipulation. Developers can focus on what the UI should look like in different states rather than dealing with the intricate details of how to achieve those states. This leads to cleaner and more maintainable code, reducing the chance of introducing errors in the UI.
React js encourages the use of a single source of truth for managing the application state. By effectively managing the state, developers can ensure that the user interface accurately reflects the underlying data. This prevents inconsistencies and ensures that users always see the most up-to-date information, contributing to a seamless and reliable user experience.
React comes with powerful developer tools that assist in inspecting component hierarchies, tracking state changes, and debugging UI-related issues. These tools enable developers to identify and resolve problems quickly, leading to a more polished and bug-free user experience.
The library provides performance optimization techniques, such as lazy loading, code splitting, and memoization, which help optimize the development process and maintain the highest performance as the React app grows. This ensures that users interact with a responsive and fluid user interface, even when dealing with resource-intensive tasks or complex data visualization.
React's component-based approach can be extended to building cross-platform applications, including web and mobile (using React Native). This consistency in design and behavior across different platforms enhances the user experience by making the app feel familiar and intuitive, regardless of the device being used.
Although partially, Facebook is making use of React js. Their webpage is built with React, as the script that is blended in the application code. The mobile app is also built with a version of React called React Native which is similar, although responsible for displaying the iOS and Android native components instead of the DOM elements.
Interestingly, Facebook was the place where the ReactJS library was initially created, which is why it is obvious for the app to use it. Facebook currently opened a beta of its completely rewritten ReactJS, called React Fiber.
The use of ReactJS within Instagram is enormous. Proof of that is the numerous features including the geolocations, Google Maps APIs, search engine accuracy as well as tags that pop out without hashtags. It is all there in the API of this React app – and is really impressive.
Instagram is completely based on the ReactJS library and has let fans fully adapt to its amazing features.
The React version works with Netflix too – specifically on their platform called Gibbon which is used for low-performance TV devices instead of the DOM used in web browsers. Netflix has even published an official blog post explaining how the ReactJS library helps its startup speed, runtime performance, modularity, and various other advantages.
As the UI engineers at Netflix state in the blog post:
Our decision to adopt React was influenced by a number of factors, most notably: 1) startup speed, 2) runtime performance, and 3) modularity.
A couple of months ago, the New York Times designed a great new project that simulates the different looks of stars on Oscar's red carpet. Obviously, this project’s interface was built in React and lets users filter the gallery of different photos from 19 years in a nice way. The re-rendering on this React project is only one of the impressive features we can thank React library.
Justin Heideman backs these reasons up in his blog post on NYTimes Open, stating that:
Within our app we create lightweight, single responsibility Stores. A Store is responsible for managing a particular data request.
Surprisingly (or not), Yahoo!’s mail client is also a React app. Since Facebook owns Yahoo! nowadays, the idea of a solid and unified architecture is there, and that is why React was incorporated in as many bits and pieces as possible. The architecture that is specifically built with React as a piece of it can be seen here – and the Yahoo! developers are summing it up as easier to work with the code and a lot better.
The engineers working on the Yahoo Mail platform needed a lot of upgrades. As they say in a blog post on Tumblr:
For the next generation Yahoo Mail platform, we wanted:
In the end we decided to go with React JS and Flux because of the following reasons:
A lot of parts of Khan Academy are based on React currently. One of their JavaScript developers, Joel Burget, shared his personal experience with the ReactJS library and how it differentiates from the traditional Backbone script they were previously using.
He obviously defines it as a worthy upgrade and carefully goes through most of the important features – including the element changing in an efficient way and the elimination of unnecessary re-renders.
Although there were several betas before it was officially launched, WhatsApp uses ReactJS for building user interfaces from Facebook, just like it uses Underscore.js and Velocity.js as some of its most efficient engines.
As of recently, the all-new WhatsApp Web app has also been using React, just like the Facebook web experience mentioned above
One of the technologies behind the popular Vivaldi Browser is the ReactJS library. The engine that this browser is using is named ‘Blink’ and is pretty much the same as Google’s Chrome, built on HTML5, ReactJS, JS, CSS3, and many other engines.
As of August 2014, Codecademy has decided to fully incorporate Facebook’s library. ReactJS was obviously a part of it – and is still one of the critical scripts that are based on the app.
From the header to the menu and even the navigation, the ReactJS use is all there on Codeacademy, created as a logical solution that packs all the components for the various pieces.
According to everyone at Codeacademy, some of the aspects of React that they appreciate include the fact that the script is battle-tested, easy to think about, makes SEO easy, and is compatible with legacy code and flexible enough for the future.
Also, it provokes building a community and lets you stop worrying about boilerplate.
As they say in their blog post on InfoQ:
React is a lightweight, powerful, battle-tested library for building user interfaces with JavaScript. It’s not a full framework, but rather a powerful tool that may well change the way you approach front-end development. We’ve found it to be an incredibly useful tool for our frontend development, and we’re very happy with our choice.
Dropbox switched to ReactJS over a year ago, just at the time when using React became very popular amongst app developers.
The plethora of resources that are part of this framework is efficiently utilized by Dropbox as well – widely contributing to the success of this amazing cloud-based storage service and online backup solution.
In the end, the reduced risk, the improved efficiency and effectiveness ReactJS developers report, and numerous organizational benefits have all been reasons for the big names in apps to upgrade to ReactJS and exploit the amazing benefits offered by this script.
And even though every framework upgrade takes its toll regarding time and costs, it is absolutely worth it when it comes to creating the perfect user experience – be it on a mobile or web application.
The Brainhub promise
Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by demystifying the technology decision-making process based on practical software engineering experience.
Authors
Read next
Top reads this month
Get smarter in engineering and leadership in less than 60 seconds.
Join 300+ founders and engineering leaders, and get a weekly newsletter that takes our CEO 5-6 hours to prepare.
Previous post
No previous chapters
