The best React websites and how they meet the needs of millions of users
Now it's time to take a look at real web products built with the React library. You might even use some of them every day!
So, which React website names sound familiar to you?
Let's start, of course, with the Facebook website. It's a pioneer that showcased all the advantages of React before hardly anyone had even heard of the framework. Now, the website built with React looks completely different from its original version. We love the redesign and the awesome new features! But more importantly, we noticed that the page loads faster.
To improve Facebook.com, the team used a combination of the React library and Relay—a GraphQL client for React. The engineers implemented the principle of “as little as possible, as early as possible.”
The page-loading process has three stages:
- When you refresh the Facebook page, the key elements, or skeleton, of the webpage load immediately.
- After that, the webpage content appears, and we get updated information (for example, the news feed or a list of online contacts).
- At the 3 stage, users can interact with the webpage, click the “Like” and “Share” buttons, write messages, and so on, and get an immediate response from the website.
Uber
Unicorns are fans of React! Just take a look at Uber's website: with total traffic of 50 million people and a top ranking in ground transportation, this website has to deliver an incredibly high-quality user experience. React plays an important role here.
The Uber engineering team has used React's features since the website was first created. The team has built numerous open-source libraries with it (you can use them in your project!). The most impressive are the tools for visualizing maps.
In addition, Team Uber created Base Web—a design system that provides reusable components for user interface development. It's built on React and lets you create device-independent user interfaces. The team says reliability, accessibility, and customization are its core features, and encourages using the system for any web project.
Netflix
Now the video streaming company Netflix is an industry leader, with revenue of more than 20 billion dollars in 2019. The company makes a titanic effort to provide customers with the level of service and quality they expect. But how did it all begin?
In 2015, the team used the React library to redesign the user interface.
Startups like Uber and Netflix used React to develop a high-quality user interface and… reached unprecedented heights. Since 2015, the Netflix website has undergone numerous changes and updates, but React remains the main tool for frontend development. High-performance TV user interfaces attract users and win their hearts. A simple, user-focused interface makes authorization and login easy, while intuitive web design and convenient filtering help visitors find what they need. These and many other React-powered features have helped Netflix take the video streaming niche by storm.
Airbnb
This world-famous vacation rental platform also uses React on the frontend. Have you ever noticed how quickly and smoothly webpage elements load on the screen? Divided into several blocks, the content updates seamlessly, without delays or errors.
Leland Richardson, one of Airbnb's engineers, describes React's benefits in two simple phrases:
“Reusability/portability: React components are extremely reusable.
Refactorability: React makes your code very easy to refactor and iterate on.”
It's been a long time since Airbnb started using React. But it was the right choice: the platform is growing and expanding, and React keeps getting better at the same time. Every new version provides handy features for updating and maintaining a large P2P marketplace like Airbnb.
Meanwhile, Airbnb engineers contribute to the React ecosystem. For example, they introduced the useful React Sketch.app library for the needs of developers and designers.
Outlook.com
And here's another market leader that used React's potential for its software web product. In 2017, Microsoft introduced Microsoft Outlook, a personal information management tool. It includes email, calendar, contacts, and task components. The product is available in web and mobile versions. Here, we're focusing on the website.
In its blog, Microsoft tells us about “...the introduction of a more flexible web development environment that provides an updated search feature, a fresher look with a modern communication style, and a new design that lets you browse, read, and attach files and photos faster.”
Guess which framework they're talking about? Yes, it's React.
Dropbox
Dropbox, the file-hosting service, tells us a different story. Their story is about a successful but challenging transition from CoffeeScript to a winning combination of Typescript and React.
Back in 2012, the solution was buggy. Numerous software engineers contributed to the codebase. However, only a few of them knew what was going on inside the website. The team chose Typescript and later, in 2016, started a redesign with the React library. The website built with React and Typescript showed excellent performance.
Have you ever noticed how quickly you can access a preview of any document in Dropbox? Gathering the file's data, React analyzes the number and size of pages, builds a skeleton, and renders a preview as the user scrolls down. The Dropbox team used a combination of React JS, other JS tools, and several optimization techniques to create “a smooth experience across all supported browsers.”
Codecademy
The platform, which provides coding classes and serves the needs of more than 25 million users, uses React for its user interface. The website features attractive graphics, smooth transitions between pages, and content that plays an important role in the lives of millions of people.
The website is user-focused and performs well. But what else does Codecademy get from React as one of the leading development tools?
The team shares its positive experience of creating animations with React. Earlier, we mentioned that React libraries are useful for designers. Now we'll point out that React can bring beautiful animations to your websites with minimal coding. The React framework can help you with both a seamless UX and an attractive user interface.
Skyscanner
This is the next product on our list of the best React websites.
Skyscanner will be your lifesaver if you're planning a trip on a tight budget.
Skyscanner is a powerful web engine full of up-to-date information about cheap flights around the world. Expensive flights are here too—just go take a look.
To properly meet users' needs and earn a reputation in the travel industry, Skyscanner needed to use an appropriate technology stack. The React framework is on the list.
In 2019, the Skyscanner website underwent a major redesign. The engineering team created Backpack—a whole design system. It's based on React components. Backpack's main goal is to create a consistent, flawless experience for all users. No matter what platform people use to visit Skyscanner, the UI/UX design and brand look are flawless.
Trello
For nearly ten years, the web-based task management system ran on the Backbone JS and Coffeescript platform. In 2009, that was a relatively powerful technology stack. But time flies, and so do JS tools. So the team decided to move to a more dynamic stack.
The development team faced two important challenges.
The architecture built on Backbone JS was difficult to maintain and limited Trello's capabilities;
The caching procedure was unclear and difficult to understand.
React and Typescript were chosen as the primary tools for solving the rebellion problems. Later, GraphQL joined the squad. As a result, we can enjoy Trello's easy-to-use website, its well-designed components, and its fantastic responsiveness.
React-based apps, or what else can you build with React?
As you may have already noticed, above we've used words like “cross-platform” and “device-independent.” These adjectives capture the essence of React: the tool can turn any startup idea into a viable software product for any device, any platform. You can use it both to develop websites and to build web applications:
Single-page applications (SPA)
A single-page application is a website consisting of just one page that doesn't fully reload as the user interacts with it. Only individual elements or states change. Facebook, the social network we've focused on so much in this article, is a single-page application built with React.
Progressive web applications (PWAs)
A progressive web application, or PWA, is a website that looks and works just like a native mobile app. Without installing anything, users can simply access the website and enjoy a native experience.
Twitter Lite is one of the largest and most successful PWAs written in React. Twitter's engineers had a sensible goal: build a high-performance product that works well even with a weak connection. They accomplished the mission, and React helped them a lot.
If you're planning to go mobile in the future, React will come in handy. Thanks to its reusable codebase, it can significantly reduce development time. Build a React website now, and reuse some of the code when you create a cross-platform mobile app in React Native. That way, you can save time, effort, and money.
Consider combining the React UI framework with Node.js on the backend. MERN, a combination of MongoDB, Express.js, ReactJS, and Node.js, could be an ideal choice for a project of any complexity. Many brands have used this technology stack in their web products.
The best React websites: a push to move forward
When choosing the best tool for website development, the React framework may come to mind. The framework created by Facebook engineers has proven itself and won the attention of major brands and young startups.
React is a great choice for products such as:
- Social networking websites like Facebook;
- Location-based applications like Uber and its products;
- P2P platforms like Airbnb;
- Video streaming products like Netflix;
- Task management systems like Trello;
- File-sharing systems like Dropbox;
- Personal information management websites like Outlook.com;
- Online education platforms like Codecademy;
- Web engines that retrieve information from other online channels, like Skyscanner, and so on.
Numerous well-known brands are moving their web frontends to React; plenty of ambitious startups use it as a runway for a successful takeoff. All these examples prove React's power and inspire us to try it in our next project.
Build your app from scratch or rewrite an existing solution—React will come in handy either way. Do as the leaders do, and become a leader.
