Comment

Very short and to the point. It’s a very nice introduction to React, assuming good knowledge of HTML, CSS and JavaScript. It uses traditional ES5 JavaScript. I practiced what I learned in this course in this pen.

Basics

Let’s meet the basics of React by building a minimal Hello World! example. Note that since we are writing this summary after having met React with the video tutorial “React.js: Getting Started”, we will be using traditional pre–ES6 JavaScript. Therefore please refer to the official documentation about React written without ES6.

Installation

There are several ways to install or refer to the React library as explained in the installation page of React. For example we can include the corresponding script tags into our HTML file:

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

Root element

The first thing that we need to modify the HTML with React is an element that it will be able to control, like for example a basic div#root:

<div id="root"></div>

Component

Then we create a React component using the function React.createClass, which receives a JavaScript object as parameter. The only required key of this object is render, which contains a function that will return a representation of the HTML element that we want to display:

var Text = React.createClass({
  render:  function(){
    return (
      <h1>Hello World!</h1>
    )
  }
});

The value of the return statement is a special syntax called JSX, which is a kind of syntactic sugar that gets translated by React into regular JavaScript code, in this case: React.createElement('h1', null, 'Hello World!');. Files containing JSX must be defined in a file with the .jsx extension to let React know that it has to be preprocessed. It might look a bit strange at the beginning to see a kind of HTML markup embedded into JavaScript, but you quickly get used to it and it has the nice advantage to let us write the elements that we want to render in a syntax very close to the actual targeted HTML.

Rendering the main component

Once we have defined the element that we want to display, we render it on the root node that we prepared at the beginning using ReactDOM.render:

ReactDOM.render(
  <Text />,
  document.getElementById('root')
);

Running example 1

You can check this basic Hello World! example with the following pen:

See this pen by @rbf on CodePen.

Components

The basic things to know about a React components is that they can be reused and they can have both properties and state.

Reusability

Components can be reused multiple times, and they can be nested. A useful pattern might be to created a Root or Main component that is the only one being rendered directly on the HTML, and having this component render the rest of the components.

var Text = React.createClass({
  render:  function(){
    return (
      <h1>Hello World!</h1>
    )
  }
});

var Main = React.createClass({
  render:  function(){
    return (
      <div>
        <Text />
        <Text />
      </div>
    )
  }
});

ReactDOM.render(
  <Main />,
  document.getElementById('root')
);

As in this example we can also render standard HTML elements like divs, spans and all the usual things. Note however that those start with a lowercase letter whereas our custom elements have to start with an uppercase letter.

Properties

To tweak the behavior of an element we can use properties when adding the component to its parent. Properties are given with similar syntax as the XML attributes, i.e. <Text foo="bar"/>. The component itself can then access the property values with this.props.foo. When embedding the property value within the JSX it has to be enclosed with a pair of curly brackets.

var Text = React.createClass({
  render:  function(){
    return (
      <h1>Hello {this.props.name}!</h1>
    )
  }
});

var Main = React.createClass({
  render:  function(){
    return (
      <div className="container">
        <Text name="Major Tom"/>
        <Text name="Ground Control"/>
      </div>
    )
  }
});

Note that the HTML class of the component is given with the property className instead of simply class.

State

Each component can also have state. Whereas the properties are not supposed to change during the lifecycle of the component, the state can (and probably will) change. And one of main interests of React is that whenever the state of a component changes, React will re-render the needed components automatically (and in a very efficient way).

The state is initialized as a JavaScript object returned by the function under the getInitialState key of the parameter object of the React.createClass call. The state is updated by passing an object with the keys that need to change to this.setState().

var Text = React.createClass({
  getInitialState:  function() {
    return {
      times: 1
    }
  },
  increaseTimes: function() {
    this.setState({times: this.state.times + 1});
  },
  render:  function(){
    return (
      <h1 onClick={this.increaseTimes}>Hello {this.props.name}! x{this.state.times}</h1>
    )
  }
});

var Main = React.createClass({
  render:  function(){
    return (
      <div className="container">
        <Text name="Major Tom"/>
        <Text name="Ground Control"/>
      </div>
    )
  }
});

We call this.setState() within a new function that we have created in a new property increaseTimes on the original component object. To bind this function to the mouse click event, we use onClick={this.increaseTimes}. There are a lot of events we can bind behavior to.

Running example 2

You can check this example with properties and state with the following pen:

See this pen by @rbf on CodePen.

A more complex pen is referenced in the Comment section at the beginning of this article.

Conclusion

This is a quick overview of the basics of React based of the “React.js: Getting Started” video tutorial, with the aim of being a reference of the things learned. The video tutorial is very worth watching since is much more interactive as reading this dry text.