My First Look at React

Introduction

Tired of seeing React constantly popping up on Twitter, blogs and job specs, I decided to take a deep dive myself to see what all the fuss is about. I’m familiar with JavaScript/TypeScript and have previously used various client side libraries such as Durandal and Aurelia. Another big reason I really wanted to find out more about React was due to the amount of people using it; data from the stackoverflow 2018 survey showed it to be one of the most popular frameworks out there, as well as big companies making use of it, i.e. FaceBook, Netflix and PayPal to name a few.

What is React?

In essence, React is a small JavaScript library for building user interfaces; It’s not a framework for building apps like Angular or Aurelia. The main fundamentals of React are components: everything is a component; your entire app will be a component, which contain components, which will have their own components etc. This works into the uni-directional data flow, where all your data flows down into your components, never up.

One important part of React is state. Components can be stateful or stateless, depending on whether the behaviour of the component is dependent on it’s state. Stateless components can also be referred to as dumb components. An example would be a component that displays data using some properties passed down to the component. The thing you need to remember about the state is that is immutable, and you should only ever update the state using React’s setState method, else the UI won’t update. We’ll see why this is important in the next part.

Here is an example of a dumb React component, which take props (parameters passed from its parent):

class Test extends Component {
  render(props) {
    return (
      <div className="card">
        {" "}
        <div className="bg-info">
          {" "}
          <h4 className="card-title">
            {this.props.user.forename} {this.props.user.surname}
          </h4>{" "}
        </div>{" "}
      </div>
    );
  }
}

This is a JSX, or JavaScript HTML file, and contains a Test component. You will now be able to use this class in other components like so:

class TestContainer extends Component {
  render(props) {
    return (
      <div>
        {" "}
        <Test user={props.user} /> <Test user={props.user} />{" "}
        <Test user={props.user} />{" "}
      </div>
    );
  }
}

One thing you may have noticed here is the render method; every component within React must have a render method, which returns some HTML.

How does it work?

React is known to be fast for UI updates. This is due to how it updates the UI. As I’ve said previously, state within React is immutable, so if you update it using the React’s setState, it will create a copy of the state object, instead of amending the current state. React can then compare the previous state to the new state to see if it’s the same object or not, i.e. to see if it’s changed or not. If the state has changed, React will know to update the UI. This is much faster than checking individual properties to see if they’ve changed.

Virtual DOM

React updates the UI using something called a Virtual DOM. As it sounds, this is a virtual representation of the DOM. Updates to the DOM basically happen in 5 steps:

1. React holds a virtual representation of the DOM when the components are first rendered.

2. You update state.

3. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects (components) have changed (“diffing”).

4. The changed objects, and the changed objects only, get updated on the real DOM.

5. Changes on the real DOM cause the screen to change.

So if you update the state, only that component, it’s children components and any other components which use that data, will be updated. The following image illustrates this: