Learning React.js: Getting Started and Concepts

Introduction

Update: This article has been updated for React 16!

Today we are going to kick off the first installment in a new series of tutorials, Learning React, that will focus on becoming proficient and effective with Facebook's React library. Before we start building anything meaningful, its important that we cover some base concepts first, so lets get this party started.

What is React?

React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React.

One of it's unique selling points is that not only does it perform on the client side, but it can also be rendered server side, and they can work together inter-operably.

It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

How does the Virtual DOM work?

Imagine you had an object that you modeled around a person. It had every relevant property a person could possibly have, and mirrored the persons current state. This is basically what React does with the DOM.

Now think about if you took that object and made some changes. Added a mustache, some sweet biceps and Steve Buscemi eyes. In React-land, when we apply these changes, two things take place. First, React runs a "diffing" algorithm, which identifies what has changed. The second step is reconciliation, where it updates the DOM with the results of diff.

The way React works, rather than taking the real person and rebuilding them from the ground up, it would only change the face and the arms. This means that if you had text in an input and a render took place, as long as the input's parent node wasn't scheduled for reconciliation, the text would stay undisturbed.

Because React is using a fake DOM and not a real one, it also opens up a fun new possibility. We can render that fake DOM on the server, and boom, server side React views.

Getting Started

To get started with React, install the React CLI tool (Create React App) and run the command to create a new app:

In React, components mount to an element, so in this example we can use the div myDiv as it's parent container.

While this is the easiest way to get started, when its time to actually build something, its probably a good idea to use Browserify or Webpack (Create React App uses Webpack) to set your components up in separate files.

The Basics

If you haven't seen one of these before, you are probably wondering what Javascript/HTML chimera sorcery is taking place right now.

JSX

It's called JSX, and it is a Javascript XML syntax transform. This lets you write HTML-ish tags in your Javascript. I say HTML-ish because there are a couple gotchas. You are really just writing XML based object representations.

For regular html tags, the class attribute is className and the for attribute is htmlFor in JSX because these are reserved words in Javascript. More differences can be reviewed here.

Now you don't need to use JSX, here is what the syntax looks like without it:

In our first snippet, did you notice the /** @jsx React.DOM */ at the top of our script? This is important, it tells React that we are using JSX and that this markup needs to be transformed, so you need to include it when using JSX syntax.

Components

When using the render method above, our first argument is the component we want to render, and the second is the DOM node it should mount to. We can use the createClass method to create custom component classes. It takes an object of specifications as it's argument. Lets create one below:

Specs, Lifecycle & State

The render method is the only required spec for creating a component, but there are several lifecycle methods & specs we can use that are mighty helpful when you actually want your component to do anything.

Specs

mixins - An array of objects, used to extend the current component's functionality.

There are several more specs & lifecycle methods that you can read about here.

State

Every component has a state object and a props object. State is set using the setState method. Calling setState triggers UI updates and is the bread and butter of React's interactivity. If we want to set an initial state before any interaction occurs we can use the getInitialState method. Below, see how we can set our component's state:

Unidirectional Data Flow

In React, application data flows unidirectionally via the state and props objects, as opposed to the two-way binding of libraries like Angular. This means that, in a multi component heirachy, a common parent component should manage the state and pass it down the chain via props.

Your state should be updated using the setState method to ensure that a UI refresh will occur, if necessary. The resulting values should be passed down to child components using attributes that are accessible in said children via this.props.