Facebook and Instagram built a nice little JavaScript library called React. But what exactly is it? React is meant to be used to build large applications that use data that changes over time. You don’t really have to care about the rendering part, manipulating the DOM and so on, React does all this for you. The nice part is, that React only updates the parts of your application that actually need to be refreshed once the underlying data changes which makes it nice performance wise.

Prequesites
I assume you already have a good knowledge of JavaScript, this is the minimum requirement you should bring with you, there is no need to be familiar with other libraries like jQuery. To get started, create a directory for your project on your webserver or locally and create two files, index.html and components.react.js. More isn’t necessary for now.

To get started easily, copy and paste this into your index.html

<!Doctype html>
<html>
  <head>
    <title>My React Component</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script type="text/jsx" src="components.react.js"></script>
  </head>
  <body>
    <div id="content"></div>
  </body>
</html>

What you will learn
After finishing this tutorial you should have a basic idea of how React works and how you can use it to build your next webapp with ease. We will build a very basic component that takes an array of objects and displays them in a list and allows the developer to add and remove items to/from that list.

When thinking about our objective, we should think about the different parts that will be involved. We will have the List itself and the list will consist of n items that each represent an object from our datasource. The first part will be the component that renders a single list item, so lets get started.

var ListItemComponent = React.createClass({

    render: function() {
      return (
          <h1>Hello World!</h1>
      );
    }
});

The above code is the most basic React component, all it does is rendering an h1 element with the text Hello World!. Remember, every React component has to implement at least the render function to produce some output. For our list this isn’t really useful, so let’s remove the <h1>... from the render function and write the real code that will represent a list item. We will use a HTML <table> to display the list, therefor, the ListItemComponent should render a <tr> element.

var ListItemComponent = React.createClass({

    render: function() {
      return (
          <tr>
            <td>{this.props.title}</td>
            <td>{this.props.priority}</td>
          </tr>
      );
    }
});

As you can see, this is pretty straight forward. A nice thing is that just like with XHP, HTML becomes a valid expression in React, no need to wrap all of it in quotes. As we have our ListItemComponent set up, we can look into writing the parent List component that will tak a list of items as an attribute and renders them with the help of our ListItemComponent

var ListComponent = React.createClass({
    propTypes: {
      items: React.PropTypes.array,
    },

    getDefaultProps: function() {
      return {
        items: [],
      }
    },

    render: function() {
      return (
        <table>
          {
            this.props.items.map(function(item){
              return (
                <ListItemComponent title={item.title} priority={item.priority} />
              );
            })
          }
        </table>
      );
    }
});

The ListItemComponent has two more methods, propTypes and getDefaultProps. This is to ensure that the component a) only accepts an Array for the items property and a default value for items.

In our render function we then loop over all the items that were passed into the component and render a ListItemComponent for each of them, displaying the title and the priority.

The complete picture
Now you have a basic understanding of how a React component is built and how it can help you to build better apps with JavaScript. To actually render the ListComponent now, you cann add this code to the components.react.js file. This should render a basic list on pageload using our newly written React component.

$(function() {
  var items = [
    {
      title: "Some title",
      priority: 1,
    },
    {
      title: "Another title",
      priority: 2,
    },
    {
      title: "Foo",
      priority: 3,
    },
    {
      title: "Bar",
      priority: 4,
    },
  ];

  React.render(
    <ListComponent items={items} />,
    document.getElementById('content')
  );
});