What is React?

It's the 🎊 new year 🎉 and it's a great time to learn some new skills! React is surging in popularity and for good reason: it is extremely useful.

But when developers consider learning React, they often come up against a problem: they aren't sure what it is.

You've probably read multiple 'what is react' descriptions at this point, but you might have found them a bit lacking. Here are some that I found:

React is...

... a JavaScript library for creating user interfaces.

... a component-based view abstraction.

... a DOM abstraction used to avoid dealing directly with HTML Elements.

... the V in MVC.

All of these are true, but they also describe tons of other front-end JavaScript frameworks.

I believe React is best described by the problem that it solves.

The Problem React Solves

Before React (and similar modern libraries), keeping the DOM in sync with your data model was a pain.

There were generally 2 approaches:

1. Re-render large sections of the DOM when your data changes.
2. Write DOM-manipulation functions to sync the DOM with your data.

Both of these approaches had major issues, which you'll see as we go through an example.

Shopping List App Example

Let's imagine making a simple shopping list app without React and see what happens.

You've got some JSON data:

["lettuce", "carrots", "cake"];

Rendering that is easy right? You could use a handlebars template like this:

<ul>
  {{#each list}}
    <li>{{this}}</li>
  {{/each}}
</ul>

And then you'll have your list:

• lettuce
• carrots
• cake

Now you want to support adding to the list. If the user were to add coffee beans to the list, the data would become:

["lettuce", "carrots", "cake", "coffee beans"];

You've updated your data model, now how do you update the DOM?

How would you do it?

Pre-React, there were 2 options:

1. Re-render the list.
2. Write a function to create and add a new DOM element.

Let's explore each approach in turn.

Approach 1: Re-Render The List

If you re-render, the browser will have to destroy and create many DOM elements. This approach has some problems:

• Slow with large numbers of elements.
• Event handlers will be lost.
• Focus state will be lost.

We don't have any event handlers or focus state in this example, but you can imagine adding click handlers to each list item.

Approach 2: DOM Update Functions

You could write a function that updates the DOM by adding an element to the end of the list:

function addItem(itemName) {
  var node = document.createElement("li");
  node.textContent = itemName;
  document.querySelector("ul").appendChild(node);
}

It works! And it's fast!

But as you add features, this approach breaks down. Do you want to write DOM update functions for each of these scenarios?

• add item to top
• add item to middle
• remove item
• list sorting
• checkbox state

Writing DOM update functions for each type of data change quickly bloats your codebase and creates greater potential for bugs.

How React Solves The Problem

With React, developers generally use JSX, which is similar to HTML. For our shopping list, the JSX might look like this:

<ul>
  {this.props.items.map(function(item) {
    return <li key={item}>{item}</li>;
  })}
</ul>

Whenever your data changes, the above template will be run again. This is just like our 're-render' approach above, with one key difference:

React renders to a virtual DOM first, then it compares that to the real DOM, and only makes changes to the real DOM as necessary.

In our example, if you add coffee beans to the list and re-render, React will figure out on its own that a single DOM element needs to be created and added to the end of the list.

Wait, so, what IS React?

You know that React creates a simple way for JavaScript developers to update the DOM to match a data model. That's all it does!

If you want a one-liner:

React is a JavaScript view library (similar to a template engine) that enables fast DOM updates via a 'virtual DOM'.

Is that it?

Yes! That's the gist of what React really is.

Most of the other features you might associate with React actually take place in other libraries: data storage, routing, and networking. None of that happens in React.

I cover it all on my mailing list - not just React, but also all the tools you'll want to use with it. So sign up and we'll learn React together in 2016!