{"id":17189,"date":"2022-06-06T13:19:27","date_gmt":"2022-06-06T13:19:27","guid":{"rendered":"https:\/\/netmaxims.com\/blog\/?p=17189"},"modified":"2026-01-24T09:58:25","modified_gmt":"2026-01-24T09:58:25","slug":"examples-of-websites-built-using-react","status":"publish","type":"post","link":"https:\/\/netmaxims.com\/blog\/examples-of-websites-built-using-react\/","title":{"rendered":"React Website Examples | Other than Netflix, Facebook, BBC"},"content":{"rendered":"
\n

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 \u2013 Problem solved for users on a slow connection. One of the many benefits of web apps<\/a>, websites, or PWAs built using React.<\/p>\n

\n

Table of contents<\/b><\/p>\n

1. <\/b>Hello Sign<\/a><\/p>\n

2. <\/b>Culture Trip<\/a><\/p>\n

3. <\/b>Tinder PWA<\/a><\/p>\n

4. <\/b>Welt News<\/a><\/p>\n

5. <\/b>Starbucks PWA<\/a><\/p>\n

6. <\/b>Discord<\/a><\/p>\n

7. <\/b>Trello<\/a><\/p>\n

8. <\/b>Figma<\/a><\/p>\n

9. <\/b>Canva Live<\/a><\/p>\n

10. <\/b>Whats App Web<\/a><\/p>\n

11. <\/b>Codepen<\/a><\/p>\n

12. <\/b>Fiver Business<\/a><\/p>\n

13. <\/b>Why companies from large to small prefer react.js?<\/a><\/p>\n

14. <\/b>Takeaways<\/a><\/p>\n<\/div>\n

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.
\n<\/span><\/p>\n

<\/span>1. Hello Sign<\/span><\/h2>\n

<\/p>\n

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.<\/p>\n

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.
\nSince these are legal documents, any slight inconsistency in any of the three modules can potentially erode the customers’ trust.<\/p>\n

Initially, only Signer was made using React, but to solve these discrepancies, they designed the editor with React too \u2018cause of its Virtual DOM feature and efficient diff algorithm.<\/p>\n

Hello Sign was built using PHP<\/a>, 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<\/a> for client-side routing.<\/p>\n

Also, mobile app developers<\/a> used a Context-based approach for state management. But they suggest using Redux as a more efficient approach.<\/p>\n

\n

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\u2014the one we had chosen not to include as part of our move to React\u2014simultaneously. – Asa Ayers, Software Engineer, Dropbox<\/b><\/p>\n<\/div>\n

 <\/p>\n

<\/span>2. Culture Trip<\/span><\/h2>\n

<\/p>\n

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.<\/p>\n

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.<\/p>\n

Culture Trip\u2019s team embraced React because you can build an isomorphic website for good SEO<\/a>, use reusable components for fast development, test quickly different UI elements, and overall build a snappy website with thousands of UI elements.<\/span><\/p>\n

<\/span>3. Tinder PWA<\/span><\/h2>\n

<\/p>\n

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.<\/p>\n

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

They witnessed longer session times and more messaging on PWA than on react native apps<\/a>. 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\u2019s 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.<\/p>\n

\n

Compliment with how brands solved their problems like low retention rate using PWA solutions<\/a>.<\/p>\n<\/div>\n

 <\/p>\n

<\/span>4. Welt News<\/span><\/h2>\n

<\/p>\n

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<\/a>, 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.<\/p>\n

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\u2019s browser will dramatically slow down the website. The parsing and execution expenses are unnecessarily high in this approach.<\/p>\n

Instead, Welt\u2019s team went ahead with partial hydration, wherein only necessary JS files are sent to the client\u2019s browser. The website performance<\/a> 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.<\/p>\n

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.<\/span><\/p>\n

<\/span>5. Starbucks PWA<\/span><\/h2>\n

<\/p>\n

Another famous brand which doesn\u2019t need any introduction. So, I will in a few lines shed light on the relationship between Starbucks and React. In the podcast<\/a>, 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\u2019s size is 148 Mb.<\/p>\n

With React’s Context-based state management\u2019, 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.<\/p>\n

Starbucks has a lot of forms, and form files have the tendency to eat up a lot of space. React \u2018Hooks\u2019, special functions, are extensively employed by Starbucks\u2019 developers to manage the life cycle of forms.
\n<\/span><\/p>\n

<\/span>6. Discord<\/span><\/h2>\n

\"Discord
\nDiscord\u2019s 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.<\/p>\n

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.<\/p>\n

Their success with the React.js library inspired them to build their mobile app on React Native<\/a> as soon as it was made open-source in 2015.
\n<\/span><\/p>\n

<\/span>7. Trello<\/span><\/h2>\n

\"Trello<\/p>\n

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.<\/p>\n

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\u2019s growth.<\/p>\n

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.
\n<\/span><\/p>\n

<\/span>8. Figma<\/span><\/h2>\n

\"Figma
\nWhen 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\u2019t hamper any existing code and seamlessly connects with the new design (code).<\/p>\n

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.
\n<\/span><\/p>\n

<\/span>9. Canva Live<\/span><\/h2>\n

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.<\/p>\n

To render the user interface of Canva Live and handle all the state changes, Canva\u2019s technology team used React library.
\n<\/span><\/p>\n

<\/span>10. Whats App Web<\/span><\/h2>\n

\"whats
\nWhatsapp web, Whatsapp\u2019s 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.
\n<\/span><\/p>\n

<\/span>11. Codepen<\/span><\/h2>\n

\"codepen
\nCodepen.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.<\/p>\n

Codepen\u2019s user interface is attractive, smooth to navigate and interactive, all because of fast rendering because of React.js.
\n<\/span><\/p>\n

<\/span>12. Fiver Business<\/span><\/h2>\n

\"Fiverr
\nThe 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.
\n<\/span><\/p>\n

<\/span>Why companies from large to small prefer react.js?<\/span><\/h2>\n

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.<\/p>\n

<\/span>Responsive User Interface and slick transitions<\/span><\/h3>\n

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.<\/p>\n

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.<\/p>\n

Virtual DOM and special functions \u2018Hooks 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.<\/p>\n

<\/span>Components based-approach for faster and intuitive development of UI elements<\/span><\/h3>\n

Every UI element like a chat window, cart, news feed, etc. is considered a component in React. These components are independent and immutable \u2018cause of the unidirectional flow of data. The effect is that components are isolated and change in one component doesn\u2019t alter the state of others.<\/p>\n

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.<\/p>\n

With a modular approach, it is relatively easy to manage thousands of components across multiple development teams.<\/p>\n

<\/span>Flexibility to combine with other powerful libraries<\/span><\/h3>\n

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.<\/p>\n

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<\/p>\n

<\/span>Server-Side Rendering is better for SEO than Client-Side Rendering<\/span><\/h3>\n

SSR is the loading of JS bundle on the website\u2019s server whereas CSR is the rendering of content using a browser through DOM.<\/p>\n

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\u2019s browser, and consequently, perceive it as poor performance.<\/p>\n

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.<\/p>\n

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.<\/p>\n

To know more comprehensively why you should use React for web development<\/a> and some pitfalls of it, read our blog on Why React<\/a>?
\n<\/span><\/p>\n

<\/span>Takeaways<\/span><\/h2>\n

Innovation in React is not slowing down. Thanks to the dedication of React\u2019s 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.<\/span><\/p>\n

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.<\/p>\n

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<\/a> or specifically want to build the front end, give us the opportunity to be your React JS development company<\/a>.<\/p>\n<\/div>\n

Found the blog useful? Give us a <\/p>

0<\/span><\/a><\/div> <\/div>
<\/div><\/div>
<\/div>","protected":false},"excerpt":{"rendered":"

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… Continue reading React Website Examples | Other than Netflix, Facebook, BBC<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":17190,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[658],"tags":[],"class_list":["post-17189","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-development","entry"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/netmaxims.com\/blog\/wp-content\/uploads\/2022\/06\/onpage-header.jpg?fit=1920%2C720&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/netmaxims.com\/blog\/wp-json\/wp\/v2\/posts\/17189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netmaxims.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netmaxims.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netmaxims.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netmaxims.com\/blog\/wp-json\/wp\/v2\/comments?post=17189"}],"version-history":[{"count":10,"href":"https:\/\/netmaxims.com\/blog\/wp-json\/wp\/v2\/posts\/17189\/revisions"}],"predecessor-version":[{"id":18884,"href":"https:\/\/netmaxims.com\/blog\/wp-json\/wp\/v2\/posts\/17189\/revisions\/18884"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/netmaxims.com\/blog\/wp-json\/wp\/v2\/media\/17190"}],"wp:attachment":[{"href":"https:\/\/netmaxims.com\/blog\/wp-json\/wp\/v2\/media?parent=17189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netmaxims.com\/blog\/wp-json\/wp\/v2\/categories?post=17189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netmaxims.com\/blog\/wp-json\/wp\/v2\/tags?post=17189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}