So, what exactly is react.js?

Please, do not take the following too serious, I am just trying to make react a little bit more understandable than the traditional explanations!

After spending many months in the react.js ecosystem, I am slowly beginning to understand what it actually is and, to a lesser extent, what it does. For anyone that has dipped into react and its cousin react native I am sure you will understand what I mean – it is not an easy concept to understand.

I have worked with code for many, many years and I love coding and the logic that goes behind it. Most languages have many similarities, if I were to be academic and compare it to human languages, I could say most languages build off of Latin routes just as computer code is based off some form of C. This means the logic flow and syntax of many computer languages are somewhat recognisable to most programmers. Ergo, as react is based on JavaScript – surly knowing JavaScript means react should be a doddle right? Well, it seems not. I am sure there are plenty of folk out there who find starting off with react very easy, but there are many seasoned programmers that do struggle a little.

What can be more frustrating are employers hearing about react and knowing it’s the “next big thing” and thinking they need to jump onboard. “Quick, get hold of an agency and get me a react engineer with oodles of experience to come in here for a couple of months and build the best web experience out there!” This is because many companies will not really understand react and what to expect from a developer/programmer.

I do get asked what is react and what can it do often. Very often! So, I thought I would try and address some of its key features here. I am not about to write another – react was built by Facebook blahh blahh and is about building reusable components blahh blahh because you can read that anywhere. What I want to try and do, is break it down and contextualise it and relate it to things we already know. I think once you understand its core, you can begin to understand how and what is does. React is simply amazing! But it is far from straight forward. Anyone that has tried to follow a tutorial gets bogged down in the constant installing of dependencies and libraries and connecting this to that and passing props down but not up, changing state and……wait! What is all that? I understand I need to, because you just told me, but why all the dependencies? OK, so let us look at that first…

React and all those dependencies!

As you may know, react is a JavaScript library. You still use JavaScript, but through a new library. So, if we return to our Latin – react is like modern Italian with JavaScript being its Latin master. However, for me this over simplifies react. It is not as straightforward as being an updated version of JavaScript because it works differently. I think it is more like the modern English language that borrows words and phrases from other countries and also feeds them back. English is becoming infected with Americanisms (a subject for another time) but is still recognisable as the same umbrella language. It may seem as though I am wildly digressing but think of react as a library – or modern version – of JavaScript. Now for a browser to understand react we need to transpile react (ES6) back into JavaScript (ES5).

Think, perhaps, of a parent translating their kids Americanisms and text talk to their grandparents so when they say that was literally awesome, the grandparent does not think they are talking about an epic novella. Or if the kid texts “thts std!” the grandparent doesn’t think the poor kid needs to go to the clinic, but rather thinks that is a standard response. OK sorry, so to transpile react (modern JavaScript ES6+) into browser readable JavaScript ES5 we need to grab a transpiler to do the work for us. The most commonly used transpiler is Babel. To use Babel however, we need to install and call it. But what actually is that?OK, so we call react a JavaScript library. This confused me at first, but I think I get it now. If we think of JavaScript (ES6 upwards) as the library, then react is a big book in that library. Now to use it, we always start our script off with

import React from ‘react’;

import ReactDOM from ‘react-dom’

providing we have already installed react and node via the command line or terminal using perhaps npm or yarn install. We can think of npm or yarn as our book manager. It grabs the relevant book for us and puts it in a nice folder, so we can access it later. By installing webpack, we are grabbing a large encyclopaedia! It has plenty of sections we will use, but it also has many volumes and pages we will never use. However, webpack is a handy package of books for us to install and use without too much hassle. Alternately, we can also pick and choose what books we want to use. As the library is open source and well stocked, it is fairly easy to find a book that answers a problem for you.

I recently wrote an app that needed to pick a date range from a dropdown calendar. Yes, I could spend many hours making my own dropdown calendar, or I could think…mmm…I know Airbnb use that type of thing and they use react. So, I went over to the Airbnb section and installed it into my booklist (node_modules folder). I then imported

                               import { DateRangePicker } from ‘react-dates’;

react-dates is a large book based on the Airbnb calendars and here I just chose the part of the book relating to the date range picker. Later I also imported the section about the single date picker, so I could now choose between a date-range and a single date for my app with very little fuss. The main fuss was converting the American formatted date into a UK formatted date of day/month/year.

As I continued to build the app, I found I also needed to grab bits from other books in library too. Not only was I able to use sections (functions) from other books (components), I was also writing my own functions and components that I could also import into my app. Here lies the beauty of react – reusable components! Here is an example of the imports used in just my app.js file

Remember – if we want to import a component created by a third party, typically we need to install it first into our bookshelf (node_modules folder). That is why it seems as though we are constantly installing new things on the command line, because we need to get the whole book, so we can import the required section.

So then, a react app is made up of many components – some borrowed, some reused, and some bespoke. React depends on these other libraries to expand its core and functionality.

The virtual DOM explained

One of the main advantages of using react is its render speed. It loads from the client side rather than back and forth to the server. But what does that actually all mean? Just what is a Single Page Application (SPA). I was always told to have several pages that linked together with various details broken down – a home page, an about page, maybe a contact page and where to find us page. Maybe even a testimonials page? This is known as a Multi-Page Application (MPA). An SPA was traditionally frowned upon because the user had to scroll through loads of “stuff” to find the bit they wanted. Sure you could pop in hyper-links etc, but the idea of one extremely long page as opposed to focused multiple pages is a concern for traditional websites.

React however, is different. You tend to create the SPA, but instead of one long unwieldly page, you have several components than can be swapped out and new ones loaded in. The speed at which this happens is extremely fast because the page only needs to render the updated or changed component. But what does that mean?

Traditionally, a site is called by the user and then delivered to their screen. So, a request is sent – either as a URI or maybe a google search. The address is resolved, and all the site details are retrieved from the site’s server. This is sent to the user’s computer to be read and then rendered. So the HTML is loaded (the text) the CSS (style) is loaded and applied to the text. Any script is then loaded and added to the page and then finally rendered as a webpage to your screen. To update the screen (say the news) you need to press a button or reload the screen. So, the browser (client) sends a request back to the sites server to get the latest version of the site – this is regardless of if anything has changed or not. The whole site comes back, the text gets sorted – styled – and any JavaScript re-added. If nothing has changed, it still takes several seconds (depending on internet speed) for the data to be retrieved, compiled and rendered. The bigger and more interactive the site, the more back and forth – re-rendering, styling, reading, etc. You get the picture!

With react, this is no longer the case. All the data is still retrieved from the server initially, but then the magic happens. A copy of the data is made, that is displayed to the screen. If a change is made – (either by the client or sent direct from the server) the browser will compare the new data with the data “snapshot” already displayed. Once compared, the new data is added to the screen (the virtual DOM) and only that is re-rendered. We can think of loose-fitting Lego bricks. You get given a diagram to build a wall (our SPA). Each brick has its place and it is an exact copy of the original picture. Now maybe you want to update the twitter feed to show your latest tweets. Only the twitter brick has changed and therefore, only the twitter brick needs to be replaced. This is quick! It only replaces what is new and only when it is new – the process is called diffing by the way.  What you must remember is that the image displayed is an exact copy of the original. So, the Document Object Model (DOM) is the normal page, the standard web page built in HTML. However, react is not HTML and does not write to the DOM. Instead react makes a virtual DOM – the copy! This is rendered and stays on screen until an update is called or triggered. I could go into more detail, but I am sure you are bored already!

The ideas above are just my observations of how react works, I could be wrong. If I am – let me know! I am just trying to help break down what react is into a user friendly guide.

Please follow and like us: