React and Redux - 10 examples of successful Web App Development
Almost half of React apps use Redux today. The question is - why is Redux gaining so much steam? And, is React becoming more popular thanks to Redux?
Apr 29, 2021 | 9 min read
Node.js is a backend development technology. The backend of a web application is the place where its data is stored and served from.
Almost half of React applications use Redux today. The question is - why is Redux gaining so much steam? And, is React becoming more popular thanks to Redux? Keep on reading to understand these two front-end tools better and discover how tech giants and startups alike benefit from them in web development.
React was developed by Jordan Walke at Facebook and was initially used to build Facebook’s feed in 2011. Later on, Facebook developers used it to develop Instagram in 2012. In 2013, React became an open-source library, and today it’s maintained by its community with the help of Facebook.
The name React might bring to mind another technology - React Native. Don’t confuse these two because they serve entirely different purposes.
While React is a library for web development, React Native is a React-based framework used to build cross-platform mobile applications. React Native was developed by Facebook as well, and today it’s used as one of the primary cross-platform tools for creating native iOS and Android mobile applications.
To explain the difference between React and Redux, we need to focus on one key detail - states. Every application needs a method for managing state.
React state is stored locally, within a component. When the state needs to be shared with other components, it’s simply passed down through props. What does this mean for your app? That its top-most component that requires access to a mutable value will hold that value in its state.
In Redux, on the other hand, the state is stored globally in the Redux store. Any component that needs access to a value can subscribe to the store and easily gain access to the value.
Redux helps to centralize all data while enabling components to get the state it needs - without other components knowing that. These two technologies are often used together - as you will see in the following examples of some pretty impressive applications.
Why has React become so popular?
This means that software engineers can create interactive UIs easily. It also makes the application’s code more predictable and easier to debug.
Components are basically building blocks of React pages, and the good news is that they’re reusable. This accelerates the development process.
React is surrounded by a large community of developers who share their knowledge and are happy to help one another. This means that finding skilled coders for your project is easier.
React Native is growing fast and becoming a key technology for developing native mobile applications.
Let the successful examples of React and React & Redux apps become your answer. Ready? React, you’re up first. Show us what you’ve got!
Location: Los Gatos, CA
Revenue: $24.99B (in 2020)
Users: 203.66 million
The Netflix team used React to develop the most popular video streaming web application on the internet. They even published a blog post that explains how React helps them to increase startup speed, optimize runtime performance, and improve many other things.
As the Netflix UI engineers say:
“Our decision to adopt React was influenced by a number of factors, most notably: 1) startup speed, 2) runtime performance, and 3) modularity.”
Location: San Francisco, CA
Funding: $1.7B Revenue: $0.504B (Q4 2020)
Users: 600 million users (Q3 2019)
Dropbox switched to React from CoffeeScript some time ago, right when the technology was gaining steam among web developers. Dropbox uses React to handle the massive traffic and data flow the platform experiences. So, it’s fair to say that the library is a serious contributing factor to the success of the cloud-based storage service.
Get informed about the most interesting MasterBorn news.
Location: Palo Alto, CA
Users: 6.54 million (subscribers on YoutTube channel)
Many parts of Khan Academy are based on React. One of the engineers shared his personal experience with the library and showed how it differentiates from the Backbone script they used before. Switching to React looks like a serious upgrade - take a look at his article to learn more about the most important features built with React and the benefits it brought to Khan Academy.
Location: Hartford, CT
Users: CT restaurants, 150+ CT-based eateries
This Connecticut-based startup has built a web-based platform that offers users reassurance that the restaurant they’re eating follows proper health codes and protocols. DineSafe recently got a huge boost when Google agreed to make DineSafe’s certification visible when someone searches for a restaurant. The entire platform was developed using React, showing that the technology is a popular choice among budding startups.
Ok, it’s time to see what React can achieve together with Redux. Here are 5 solutions built with this master duo.
Instagram uses React in many parts of its application - from geolocation and Google Maps APIs to the incredible search engine accuracy and tags. It’s thanks to React that fans can access so many amazing features. And according to Stackshare, Instagram is using Redux as well.
Location: Seattle, Washington
Revenue: $125.555B (Q4 2020, a 43.59% increase YoY)
The global e-commerce mogul and cloud service provider uses React for brand pages vendors can set up to create a unique experience on the Amazon site. In a recent hackathon called the 5 day React Challenge, participants created The Amazon Clone using - surprise, surprise - React.
Location: London, England
Revenue: £160M (2019)
Users: 12 million (June 2020)
Revolut is a financial services platform that specializes in mobile banking, card payments, and foreign exchange. Users can take advantage of many different products, from prepaid debit cards and currency exchange to peer-to-peer payments. To build its frictionless financial solutions, Revolut is using React with Redux.
Location: Paris, France
Users: 87 million
The French startup BlaBlaCar isn’t only occupying the ride-sharing space - it recently diversified its activity to bus rides and bus ticketing. Offering services in 400 cities in Europe, BlaBlaCar is definitely one of the most impressive tech startup stories in Europe. And according to Stackshare, one of the technologies behind its success is the combination of React with Redux.
Location: Copenhagen, Denmark
Last year, users wrote over 38 million reviews on Trustpilot. This handy free-to-use web service allows any user to review a business's services under a real name or nickname. The idea was to enable users to get independent perspectives on a company's services without the risk of fake and fraudulent reviews. The company reported success in facing this challenge - and its impressive interface hides that complexity thanks to React and Redux.
We absolutely love using them when building products for our clients and will definitely continue doing so for years to come. If you’re still hesitating between React, React & Redux and other frameworks or libraries, just give us a shout at firstname.lastname@example.org, and we’ll make sure to React as fast as possible.
Table of Content
- What is React?
- React vs. React Native - what's the difference?
- What is Redux?
- React vs. Redux - what's the difference?
- Why use React?
- React is declarative
- Gentle learning curve
- React is component-based
- Massive community
- React supports mobile development
- Why use React & Redux?
- 5 Examples of Successful Web Apps Built with React
- React App #1: Netflix
- React App #2: Dropbox
- React App #3: WhatsApp
- React App #4: Khan Academy
- React App #5: DineSafe
- 5 Examples of Successful Web Apps Built with React & Redux
- React & Redux App #1: Instagram
- React & Redux App #2: Amazon
- React & Redux App #3: Revolut
- React & Redux App #4: BlaBlaCar
- React & Redux App #5: Trustpilot
- Applications Built with React & Redux - Final Thoughts
World-class React & Node.js experts
Separation of concerns in modern React apps - key principles and examples
Building React apps, ever wondered where to put that "thing", and how to name it?
How to Effectively Scale Your Web Application - 7 Tips from a CTO
Web App Scaling ensures consistent performance and increases the efficiency of your app as it expands. Learn how to put it to good use in your business.
Jak NIE budować MVP - 6 porad dla CEO i Founderów
W MasterBorn ulepszanie procesu tworzenia oprogramowania stało się naszą firmową “obsesją”. W przypadku większości firm i zespołów proces ten zaczyna się od utworzenia i zdefiniowania MVP. W tym artykule chciałbym się podzielić spostrzeżeniami i najlepszymi praktykami, których nauczyliśmy się tworząc MVP dla naszych amerykańskich Klientów.