12 Popular Websites that use React in Production
Here’s a thing about React that will blow your mind: at present, it has about 1,377,867 customers and the numbers are still counting. (Source).
What this entails is that React has now become the most preferable frontend languages used worldwide. The reason for this is simple: it’s easy to learn, declarative, and reusable within the entire web app. Due to these reasons, it’s an excellent choice for creating single-page web apps, great-looking user interfaces (UI), and complex web interfaces.
Don’t take our word for it; these statistics are self-explainable:
- 17.4% of developers use React in their jobs. (Source)
- React.js was the most loved and wanted web framework in the previous year, as per Stack Overflow survey 2019.
- React is one of the most popular JS libraries on Github with 143k stars and 1,353 contributors by January 2020. (Source)
- React version 16 is used by 49.6% of all the websites that use React. (Source)
In the past, we covered performance issues in React and their solutions in detail, but today we are just scratching the surface and looking specifically at the websites that use React in production.
Websites that use Reactjs in Production
Table of Contents
Netflix is at the forefront of realizing the benefits of React. Its team uses technology to drive new levels of performance. According to Netflix Technology blog,
“React has exceeded our requirements and enabled us to build a tremendous foundation on which to innovate the Netflix experience.”
For building a new experience for TVs and game consoles, it was essential for Netflix to re-evaluate its existing UI technology stack and determine new solutions for creating single page web apps with the right building blocks. According to them, following are the main reasons to adopt React:
1) Startup Speed: Network latency was one of the biggest bottlenecks for Netflix as it affects their startup performance. The team at Netflix found it difficult to minimize the network requests and processing time needed to render the home screen with their existing tech stack. React gave them the liberty to come up with a hybrid solution that allows delivering above-the-fold startup markup on the first load through server-side rendering. This greatly improved startup speed, thereby contributing to performance.
2) Runtime Performance: Before using React, Netflix web app was facing quite a lot of performance issues, which almost made them rethink their existing tech stack. The team at Netflix realized that efficient UI rendering was critical for building visually-rich cinematic for websites and iOS platforms. The moment they introduced React to their tech stack turned out to be the cherry on the cake for them. Not only did it improved its user experience, but also the overall performance and scalability aspects of the web application.
In the words of Jordanna Kwok (Engineer Manager at Netflix),
A non-profit education organization, Khan Academy has already grabbed attention by providing a set of online tools that help educate students. The company’s main goal was to make deployment painless. Several parts of Khan Academy are working on React. The developer of Khan Academy, Joel Burget, shared in his blog about migrating from Backbone.js to React. Here’s what Joel thinks is the best advantage of React: the ability to optimize a component irrespective of creating an impact on other components. The team at Khan academy was able to work more closely with each other and optimize the performance of their web app. React also helped them avoid unnecessary re-rendering of the components.
What’s more, React allows their developers to write good tests and ensures future engineers to easily modify old code even when the original developers are not there.
In 2014, Asana started using React to address client-side performance problems. They wrote most of the app’s frontend features with React and Typescript. According to the company official blog, the main goal for Asana’s First Experience (FX) team was to reduce developer friction between the Luna technology framework and React. Likewise, they also wanted to improve the design experience of Product tours, a major part of which involved complex processing of algorithms. Here’s when the team came up with a counter-intuitive solution. They would run an experiment, and if the results looked promising, they would invest in long-term architecture.
This resulted in the development of a new React component called IPE bar that greatly improved the user experience. Therefore, by investing in React, Asana had been able to make some meaningful improvements in performance and user-experience.
As you might already know, Reactjs was created primarily by Facebook because they wanted to avoid the old-school way of building a web app with HTML5. When it all paid off, they made it opensource by building a community of developers around it (obviously so that others may get benefit from it). At the time of writing, Facebook’s codebase is comprised of more than 20,000 react components. But that doesn’t mean that the Facebook web is built whole with React. They currently use it in their Ads manager (React Native) and even in small parts of the website.
Airbnb, an online vacation rental marketplace, offers its users to list, discover, and book accommodations. They used Reactjs heavily on Airbnb’s website frontend because it:
- Allows them to move faster as an organization
- Maintains the quality of code
- Helps in writing code once instead of twice
- Improves the overall user-experience and developer satisfaction
In 2014, Reddit technically shipped its first React code on its product, i.e., RedditGifts. In the words of Brian Holt (a former senior program manager at Reddit):
Not only this, Reddit also made use of React in its mobile version of the website – m.reddit.com. It is also worth mentioning that the combination of tech stack (React and Redux) is also used to build the latest layout of Reddit’s website.
All in all, React has become the perfect choice for Reddit. Let’s check out what those reasons are:
- Reusability: It allows developers to re-utilize the components within the app.
- Maintainability: It facilitates the whole process of writing components and further maintenance.
- Big Ecosystem: It provides an ecosystem and ability to reuse even smaller components in a server-rendered page.
BBC wanted to implement something that allowed their audience to change the content according to their preferences and locations.
So they needed a flexible product that can handle high loads with a large number of variants of the page ― a different variant for every user’s preferred configuration.
All in all, React successfully helped, BBC to build its mobile-first home page with optimal user experience and great performance across all devices like desktop, mobile, and tablets.
An on-demand food delivery platform, UberEats, makes ordering food online from diverse local restaurants as easy as requesting a ride. The app allows its users to browse, order, and track their orders.
The team at UberEats used React for building a Restaurant dashboard that can be accessed through other devices such as smartphones and tablets. Since they believed that restaurants need a seamless way to communicate with both delivery-partners and eaters, they wanted to create something that fulfills different demands like:
- Placement of a new order
- Acceptance of an order
- The arrival of a delivery-partner
- Completion of an order
To implement seamless navigation throughout the dashboard, they used react-router, which turned out as the biggest key-player in improving the user experience of the web app. Besides using react-router for the web, they used NavigatorExperimental (a navigation library for React Native) for mobile that paid-off for the longest run.
React Security Vulnerabilities that you should never ignore!
PayPal is the most popular payment gateway used in applications. In 2015, the company started using React in its apps. PayPal’s initial aim was to use React for new features and start migrating portions of the existing functionality into pure React.
Here’s why they chose React over any other frontend library:
- Server-side rendering: They found React to be the best frontend library to preserve render state in the browser for fast page initialization.
- Navigational workflows: They wanted to use both react-router based UI workflows, and simple stand-alone react view UI workflows in kraken-js.
- Develop react-engine: They wanted to re-use react’s JSX as the default template engine in PayPal’s kraken-js stack.
- Implement Bookmarking: PayPal also wanted to map app’s visual state in the browser to URLs by using react-router to support bookmarking.
However, the choice of using react-router with react doesn’t turn out well for them, for there was a lot of boilerplate involved that increased the code-complexity. Hence, they created their own react engine to overcome the rendering issues with the router.
Likewise, react-engine also offered them pure isomorphic goodness. It is because maximum implementations were purely client-side driven earlier. So after using react-engine, PayPal is now able to get benefits like routing and isomorphic support with react-router.
So Twitter introduced a new browser-based UI, which was built on the top of React with Node.js and Express handling the server-side. The final app is built as a Progressive web app, which enables immediate page loading even on slower connections, offline capabilities, and push notifications.
Here’re some reasons why Twitter switched to React:
- Simple & Basic Architecture: The main reason for switching to React is the simplicity of its basic architecture that helped the team of developers to deliver exceptional service reliability and efficiency at scale.
- Real-time Updation: They also wanted to contribute to the web with a platform with lightweight apps that can be easily accessed on-demand, installed without friction, and incrementally updated. They successfully built Twitter Lite with improved performance and user experience.
- Improved Iteration Speed & User Experience: The reliance on React allowed Twitter to spend more time in improving their iteration speed and spend more time in enhancing user experience. Hence, overall improvement in performance was only possible due to React.
How To Build an eCommerce PWA using React
In 2012, Instacart (an on-demand grocery delivery service provider) created a single page web app with Backbone, jQuery, Underscore, and Haml. This tech stack worked exceptionally well for them, considering the speed and performance of the web app.
However, they soon realized that the tech-stack was not feasible considering the ever-growing features and complexities in the application. In Backbone, things can get nasty when there are dozens of views interacting with each other and rendering at once. The speed of the app also suffered heavily as they were not able to debug the app in a proper way. So Instacart migrated to React owning to its fast speed and iteration speed.
American-based online dating and social networking website, OkCupid features multiple-choice questions to match members. OkCupid’s desktop and mobile sites have multiple pages.
The team at OkCupid finds React as the best alternative for organizing files of large apps. It gives them a structure that can be even scaled with smaller teams irrespective of the project size.
Since the requirement was to upgrade the site feature-by-feature, OkCupid chose React for creating a multi-page app, reuse the code, and it also gives room to adapt if there is a sea change in libraries.
Choosing a framework from the start of a project is not that straightforward as it might seem. However, we will let you in on this little secret: it’s always great to take inspiration from organizations that have already excelled in it. In this article, we’ve put together a list of websites that use React in production. Now, you must have at least one more reason to choose React for your next web app development project.
Still in dilemma whether to pick React or not while building a web application? Drop us an email at firstname.lastname@example.org.