10 December 2019
What is React used for? 8 examples of React framework web apps
What is React JS?
React’s history starts in 2011 when Jordan Walke, Facebook specialist responsible for Facebook Ads, created FaxJS, the early prototype of soon-to-be hit framework. His efforts had a specific purpose – Facebook was really struggling with managing their advertising tool and desperately needed a solution that would handle this situation. According to Walke, “making a change on this product is terrifying like potentially lose a day of revenue because you’ve missed a semicolon or something”. The development team worked their assets off full-time, nights and weekends to make their new framework, React JS, reality.
The latest massive milestone in React’s framework history was React 16.8 that premiered on 16th February 2019. It introduced React Hooks that revolutionized the way React components are created. We already covered this topic in our previous article about React components – useMemo hook. React JS is constantly being developed and already evolved to React 16.12 version. I’m pretty sure we can expect more from React creators in the future.
React JS benefits
What makes React JS so popular? Let’s take a look at the list of advantages:
- Designed for scaling and reusable – the component architecture is perfect for writing the code once and then use it again in other applications. Normally, when an update happens, one component can affect others and ruin the whole app – not with React components! Reusing system components with internal logic is great for code’s maintenance, growth and is probably the most important benefit of this framework.
Mobile devs, have this one – React Native is technically a separate tool, components are different but you CAN say that the way of writing code to web and mobile versions is very similar. Having said that – no more mentioning React Native in this article!
- Saves time and money – if a developer can use the code again and again, logically they save lots of time and budget that would be otherwise spent on a repetitive task.
- Simplicity – if you had any previous experience in software development, it’s quite easy to understand and learn React JS from scratch. It’s component-based and most of the React components are a single function that performs from top to bottom, hence why it’s easy to understand how the code works.
- Super easy to test – there are special libraries created to test React like react-testing-library.
- Performance – React stores it’s own copy of the DOM (Document Object Model) tree called Virtual DOM. When something changes in it, React transfers those changes from the virtual tree to real one and updates the appropriate subcomponents.
- Support – React JS is created by Facebook and hordes of independent contributors, so there’s no way it’s going to disappear or discontinue in the foreseeable future. That means your web applications are safe and sound.
What companies use React in their web applications?
Are you ready for a display of crème de la crème, Forbes and Fortune A-listers, tech leaders, user-favourites who put their money on React JS?
No surprises here – Facebook is the main reason why React was created in the first place. React JS implemented in Facebook’s frontend allows for notifications to be displayed for the user in real-time. This way there’s no need to reload the page every time you suspect you got a new message, comment or post on your News Feed.
When Instagram was acquired by Facebook in 2012 it hadn’t a web application yet – hence why developers quickly rolled up their sleeves and got to work. The web version of Instagram is fully based on the ReactJS library. Similarly to FB’s case, React is necessary to display photos on the map in real-time or directly from selected location and support hashtag counters (really helpful for social media marketers).
💬 WhatsApp Web
Just like Instagram, WhatsApp has been a Facebook product for a while now. And just like Instagram – its web version is based on React JS. AND just like Instagram, it’s all about displaying messages in real-time. You can use this web app without installing any applications, plus you won’t leave any information behind on your device. WhatsApp Web uses WebSockets for communication so the server knows all the time whether the user is online, writes a message or reads the delivered ones.
Gamechanger in streaming services with 125 million subscribers around the world, Netflix has been rewritten to React JS in 2014. The growing platform needed an improved start-up and loading speed, performance, scalability and UX. Looking at happy users, Netflix definitely benefited from this change.
Nearly three million users operate on Atlassian tools – at The Software House, we use Confluence, Jira and Bitbucket. Atlassian decided to pick React JS because their main priority was re-usability – since it’s deployable to the web, mobile and desktop, their developers can recycle libraries between all the versions.
Disney is a powerhouse and their new service – Disney+ will be their weapon in the upcoming battle for the streaming market. The web application is written in React and uses Redux to control the app’s state and store downloaded information about TV series and movies.
📧 Yahoo! Mail
🔫 Battlefield 1
In this video game, React is used to build the user interface. React allows writing your own renderers, which means the execution of the application code doesn’t have to spit out HTML but any other thing, e.g. information for the computer game engine on what to display on the screen.
It doesn’t end here – the list of all the big companies that had/have a love affair with React is quite long and includes BBC, Dropbox, IMDb, PayPal, Imgur, American Express, Dailymotion, Lyft, Uber, New York Times, Reddit, Archive.org, Airbnb, Urban Dictionary, Coursea, OK Cupid, Variety, The Economist, Buffer, HBO, Product Hunt, and much more…
The Software House works in React too
In our portfolio, we have lots of successful React projects including a GPS tracker Weenect that shows you the location of your pet, child or elderly person on the map in real-time, or Synerise Storybook – a tool for developers who work on the easily-personalised marketing dashboard with reusable UI design system components.