React JS can easily be called the most popular JavaScript library for working with the user interface. Launched in 2013, the tool quickly became in demand in UI developer circles. It is now in serious competition with Angular and Bootstrap, the best-selling JavaScript libraries of its time. Lots of big websites are built with React, including but not limited to Netflix, Facebook, Yahoo, and BBC. We will describe 15 interesting examples of the tool’s use, but first, we will recall its main features.
Table of Contents
React JS: Main Points
React was born in May 2013 as an open-source JavaScript GUI library. The tool was created specifically to perform tasks within UI design. It falls under the “V” (View) category in the architectural pattern, connected with getting data and displaying it. The main tool features are components and states.
In simple words, a component is a piece of code that is responsible for the element’s appearance, and the state is element information. React allows you to write a component once and then pass different states to it. Components are created in JSX (looks like a mixture of JavaScript and HTML). You can conveniently present JavaScript and HTML code, providing clarity and repeatability. Next, the code is translated into browser-understandable JavaScript through a transpiler program. Thanks to these mechanics, the tool has 3 powerful advantages.
There are other reasons for choosing a tool: an improved version of the DOM (updating objects that require changes, not the entire structure); server-side rendering, which improves site ranking efficiency; extensive ecosystem and community support.
The tool also has competitors, for example, Vue.js and Angular, which are also designed for writing UI. According to Statista 2021, React.js leads the top 18 web frameworks in active use, even ahead of massively used jQuery. In the third position is Express, and in the fourth and fifth are the competitors mentioned earlier.
React.js Native was created by Facebook for those who write not only browser websites but also OS apps. This is a native library version focusing on modern mobile and desktop products. Syntax of React Native is similar to JSX but translated into a language understandable by the different OS. One of the platform features is the availability of other languages.
React JS features are irreplaceable for building fast and scalable web apps. We have prepared a list of the best React websites known worldwide.
You Might Also Like:
- 15 Famous Sites Built with Django That You Probably Know
- Monolitic vs Microservices Architecture: Pros and Cons
- React.JS and React Native: Explore the Best Alternatives in 2022
- Angular vs React: Which Would Be a Better Solution in 2022?
- Legal Requirements for Storing Data: Key Insights for Storing User Data
15 Websites Made with React
This is the first website made with React. The company demonstrated the benefits of its framework on a personal example when it had not yet been published. The site looks different now, but the design, functionality, and interactive features are still on top. It is worth noting the high speed of displaying elements without restarting. To improve the site, the team used React and Relay embodied in GraphQL. Of course, the tech stack is much broader and more complex, e.g., it includes PHP and Python.
Netflix
Streaming service associated with React: website is the best UI example, thought out to the last detail. It all started with a UI redesign in 2015. According to the team, choosing the tool was speed, modularity, and performance. Since then, a lot has changed, but the company remains true to React on the front-end. The results are noticeable, from easy AI-powered search to compatibility with different media devices.
Yahoo Mail
In 2017, the mail service decided to create a new interface for PCs. They chose a powerful tech stack, the best in its class. It includes open source technologies, including React. According to the Chief Technology Officer, the team used state-of-the-art solutions in the industry to provide a quality user experience. It was possible to increase productivity and reliability, as well as optimize the flexibility, speed, and availability of the service.
BBC
This is another well-known React JS examples framework. Millions of viewers follow the media company news, which motivates the development. Previously, the frontend (and part of the backend services) were created mainly based on PHP, and later the company initiated a cloud transition. Around 2020, the pages were moved to the Simorgh built with React. It is isomorphic; it works on the server and client-side. The company has taken advantage of many cloud benefits, including the flexibility to deliver services.
Outlook
This solution was introduced to the audience in 2017 by Microsoft. It performs the tasks of personal email, calendar, planner, notepad, and contact manager. React became the basis for the new design implementation, which increased the users’ site accessibility. The company said it has moved to an agile development environment, improving the look and feel of many features on its blog.
Cloudflare
ReactJS is also used by security platforms as an example Cloudflare website. It is a network of servers where people worldwide connect their websites to increase speed and protect against DDoS attacks. The company has a vast infrastructure and can block the most powerful attacks on the DNS system. One of the reasons for choosing React is the flexibility to provide services to a wide range of clients.
Trello
The project management system was based on Coffeescript and Backbone JS for a long time until the need for more dynamic technologies arose. The team ran into difficulties with architecture support and caching. React and Typescript were chosen to solve problems, and later GraphQL was added. This expanded the service capabilities, making it responsive and simple.
Skyscanner
The system provides users with information on flights according to selected criteria. In 2019, the company carried out a large-scale redesign and updated the brand. The Backpack design system was built with React components as its foundation. We managed to achieve the main goal — to find a balance between UI/UX and brand appearance. The interface is flawless for various platform users.
Codecademy
The platform improves programming skills: it is used by more than 50 million people. One of the reasons for such popularity is the user-friendly UI. Attractive design, animation, and smooth transition between pages make learning easier and more enjoyable. In addition, animation can be implemented with minimal coding effort. All this guarantees a seamless UX and an interesting UI.
Dropbox (HelloSign)
The document signing service is owned by Dropbox. It allows you to share files and sign online on different devices quickly. This requires high safety and efficiency. In 2020, the company decided to migrate the service from jQuery to React (previously used for Signer), which improved performance and usability.
The company selected this library for its web app in 2015. They appreciated the virtual DOM feature. At that time, the project was focused on combining its canvas layout engine with the tool components. The company introduced React Canvas, which allows you to draw standard DOM objects (pictures, text) with improved performance.
Scribd
This service offers a book subscription in electronic and audio format, meaning it is aimed at an audience that pays attention to the UI quality. The site chooses React for the frontend: thanks to JSX, the code becomes easier to write and understand. In general, working with this language turned less stressful than with alternatives.
Asana
This web-based project management app initially used Luna. But due to problems with scaling, other options were needed. Now the interface is written mainly in React and Typescript. The team had two good reasons for choosing them: stability and optimal performance. A notable result of moving in this development direction has been the rise of user experience to a higher level.
Instacart
The delivery platform joined the ranks of the framework in 2016. Previously (since 2012), it was a SPA hosted on the “foundation” of Backbone, Underscore.js, Query, and Haml. Over time, the team grew, and the client and partner base increased, making it more difficult to manage the application. The transition from Backbone Views to React Components without breaking the infrastructure helped solve the problems.
Grammarly
The first English typing assistant that leverages the power of AI and NLP. It also incorporates ML and DL algorithms to fix bugs and generate alternatives quickly. The platform uses a framework to provide unique features ranging from spelling errors to anti-plagiarism checks.
Each React JS website described in this post deserves attention; however, we have listed not all examples. So, among other fans of the framework are Uber, PayPal, New York Times, Airbnb, Reddit, GitHub, etc. As you can see, the tool is useful for various projects, regardless of scale, direction, speed, and scaling.
