React was created by Jordan Walke, a software engineer at Facebook in 2012. Just a year later it was open-sourced and has been under massive development ever since supported by enormous and highly active community worldwide.
What makes React Web Development so unique? First of all, it’s designed for scaling. The component architecture allows developers to write the code once, and then re-use it in all their applications. There is a vast community-driven component library online. React developers love the approach of reusability. From the business perspective, it saves a massive amount of time and lets you and the development team concentrate on the specific challenges of your project. It is a massive treat for every React development company.
As a React agency, we love great React based projects. Today we present you 15 stories of amazing React Web Development. Please, enjoy!
Facebook has to be presented here for the very obvious reason. As mentioned above, it was created by one of their software engineers and since then it makes its way to Facebook’s front end.
In terms of code, Facebook is massive. Its codebase includes over 20,000 components, and, although it is heavily based on React, its tech stack is much more complex. Not to list every technology, they also utilize PHP and Python (namely: Tornado framework). React is used not only on the web version of the platform. It is also a base of other FB’s products, such as Whatsapp and Instagram (description below).
Due to its component architecture, it allows notifications, comments and posts reactions to be displayed in the real time without the need of reloading the page. Same goes for the News Feed – new posts can appear there live.
When Instagram was acquired by Facebook in 2012 it didn’t have the web version of the app. But it was obvious that they had to create one. The library chosen was, no surprises there, React.
Since the very beginning of the web version of Instagram is 100% based on the React library. There are several cool features within the web version of Instagram that are made possible thanks to React. One example is Geoshare which allows viewing photos in the real time on a world map. Others are live hashtag counter or Localgram which helps to find photos that people post around every given location.
Asana is one of the best project management tools out there. It’s a web and mobile application designed to help teams organize, track, and manage their work. Asana is experiencing constant growth since its launch in 2008. As for 2020, it has over 82,000 paying customers worldwide and recently raised 75 M $ in Series D round of funding. Among their customers, you’ll find star companies like Spotify, Uber, Autodesk or Trivago.
Asana web application was initially based on Luna, but with the growth of the product, a bunch of problems appeared – mostly with scaling up. That’s why they decided to rewrite the front end and chose React to do that.
There were solid reasons behind that: React is similar to Luna Views and it was fairly easy to integrate. Moreover, virtual DOM implementation helped to solve a lot of UI problems for us regarding focus and animation.
Reviewing huge chunks of material for an exam, trying to finally figure how math works, wishing to learn history from A to Z. However you wish to educate yourself, you can find all the resources to do so on Khan Academy, a platform that proves high-quality learning materials can really be free.
Khan Academy was established as a non-profit organization back in 2008 by Salman Khan, an educator, and mathematician who wanted to make sure kids around the world get the free help they need when it comes to studying. After over 10 years of Khan Academy’s existence, the online platform is now available in multiple languages and offers courses on such various subjects as math, physics, economics, and humanities. Each course is filled with professional videos explaining the topic and proper exercises.
The engineers at Khan Academy are using all the great features of both the standard React as well as React Native, the framework dedicated to mobile app development. The latter allows them to efficiently update their mobile apps for iOS and Android. To learn more about how Khan Academy uses React, it’s also worthy to check its engineers’ special, regularly updated blog.
Codecademy is an online freemium interactive platform that offers free coding classes. It is one of the most popular educational platforms for future web developers and mobile app developers. Over 45 million people trusted Codecademy with their professional growth.
Codecademy dev team is extremely happy with its React web development. Because it is component based they were able to test individual pieces of the UI in isolation without interfering with the rest of the app. The possibility of serving a mostly-complete page to search engines significantly improved their SEO.
Furthermore, due to React compatibility with the legacy code, they were able to experiment with adding consecutive parts to the existing codebase. Bonnie Eisenman, Software Engineer from Codeacademy recommends experimenting with React in order to check how it might fit in with your code.
Yahoo! Mailing app came a looooong way. Created in 1999 with C++ and HTML it was evolving through Java and PHP to end with React and NodeJS in 2015.
At this point in time Yahoo! Mail service was in a deep need of changes. They had to implement predictable flow which would allow easy debugging, more up-to-date codebase and independently deployable components.
Before they decided to go with React, Yahoo! Team considered Angular JS and Ember JS, but they were lacking flexibility Yahoo! needed.
Finally, they decided to rewrite the architecture of the service with React and Flux. There were several reasons behind this decision, such as one-way reactive data flow and Virtual DOM which allows the client and server-side rendering. They also underlined the importance of the growing community around React.
The presence of React in New York Times technology stack should be credited to their current CTO, Nick Rockwell. When he joined the NYT he faced the very diversified stack that had put in order.
Boy, did they take advantage of this freedom. Go, Scala, Hadoop, Redshift, Dynamo, SQS, and many others all had a moment in the sun, with marginal planning around permanence or scale. Physical infrastructure was also scattered.
React seems to be working pretty well for the New York Times. Eventually, the entire online universum of the New York Times will be re-designed with React.
Atlassian is an Australian enterprise software company that creates products for software developers and project management. If you are a software development agency or a software house you probably use their products. Tools like JIRA and Confluence are in their portfolio.
Atlassian is truly a React company as they use React internally and externally. They benefit from many React features, such as deployability to the Web, mobile, and desktop which allows developers to reuse libraries between platforms.
Although there are more and more ways of paying online and e-banking is growing, PayPal, often called the industry’s pioneer, is still doing well. By the end of 2020, there were 361 million active user accounts and 21 million merchant accounts on PayPal. The company’s revenue is also constantly increasing. For fiscal year 2019, Paypal reported earnings of US$2.459 billion, with an annual revenue of $17.772 billion, an increase of 15% over the previous fiscal cycle.
To support this growth and make sure the users are given a platform that meets all their needs and requirements, PayPal regularly updates its tech stack making sure the engineering team is using all the latest technologies on the market. Because of this, in 2015, the developers at PayPal started to implement React in their ecosystem.
Earlier this year, we started using react in our various apps at PayPal. For existing apps, the plans were to bring react in incrementally for new features and start migrating portions of the existing functionality into a pure react solve. Regardless, most implementations were purely client-side driven. But most recently, in one of the apps that we had to start from scratch, we decided to take a step forward and use react end to end.
Currently, React is one of the most important elements of PayPal’s tech stack, making the company an incredibly important user of this technology.
The React version also works with Netflix - especially on their platform called Gibbon, which is used for low-cost TV devices instead of the DOM used in web browsers. Netflix even posted an official blog post explaining how the React library can help improve startup speed, performance, modularity, and other benefits.
Netflix's UI engineers told the following:
A number of factors influenced our decision to adopt React, primarily: 1) launch speed, 2) runtime performance, and 3) modularity.
Netflix UI engineers have embarked on several ambitious projects to revolutionize the user experience on the desktop and mobile platforms. With the UI redesign at a scale similar to that of TVs and game consoles, it was important for them to reevaluate the existing UI technology stack and determine whether new solutions should be investigated.
Obviously, Uber devs are React fans. Just look at the Uber website: with a total of 90 million visitors ranking first in the ground transportation rankings, this website should provide the highest quality user experience. React plays an important role here.
The Uber engineering team has used the power of React since the site was built. With it, the team has created many open source libraries (you can use them for your project!). Most impressive are the map rendering tools.
In addition, Team Uber has created Base Web, a design system that provides reusable components for user interface development. It is built on top of React and allows you to create device agnostic user interfaces. The team says reliability, availability, and customization are key characteristics and encourages the use of the system in any web project.
This world famous vacation rental platform also uses React in its front-end. Have you ever noticed how quickly and how well web page elements load onto the screen? Splitting into several blocks, the content is updated organically, without delays or flaws.
Leland Richardson, an Airbnb engineer, describes the benefits of React in two simple phrases:
“Reusability/portability: React components are extremely reusable
Refactorability: React tends to make your code very easy to refactor and iterate on.”
Airbnb hasn't used React for a long time. But the choice was right: the platform grows and expands, and at the same time, React does not stop improving. Each new version provides convenient features to update and serve the huge P2P marketplace like Airbnb.
Meanwhile, Airbnb engineers are contributing to the React ecosystem. For example, they provided a useful React Sketch.app library for the needs of developers and designers.
And here's another market leader who leveraged the potential of React in their web software 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 pay special attention to the site.
In a blog post, Microsoft informs us about “… introducing a more flexible web development environment that provides a refreshed search experience, a fresher look with a modern communication style, and a new design that lets you view, read, and attach files and photos faster. "
Guess what framework they are talking about? Yes, this is React.
Dropbox, a file hosting service, tells a different story. Their case is about a successful but challenging transition from CoffeeScript to a winning combination of Typescript and React.
Back in 2012, the decision was a mess. Numerous software engineers have contributed to the codebase. However, only a few of them were aware of what was happening on the site. The team chose the Typescript language and later, in 2016, started a redesign with the React library. Built with React and Typescript, the website has achieved great results.
Have you ever noticed how quickly you can access a preview of any document in Dropbox? By collecting the file data, React analyzes the page count and page size, builds a skeleton and renders a preview as the user scrolls down the page. 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."
For nearly ten years, the web-based task management system has been powered by Backbone JS and Coffeescript. Back in 2009, it was a relatively powerful technology stack. But time flies, and so do JS tools. Therefore, the team decided to move to a more dynamic stack.
The development team faced two major challenges.
The Backbone JS architecture was difficult to maintain + limited Trello's capabilities;
The caching procedure was incomprehensible and difficult to follow.
React and Typescript have been chosen as the primary tools for dealing with rebellion-related problems. Later, GraphQL joined the team.
As a result, we can enjoy the ease of use of the Trello website, its well-designed components, and fantastic responsiveness.
Ideamotive runs a network of vetted web developers skilled in various technologies, including React. Our web development talents build custom web apps for startups, scale-ups and enterprises all around the globe.
Michał is a digital marketing veteran with a growth hacking mindset and 10+ years of experience. His goal is building high-quality technological content, with particular emphasis on React and Ruby on Rails. Traveler, climber, remote work advocate.