5 Practical Examples For Learning The React Framework

5 Practical Examples For Learning The React Framework

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?

Who made React?

What is React used for?

What is special about React?

Which language is this?

3

What does this component do?

1

What does this code do?

2

What does this code do?

4

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:

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.

Download

17 Comments

  1. Stan says:

    8 out of 8 :)

  2. Kwame says:

    Thanks for sharing this Martin. I am getting overwhelmed with the number of frameworks out there.

    Anyways, what plugin are you using for the quizzes? Is it available for free? Thanks.

  3. Misa says:

    Hi,
    good informative article. But I think there's minor error in quiz. Last questions code might not work:

    this.props.items.map(function(item){ return <li>{m}</li> });
    

    {m}?

    1. Martin Angelov says:

      Thanks! You are right, it should be {item}. Too late to fix it now, unfortunately.

  4. Tu says:

    Very nice first approach to React ! Thank you

  5. Palmer says:

    Thanks for sharing, I have been used React in some projects and I think that React is amazing.

  6. amir says:

    very nice 8 out of 8

  7. Sidney says:

    Awesome examples, a great starting place to start grasping React.

  8. Mariusz says:

    Very nice examples, which helped me understand React. Thanks for sharing it.

  9. Alexey says:

    React is not a framework it's a library.

  10. Barry says:

    I dont get at (5) why the two lists are combined into one component. I would expect two ImageList instances in an FavoriteImages component.

  11. Peter says:

    Thanks, really good tutorials! Explored each in the JSfiddles, really great way of grasping the new concepts.

  12. Okeowo Aderemi says:

    "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"

    I will take a lengthy and clear code over a black box Angular (black magic)

  13. Erik says:

    I'm not able to run any demo on jsfiddle

  14. srinivas says:

    It's been two years since the article is published . Still this is the best ..
    Thanks.

  15. Andrew says:

    Really helpful, thanks!

    In the order form example, why are we passing in active as an attribute? This is an attribute on the state of the Service object, not the object itself.

    return <Service name={s.name} price={s.price} active={s.active} addTotal={self.addTotal} />;

    s.active should always be undefined...

  16. brian says:

    Thank you for these awesome examples it gave me much more insight in the framework.

    Also since Instagram changed there policy's the last example won't work anymore.

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links