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.
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 JavaScript 1.7 link to see the JSX source code.)
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).
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
(See this quiz on Tutorialzine.com)
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:
- React home page.
- Starter kit and getting started guide.
- Detailed step-by-step tutorial.
- React addons.
- Stack overflow tag.
5 Practical Examples For Learning The React Framework
Geen opmerkingen:
Een reactie posten