An Introduction to Facebook’s React JavaScript library

Nowadays, most of us use JavaScript frameworks. That’s because they allow you to abstract the DOM and avoid dealing with HTML.

These frameworks are always cropping up, some good, some bad. One of the better is React, which has been put together by the team at Facebook.

React is a library for building user interfaces that uses JSX, an XML-based template language that compiles to JavaScript and in essence creates a virtual DOM for you.

Using React

To get started head over to the website and download React and the JSXTransformer or copy the CDN links for those files and call them on your page:

<script src="js/react.js"></script>
<script src="js/JSXTransformer.js"></script>

After doing this we can start using React. First we open a script tag but since React uses JSX the tag is a little different then the ones we are used to:

<script type="text/jsx">
    /** @jsx React.DOM */

    // Your react code
</script>

As you can see in order for the JSX to work properly and be translated in the browser right away we need to use a script type of text/jsx and also include the line /** @jsx React.DOM */ because this tells JSX to process the file for React.

For our first piece of code let’s start by creating a simple class that will render HTML on our page. Let’s call this class HelloWorld:

var HelloWorld = React.createClass({

});

Now that we have opened the class we need to add the render() method that will return what to display on the page, so let’s display a simple div on the page:

var HelloWorld = React.createClass({
  render: function() {
    return <div>
         <h1>Hello John</h1>
         <p>Praesent vestibulum dapibus nibh.</p>
     </div>;
  }
});

As you can see, we are returning a div that contains an H1 and a paragraph tag, these are the elements we will place on our page.

This is simply the structure, and before anything happens on our page we need to render this component, and for that we will use the React.renderComponent function that takes two parameters the first being the name of the class we wish to render and the second being where those elements will be placed on the page:

React.renderComponent(<HelloWorld />,  document.getElementById('react'));

In this code all I did was call Hello World using XML-like syntax and in the second parameter added the element we wish to insert the rendered div into and in our case it’s a simple dummy element with the id of ‘react’.

This is as simple as it gets, there are no variables or anything we can change without hammering at the code so let’s start by adding some props that we will fill when we call React.renderComponent to make everything much more dynamic:

var HelloWorld = React.createClass({
  render: function() {
    return <div>
     <h1>Hello {this.props.name}</h1>
      <p>{this.props.description}</p>
      </div>;
  }
});

As you can see we didn’t define any hard-coded names or descriptions we just passed this.props.name and this.props.description (that for now are empty).

After this we call the React.renderComponent function and fill this.props.name and this.props.description with the values we require:

React.renderComponent(<HelloWorld name="John Doe" description="Praesent vestibulum dapibus nibh. Vestibulum fringilla pede sit amet augue." />,  document.getElementById('react'));

Here you can see all that changes is that I added the name and description to the tag and gave them values, and just by doing that we made our code much more reusable and dynamic.

Conclusion

These are the core concepts of using React, the abstraction forms the HTML and the usage of XML-like syntax that greatly aids us when creating UI’s and rendering them on the page.

As you can see when it comes to this point of creating UI’s, React works great and has a very useful and easy to use syntax.