React - the rise of the JavaScript powerhouse

After taking a look at Vue and Angular it's time to check out the last of the big three - React.

In terms of popularity and user base it might be the biggest of the three so let’s look at how it got here. It's also worth mentioning there has been a lot of discussion on if React is a framework or a library, with both sides of the argument nitpicking the definitions. How you call it isn't really of the utmost importance when you’re actually using it, so let’s just call it a library since that’s how it's referred to on its official website.

Hello World!

React was created by Jordan Walke, a software engineer working for Facebook and it first appeared as FaxJS in 2011. The same year it got its first use in Facebook’s newsfeed and a year later on Instagram.com. May 2013 saw the big launch with React becoming opensource and publicly available, it was a bit of a rocky start with many being sceptical about its usefulness. Later the same year it became available in Python Applications and Ruby on Rails. By 2014 was steadily gaining users and the community started growing quickly. 2015 was the big break and the start of mainstream recognition as big companies like Netflix and Airbnb started using the library. The following years saw numerous improvements with the most recent version 17.0 coming out on October 20 2020.

JSX and Virtual DOM

Shedding some light on the background is fine and all, but the main ‘selling point’ (don't worry, it's opensource) of the library are its features. React is basically a frontend library aimed at helping developers build user interfaces. The most basic advantage, as with any library, is that it provides reusable code which saves time and reduces the chances of coding errors. Obviously that’s not all it does, ever since its initial release two features have been the backbone of React

JSX: React uses JSX (a syntax extension to JavaScript) instead of basic JavaScript for templating. It lets you easily modify the DOM using simple HTML-style code and is compatible with all web browsers.
Virtual DOM: React creates a data structure cache which traces the changes made and then updates only the relevant part of the DOM. Let's say a user leaves a comment under the article, normally for it to appear the entire DOM would have to be updated, while React scans the DOM for changes and updates only the relevant segment. This makes for an important performance boost since it means way less computing power used and significantly shorter loading time. While that might not sound like much, think about the scale, we’re talking here about something made for Facebook and not some small blog with a handful of users commenting.

Simple React component using JSX

Source: react.dev

Going native

With the basic features out of the way we can look at some things that were added later. React Native was released in March 2015 letting developers create natively-rendered apps for iOS, Android and a multitude of other platforms. It quickly became one of the most used tools for mobile app development and was adopted by big companies like Skype, Soundcloud, Ubereats or Walmart. What’s the difference? Well ReactJS still uses some CSS and HTML elements while React Native uses native mobile UI elements. As cross-platform is very highly valued in mobile development it's little wonder why it quickly became so popular.

React Native allows you to build for Android and iOS using React

Source: reactnative.dev

Hooks

The new feature in version 16.8 released early last year was adding Hooks. Hooks are basically functions that let you use state and other React features without writing a class component. This way you can ‘hook into’ React and use state and lifecycle methods inside functional components. They are reusable and provide better code composition and flexibility in moving around the component tree. With Hooks functional components can be used for almost everything from rendering UI to handling state and logic. You’ll find some built-in Hooks shipped with React and since they are reusable you’ll find lots of useful ones created by others or you can always create your own. There are two main rules to Hooks:

Do not use Hooks inside loops, conditions, or nested functions - this ensures that Hooks are called in the right order each time a component renders and their state is preserved between multiple calls.
Only use Hooks from inside React Functions - this ensures all stateful logic in a component is clearly visible from the source code.

Example of useState, a basic React hook

Source: reactjs.org

More to come

Version 17.0 was released about a month and a half ago and it was the first major release without any developer-facing features. The update was primarily focused on making it easier to upgrade React itself. It's not like that’s it though, the team even called this update a stepping stone while they work on new features. So if those mentioned above did not convince you there’s more coming soon. Oh and if you’re up for some more convincing, next time we’ll take a look at some of the most useful component libraries for React.