You've probably heard about the popular JavaScript framework by Facebook - React. It is used by many popular websites, including Facebook itself and Instagram. In this article you will find 5 practical examples that have been built with React, and which will give you a head start with the framework.

Update (Feb 18th 2016): We've made the examples work with React 0.14.7

What is special about React?

React is built around the concept of components. This is in contrast to frameworks like Angular and Ember, which use two-way data bindings to update the HTML of the page. In my opinion React is easier to learn than Angular and Ember - it is much smaller and plays nicely with jQuery and other frameworks. It is also extremely fast, because it uses a virtual DOM, and syncs only the changed parts with the underlying page (accessing the DOM is still the slowest part of a modern web application, which is why the framework gets a performance boost by optimizing it).

However, the flip side is that it takes a bit more code in React to achieve the same things that can be easily done with a data binding, as you can see from the examples below. For a comparison, see our article about Angular.

How to use it?

To use React, you need to include a single JavaScript file in your page. Facebook kindly provides a CDN that you can directly link to:

<script src="http://fb.me/react-0.10.0.min.js"></script>

This gives you access to the global React object, which holds a number of useful methods, some of which you can see in these examples. The recommended way to write React web apps is by using a language called JSX. This is a slightly enhanced version of JavaScript that allows you to initialize React components by using an HTML-like syntax directly in your code. It is compiled down to JavaScript before being interpreted by the browser. JSX is completely optional - you can use regular JavaScript if you prefer.

But enough talk, let's see some code!

1. Timer

As I mentioned, the building blocks of react apps are components. They are created by calling React.createClass() with an object of options and methods. Each component has state (an object with data) and each is in charge of their own rendering - the render() method is called whenever the state changes. Here is an example for building a simple timer:

(Click the Result link to see the example it in action)

You can embed any JavaScript expression within braces {} when creating a component. In this example, we pass a start date, that will be used in every tick() function call to calculate the elapsed seconds.

2. Navigation menu

Let's see how we can handle click events in React by building a navigation menu:

You've probably noticed from the code of these examples that we use attributes like className that don't actually exist in HTML. This is because when you return a new <p> element you don't return HTML, but an instance of the component React.DOM.p . You can read more about this here.

3. Real-time search

We've learned time and time again that people hate to wait. Here is how you can use React to build a real-time search experience. (For a comparison, see our version with AngularJS).

This example also demonstrates another important concept in React - updates of your controller's state should affect the HTML, not the other way around. In this instance, once you've set the value of the text box, it will stay the same, ignoring user's key presses, unless you update it in the onChange function (you can change this behavior, but it is the recommended way of doing things).

4. Order form

The real power of React comes when you combine multiple components. This allows you to structure your code better and to introduce a separation of concerns. It will also make your code reusable across different parts of your web application. Here is an example of an order form that helps clients plan their budgets (see the Angular version here):

The first issue that arises when combining multiple components is how to make them communicate. One way is to pass the data that you need in attributes while initializing them. This only works from parent to child components. For communication in the other direction, you can pass one of the parent component's methods as an attribute to the child. The child can then call this method, and notify the parent of events. You can read more about this here.

5. Image app with AJAX

This example will demonstrate how you can combine react with jQuery, and how to load results via AJAX. Whereas frameworks like Angular have their custom approaches when doing AJAX, React lets you use whatever other libraries you are comfortable with (see the Angular version here).

Due to changes in the Instagram API, this demo is no longer working. However, the rest of the code, including the AJAX request, is still correct.

Notice that our example uses the same Picture component when rendering the picture list and the favorite list. This reuse is one of the benefits to organizing your code into components.

Test what you've learned

What is React? A JavaScript framework

CSS preprocessor

Language that compiles to CoffeeScript Who made React? Google

Twitter

Facebook What is React used for? Adding variables to CSS

Building web apps

Making websites cloud-ready What is special about React? It brings HTML6 features to today's browsers

Virtual DOM

Database integration Which language is this? JavaScript

CoffeeScript

JSX What does this component do? Prints "Hello World!"

Prints "Hello", followed by the name attribute that was passed when initializing the component

Prints the numbers from 1 to 10. What does this code do? Provides an initial value for the component's state

Tells how many times the component should be focused

Seeds a random number generator What does this code do? Initializes a new UL component, and generates LI components for each entry in the items array property.

Initializes a Google Map for every location in the items array

It won't work Great job! . Now make your friends jealous: Answer 12 of 22

Where to next?

React allows you to give clean structure to your application and promote code reuse. And thanks to its powerful virtual dom, the framework can speed up complex interfaces. React is suitable for rendering on the server side as well as the client, and makes it possible to build isomorphic apps that transition seamlessly between the client and the server.

But there is still more to learn about react. I suggest that you start here: