React Website Examples | Other than Netflix, Facebook, BBC

React launched its latest version React v18.0 in March 2022. The new features and improvements like concurrency, suspense, automatic batching, etc., allow developers to make use of scheduling i.e, loading of content priority-wise. As a result, server-side rendering performance can be hyper-optimized. Users experience less delay in interaction with content, and perceived performance is enhanced dramatically – Problem solved for users on a slow connection. One of the many benefits of web apps, websites, or PWAs built using React.

You may be familiar with all the crazy statistics and leading companies like Netflix, Facebook, DropBox, Asana, Walmart, etc. embracing the React.js library. Modularity or component-based style of React has assisted these companies in continuing their obsession with the A/B testing to deliver the smoothest user experiences. Below are the React website examples, along with how they solved their unique problems using this JavaScript library.

1. Hello Sign

The Hello Sign offers eSignature solutions for legal documents. Its products are used for sales contracts, HR onboarding, financial agreements, insurance documents, etc. It allows to prepare, send and track eSignature forms through a user-friendly API. Hello Sign can even be integrated with Google Docs, Slack, Salesforce, Hubspot, etc. It is a Dropbox company and you may be aware that Dropbox also uses React for its SPA (Single Page Application) and mobile version.

Hello Sign has three modules – the Editor, Signer, and Final Document. The challenge was to provide a brilliant UI of all three parts on any screen resolution. Other challenges included enhancing the responsiveness of the editor and maintaining synergy between editor, signer, and signed document.
Since these are legal documents, any slight inconsistency in any of the three modules can potentially erode the customers’ trust.

Initially, only Signer was made using React, but to solve these discrepancies, they designed the editor with React too ‘cause of its Virtual DOM feature and efficient diff algorithm.

Hello Sign was built using PHP, and React though was part of the tech stack, it was invoked from PHP. This strategy had some limitations. To overcome it, React router with code splitting was deployed to move to a point where all the UI elements come from a single codebase. React Router is one of the most popular libraries developers use along with React.js for client-side routing.

Also, mobile app developers used a Context-based approach for state management. But they suggest using Redux as a more efficient approach.

 

2. Culture Trip

Culture Trip is a content-heavy website. And its success depends on intuitive navigation and well-executed SEO. It provides useful information on how and where you can spend your vacations, relax, and create joyful memories.

Initially Culture Trip was on WordPress, and it’s expected that with increasing traffic, their performance was getting hit badly. To come on a growth track, they switched their tech stack to React, Next.js, etc and used WordPress as a semi-headless CMS.

Culture Trip’s team embraced React because you can build an isomorphic website for good SEO, use reusable components for fast development, test quickly different UI elements, and overall build a snappy website with thousands of UI elements.

3. Tinder PWA

Tinder needs no introduction. To expand their reach and provide a core tinder experience to users on the web, they developed the PWA version using React.js.

Using React for UI and Redux for state management, they shipped the MVP in just three months. Comparing the size with the native android app, which is around 30 Mb, the size of PWA is a mere 2.8 Mb.

They witnessed longer session times and more messaging on PWA than on react native apps. With PWA, within 5 seconds, their web app gets interactive. Studies after studies have shown how crucial it is for websites to engage people within seconds. Tinder’s team used React Router and React Loadable for code-splitting huge JS bundles that were delaying the loading of content. You know, their JS bundle size was just 101Kb after routing which was 166 kB earlier.

 

4. Welt News

Welt is a German news media website, a child company of Axel Springer. JavaScript, as you may know, is the most sought after programming language, but it is not the most efficient. You must know and design strategies to optimise it for maximum performance otherwise size of JS files can get out of control.

For a news website which doesn’t have interactive elements in the same volume as Facebook or Twitter, or which is not completely controlled by JavaScript, the complete hydration or server-side rendering where all of the UI components are delivered to the client’s browser will dramatically slow down the website. The parsing and execution expenses are unnecessarily high in this approach.

Instead, Welt’s team went ahead with partial hydration, wherein only necessary JS files are sent to the client’s browser. The website performance is improved as only simple, plain HTML and CSS and few JS files are rendered. Further, code-splitting can catapult the performance to the next level.

Welt, at that time, used Preact, a very lightweight library which is a contender for React, and Next.js for server-side rendering. But, developers can perform partial hydration with React as well.

5. Starbucks PWA

Another famous brand which doesn’t need any introduction. So, I will in a few lines shed light on the relationship between Starbucks and React. In the podcast, Cher Scarlett, says they migrated to React from Vue. Initially, it was difficult for the team to get hang of it but then using React, Starbucks crafted a high-performance PWA. Just like Tinder PWA, there is an astronomic reduction in the size of the application. The PWA version is 233 Kb while the native app’s size is 148 Mb.

With React’s Context-based state management’, switching between light and dark themes is super-easy which was not before React. Earlier, it was quite a tedious task. To handle large data, initially, Starbucks used Redux.

Starbucks has a lot of forms, and form files have the tendency to eat up a lot of space. React ‘Hooks’, special functions, are extensively employed by Starbucks’ developers to manage the life cycle of forms.

6. Discord

Discord’s frontend is entirely built on React. It is a voice, video and text chat app that allows its users to build worldwide communities and interact with like-minded people.

The Discord platform uses React and routinely upgrades whenever a new version of React is out or whenever they seem it necessary. Infact, once when they faced a memory leakage issue (after upgrading their React framework), all their issues were thoroughly addressed. This particular example shows that no library or framework magically enhances performance. Front-end engineers must always evaluate their code critically for best results.

Their success with the React.js library inspired them to build their mobile app on React Native as soon as it was made open-source in 2015.

7. Trello

Trello is a project, workflow, and task management tool, using which the user can get a much more comprehensive and clearer view of their teams, tasks and progress.

Trello is built on React. Well, that was not always the case. They switched to React framework a couple of years ago when their old front-end framework began hindering their platform’s growth.

Also, later when they wanted to adopt GraphQL, their modern and modular architecture built on React framework was able to smoothly integrate with the same.

8. Figma

When Figma wanted to build its website in React, it tried to address to main issues. One was to enable users to sync the designs built on Figma across different devices, and make collaboration intuitive. Second, to develop a functional code that doesn’t hamper any existing code and seamlessly connects with the new design (code).

Not only were they able to provide these new features using React, they now have the flexibility of reusing code and attaching it to any Figma node.

9. Canva Live

Canva Live – one of the features of Canva (design software) allows audiences be ask live questions while viewing the presentation on Canva. The audience can have this access with the help of a unique url and a passcode.

To render the user interface of Canva Live and handle all the state changes, Canva’s technology team used React library.

10. Whats App Web

Whatsapp web, Whatsapp’s web version too, is built using the React framework. Since React enables the building of a responsive user interface, WhatsApp web provides fast and seamless inter-app transitions and navigation to the users.

11. Codepen

Codepen.io is an online IDE which allows the user to write code, without doing configurations for specific technologies on their local system. It mainly focuses on building a social development ecosystem for frontend development.

Codepen’s user interface is attractive, smooth to navigate and interactive, all because of fast rendering because of React.js.

12. Fiver Business

The messaging system of Fiverr Business, a platform that helps you match with the suitable talent for your business is built on React. Adoption of it allows them to perform A/B testing in fast pace before the final implementation of the frontend code.

Why companies from large to small prefer react.js?

The natural question that may be surfacing in your mind after you have gone through above examples – Why React? Allow us the opportunity to answer it in brief.

Responsive User Interface and slick transitions

To make any web app or website usable and enjoyable, its UI elements should be highly responsive. Micro-transitions and animations like swipe, loading bars, etc. not only make interaction delightful and humane. It is a way to provide quick feedback about the current state.

Now, to make these UI elements seamless and lag-free, any framework or library must render at a lightning speed and perform effective state management. The state is changed whenever there is an update in UI elements. Like new comments or likes on a post, updating profile picture, chatting on multiple chat windows, etc. Just visualise the frequency of change in state on a website with millions of users.

Virtual DOM and special functions ‘Hooks in React library are some innovative solutions that make it possible to create an ultra-smooth interactive user interface and make the digital experience fun.

Components based-approach for faster and intuitive development of UI elements

Every UI element like a chat window, cart, news feed, etc. is considered a component in React. These components are independent and immutable ‘cause of the unidirectional flow of data. The effect is that components are isolated and change in one component doesn’t alter the state of others.

All these components are reusable. You can even use components made by developers for other projects if they are relevant to you. It is an amazing feature for lazy developers. You see, good developers are lazy developers. React undoubtedly knows how to make life easy for them.

With a modular approach, it is relatively easy to manage thousands of components across multiple development teams.

Flexibility to combine with other powerful libraries

React is not an opinionated framework. It is a declarative JavaScript library. What this means is that developers can combine it with other creative libraries to improve performance radically.

Suppose, you feel React is not good enough for SSR (Server-Side Rendering), then you can combine it with Next.js. To get the benefit of serverless rendering, Gatsby is your option. For routing, React Router is no match. Likewise, Redux for efficient state management. Other useful libraries are Material UI, Semantic UI, React Motion, etc

Server-Side Rendering is better for SEO than Client-Side Rendering

SSR is the loading of JS bundle on the website’s server whereas CSR is the rendering of content using a browser through DOM.

Though CSR is inexpensive and responsive. But JS bundles specifically Virtual DOM bundle is not lightweight, people may experience a blank page or incomplete content as all the burden of loading JS is on the client’s browser, and consequently, perceive it as poor performance.

Another critical issue is google is not able to fully index a webpage until JavaScript is loaded completely. Since the title, meta description, keywords, etc are included in the JS file, moreover, these are the oxygen for SEO, you can imagine how grave a problem is when the website is not fully loaded and google cannot crawl these crucial aspects.

Server-side rendering not only reduces the initial loading time. It solves the SEO issues too. The net effect is people can interact with meaningful content without perceiving any delay. As mentioned, React 18 has scheduling features to ensure great SSR performance. Or you can even utilise other libraries like Next.js or Gatsby.

To know more comprehensively why you should use React for web development and some pitfalls of it, read our blog on Why React?

Takeaways

Innovation in React is not slowing down. Thanks to the dedication of React’s core team and the community around it. Developers in companies of all sizes and types find creative solutions to optimize for performance and craft highly responsive and lag-free UI.

Though, other lightweight JS libraries like Preact are serious contenders. The timelessness of React lies in its flexibility. The talented developers use it in moderation and combine it with more performant libraries.

My team loves designing websites, PWA and web apps that are fast and intuitive. If you are looking for a full-fledged web development company or specifically want to build the front end, give us the opportunity to be your React JS development company.