React (also known as React.js or ReactJS) is an open-source JavaScript library that helps with the view layer when working with HTML data. Thus, React is only concerned with the “V” in the MVC pattern.
In this article, we will build a simple app which shows kitten gifs from an API and allows you to load a new gif whenever you click on a button. Furthermore, the total gifs that the users have seen will be stored permanently in their browser through Local Storage. In the meantime, we will show you how to create your view in React. For that purpose, we would need a class, a state, and the usage of JSX.
JSX adds XML syntax to JavaScript. Basically, it allows us to input XML tags directly in our JavaScript for faster templating. It has a few peculiarities though. For example, instead of using the class attribute, you would have to use the className attribute.
In our simple HTML document, we add three scripts:
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="/js/logic.jsx" type="text/jsx"></script>
The first loads React, the second transforms the JSX that we write to regular JavaScript. For production, instead of using the JSXTransform you should precompile the JSX to regular JavaScript for better performance. The third script would contain our actual code – notice that we have set the type to text/jsx.
In our script, we create a class called Cats:
var Cats = React.createClass({ });
Then, after we have defined the <em>Cats </em>class we attach it to the <body> element using: React.render(<Cats />, document.body);
With the help of JSX, we can load our Cats class using XML syntax: <Cats />.In XML, empty tags (tags which do not have to be closed) need to be obligatory closed with a /. The second argument to the render method is just the element where we want the class to be rendered.
Within the Cats class, we create a method called render:
render: function() {
return (
<div className="container-fluid">
<div className="col-md-6 text-center col-md-offset-3">
<img className="img-responsive img-thumbnail img-rounded" id="theCat" src="http://thecatapi.com/api/images/get?format=src&type=gif" />
<br />
<button className="btn btn-lg btn-success" onClick={this.loadCat}>Load a New Cat</button>
<p className="lead">You have seen {this.state.catsSeen} cat gifs</p>
</div>
</div>
)
}
You can see that we can put XML directly in our JavaScript method. Note that we use className instead of class. In React, the event handlers are a bit different – you can add an onClick event but adding an event handler entitled onclick would not work.
You can also see that we have a paragraph at the end of our view which shows how many gifs we have seen. It displays the numeric this.state.catsSeen property.
In React, states allow us to display different values throughout our views and change as many of them as we want whenever we want.
Therefore, we set up a method (used by React) which would determine the initial value of our state properties. Whatever properties we return in the object in that method – they will be used as default once the user first visits the application. In it, we set as default for the catsSeen property (which we display in the render method above) either zero or an integer from localStorage which would contain the number of cat gifs seen.
getInitialState: function() {
return {catsSeen: (localStorage.catsSeen ? parseInt(localStorage.catsSeen,10) : 0)}
},
Finally, in the onClick handler that we set in our render method (the render method that we define for each class is executed once we call React.render() for that particular class) we update the total gifs seen, change the src attribute of the cat image and update the stored value in Local Storage. We also add a random number when updating the src attribute so that the results do not get cached.
loadCat: function() {
localStorage.catsSeen = this.state.catsSeen + 1;
this.setState({catsSeen: ++this.state.catsSeen})
var theCat = document.getElementById("theCat");
theCat.src = "http://thecatapi.com/api/images/get?format=src&type=gif" + "&" + "rand=" + Math.random(0,99999);
},
And, voila, the app is fully functional as shown in the picture below:
