Fig. 8 A Guide for Developers

React.js From Scratch: Part 2 — What is React?

What exactly is React? What are the benefits?

Written by Andy Rossi January 21, 2016

Alright! Part 2!

Pssst. Check out Part 1 if you’re just joining us.

I mentioned before that this will be a very detail-oriented series. Before we get to writing any React code, we need to talk about all the parts that make React tick.

Let’s start with the most obvious question: What is React and why should I use it?

The official docs simply state that “React is a JavaScript library for building user interfaces.” In slightly more descriptive language, React is a tool to help create reusable interface components. A reusable interface component is an element that can appear multiple times in an app or website such as a comment form. If an app contains view information that needs to rapidly change (i.e. a performant interactive user interface), React is a great option. With that in mind, let’s talk about some important features of React.

It’s a library, not an MVC framework.

Let’s talk about what React isn’t. There have been many comparisons between React and other JavaScript… things. I don’t want to say “frameworks” here because React is not a framework, it’s a library. It’s a small part to be used within a larger whole of an application stack. Usually, the comparisons are to other MVC frameworks such as Angular and Ember. An “MVC anything” refers to the Model-View-Controller structure of an application. There are three parts to an MVC framework:

  1. Model
  2. View
  3. Controller

The Model refers to the data model. A simple data model could define a pet. A pet has a name, and is of some kind of animal.

Pet {
    name: "Bingo"
    animalType: "turtle"
}

A View is how this data is displayed to the user. This is a what we see on the front-end: HTML, JavaScript, whatever. A Controller runs interference between the Model and View by taking user input and altering the model data.

Example: Bingo isn’t a turtle. Bingo is a capybara. I will edit my pet bio to reflect this amazing fact.

The controller then updates the model data where necessary. Tada!

React is essentially the “V” in MVC. It doesn’t take care of the data side of things; it only displays the data and gets input from the user. Because of this fact, it’s treated as a library and not a framework. Angular and Ember are frameworks. They can take care of all aspects of an app lifecycle. React just displays things while depending on other libraries and frameworks to get the data to display. Fun fact: you can use React alongside MVC frameworks like Angular and Ember.

It’s fast because of the Virtual DOM.

What makes React a good choice to use as a view is its speed. It’s fast. Extremely fast. Why? Just because.

Nah. I’m joshing you.

There are reasons! The biggest one is how it works with the DOM. The DOM, or “dahm” (it’s really the Document Object Model), is a bit hard to explain without aping a detailed definition from a definitive source. The short definition is that the DOM sets the rules for a document about what can go in it and how it can be accessed and changed. The long definition is contained within these paragraphs that take a couple read-throughs to absorb:

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Essentially, it connects web pages to scripts or programming languages.

A Web page is a document. This document can be either displayed in the browser window, or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) provides another way to represent, store and manipulate that same document. The DOM is a fully object-oriented representation of the web page, and it can be modified with a scripting language such as JavaScript.

This description has been brought to you by our friends at the Mozilla Developer Network.

Now that we know what the DOM is, prepare to have your mind melt just a small amount. React uses what’s called a Virtual DOM. Making changes to the DOM is a relatively slow process. When JavaScript changes something in the HTML (such as changing a title), the DOM first needs to be searched to find the element that needs to be updated. This can then cause a redraw/reflow situation.

A redraw goes through every element in the document and determines their properties such as color and position. A reflow determines all the layout dimensions of each element on the screen, including the children of each element. After everything is calculated, a redraw occurs to paint things onto the screen. This is an expensive procedure performance-wise. Too many redraws can cause flickering or glitching in active layouts.

Instead of making changes directly to the DOM, React makes changes to a Virtual DOM first. React compares its Virtual DOM with the actual DOM, then writes instructions on what specifically needs to change. This may sound more complicated, but it’s actually faster because React knows specifically which parts need to be changed and how, instead of searching the entire document for each change, and then updating everything at once.

Neat.

It’s organized.

React Components, in code, have the interaction logic and markup wrapped together so it’s easier to write and edit. In fact, React uses a version of JavaScript called JSX which allows for straight HTML markup to be used alongside normal JavaScript code.

For example, here’s a snippet of JSX code:

// JSX
var heading = <h1>Hello!</h1>;

If that looks a little strange to you, don’t worry. It still looks strange to me now. Back in the day if you wanted dynamic strings inside a generated HTML element, you had to output HTML as a string while substituting values using concatenation. As you can see, the JSX version is much easier to read.

// olden days JavaScript
var title = "Hello",
    heading = '<h1>' + title + '</h1>';

Above using horse-and-buggy JavaScript, I set a variable called title equal to a “Hello” string. I then placed it in between two <h1> tags (also strings) by using the + character.

This looks a bit messy. The latest version of JavaScript, called ES6 or ES2015 (the naming convention points to yearly feature release cycles), allows for template variables (among many other features). It also looks much nicer than traditional concatenation. Here’s a quick example:

// ES6
var title = "Hello",
    heading = `<h1>${title}</h1>`; // note the back-tick character

console.log(heading);

The dollar sign in front of the curly braces denotes a template string. This will output the following:

<h1>Hello</h1>

JSX allows for the same behavior, but it looks a bit different. Remember, JSX doesn’t need to use strings to generate HTML markup. Let’s use the same example from before.

// JSX
var title = "Hello",
    heading = <h1>{title}</h1>;

Using the curly braces ({}), a variable such as a string can be inserted into the JSX html markup without any need for + and it’s nice, compact, and easy to read. Oh, and it doesn’t need the extra dollar sign that ES6 requires.

With this in mind, we can say that keeping all the logic and markup together makes it easy to write a reusable component. Parts aren’t scattered all across a codebase. That alone is worth its weight in gold.

Once we get to writing actual React code, you will see how JSX can be a boon to component development. We’ll also get more detailed with JSX features.

Ok. I’m sold. Now what?

React comes bundled with some nice features, performance, and organization right out of the box. But, a few more boxes are needed to get these features into a browser. Browsers don’t support JSX, and ES6 features aren’t supported natively in every browser. In fact, we didn’t even get into those details yet. BUT WE WILL!

In the next installment, we will talk about the necessary tooling to get React up and running: task runners, transpilers, and any helpful plugins that should come along for the ride.

Part 3 is now out. Continue your journey.


Further reading

Here are some additional articles for the curious.

What Is React? - This article features a nice animated story explaining the Virtual DOM. The Virtual DOM can be a heavy concept, so the more info you can find, the better.

MVC for Noobs - Enjoy some more information about MVC structures. Do it!