Please Rotate to Portrait for Better View !
Screenshot of websites using React

5 successful Examples of Websites Built using React

By: Taru M. Taru M.
06 Jun, 2022

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-optimised. Users experience less delay in interaction with content and perceived performance is enhanced dramatically – Problem solved for users on a slow connection. It is 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. You know, modularity In React has assisted the Netflix team to continue their obsession with the A/B testing. Below are the React website examples and you will see how they solved their unique problems using this JavaScript library.

1. Hello Sign

2. Culture Trip

3. Tinder PWA

4. Welt News

5. Starbucks PWA

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 has the potential to erode the trust of the customers.

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.

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

The new Editor was built under a codebase split, which allowed us to roll it out to specific accounts or groups of accounts without affecting the rest of our customers. Moreover, it allowed us to roll out the new Editor code while working on a UI redesign—the one we had chosen not to include as part of our move to React—simultaneously. – Asa Ayers, Software Engineer, Dropbox

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.

You can read our blog to see examples of PWA and how it benefited those brands.

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 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 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.

The Benefits of React Web Apps.

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.

Taru M. Author
Taru M.

For over 18 years, Taru M. is a successful technology entrepreneur by profession and a tech enthusiast by spirit. She takes pride in offering expertise in her domain to business people's success across the globe. As a business woman and technology expert, she manages to keep her balance along with her family responsibilities. She did her masters in computers, and her work delivery shows the expertise of her education. Connect with her via Linkedin profile to know more about her exciting personality

Please Get in Touch & Our Expert Support Team will Answer all Your Questions.

Please enter your name.
Looks good!
Please enter your email.
Looks good!
Please enter your phone no.
Looks good!

We Hope you enjoy reading this blog post.

If you want our team at NetMaxims to help you for tech solutions, just book a call

Book a Call