Hey developers! I wrote a blog about the best javascript frameworks of 2017 and ReactJS is one of them. ReactJS is one of the best javascript framework to create views. It is developer friendly plus it gives you lot of tools to make your overall experience smooth. ReactJS loves component driven programming. So, if you are not familiar with component based programming then it’s time you start learning it. Component driven programming is the future of future javascript based frameworks. Here’s an article by reactJS team on “Thinking in React”.
Before ES6, we had to write quite some code, but after ES6, we can achieve the same thing with less lines. Also, it gives us the freedom to use class and properties, just in a way we are familiar with. In ReactJS everything is a component. We separate a single module in multiple components. Each component has their own data, properties, methods, view, and state. Components can be nested into each other. Data flow is from the top component to the bottom in the hierarchy.
Table of Contents
What you will learn?
Let’s start with our short tutorial. In this tutorial, we will be fetching the list of categories from www.varunshrivastava.in website. You must have a basic knowledge of javascript and must be fluent with it. At the end of this tutorial you will be able to perform the following things:
- Setup ReactJS on your website.
- Create and interact with different components.
- Fetch JSON data asynchronously from a REST API.
- Extract data from the JSON object document and use it in the required way.
Setting Up the Enviornment
We would need a server at the first place to start with this tutorial. This is because we are going to send an ajax request to another domain from our local. And to do that we need a server. It is because web works on the basis of certain principles. Therefore, obeying one of the principle it does not allow access to its resources if it doesn’t find any valid origin. I have enabled CORS in my website which allow access to certainn resources. So, we would need a local server to host our application. There’s nothing to worry about, I have already written a simple article on setting up your local enviornment with XAMPP control panel. Xampp is one of the simplest way to setup your local enviornment. Setup the enviornment and come back quickly to start creating your first AJAX driven application with reactJS.
ReactJS
Welcome back, Let’s start by setting up ReactJS on our website. Simply create a new .html file and paste below content in it.
<html> <head> <title>ReactJS Tutorial</title> </head> <body> <div class="container" id="app"></div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script> <script src="https://unpkg.com/react@latest/dist/react.js"></script> <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script> <script src="https://unpkg.com/[email protected]/babel.min.js"></script> </body> </html>
This is all you need to get started with reactJS. Next, we will learn to create components. If you want colors and visual representation then add below link in the head section of html page:
<link rel="stylesheet" type="text/css" href="http://www.varunshrivastava.in/wp-content/themes/whitehogan/style.min.css" />
In reactJS components are simply created by extending React.Component class. You inherit all its property which is required by the component. Let’s create a component.
class CategoryBox extends React.Component {
constructor() {
super();
}
}
Congratulation, you have made your first component. But, as you can see, this component is of no use a it does not perform any task. It’s just an empty component. Now, we will add some behavior to it and make is a bit more useful.
class CategoryBox extends React.Component {
constructor() {
super();
this.state = {
categories: []
};
}
render() {
return (
<div className="row">
<h1>Hello World!</h1>
</div>
);
}
}
ReactDOM.render(
<CategoryBox />,
document.getElementById('app')
);
The render() method is responsible for creating the view for the user. This is where we create our elements which will render on the client’s browser. It contains the structure of the component. It tells the component how to render on client’s screen. In this case, we are simply returning Hello World! String wrapped inside of h1 tag.
Note: render() method must return one and only one root element. In this case, the root element is div.row. At the end, `ReactDOM.render()` method renders the `CategoryBox` component to the browser. Or in other words, it takes `div#app` and replaces it’s content with whatever is inside the render function of that component. Now, we will create our component to render the list of categories and show it to the user.
class CategoryBox extends React.Component {
constructor() {
super();
this.state = {
categories: []
};
}
componentDidMount() {
this.fetchCategoryList();
}
fetchCategoryList() {
axios.get("http://www.varunshrivastava.in/wp-json/wp/v2/categories")
.then((res) => {
this.setState({categories: res.data.categories});
});
}
render() {
var category = this.state.categories.map(function(item, index) {
return (
<a href={item.slug}>
<div className="col s6 m4">
<div className="box-container" key={item.id}>
<h1>{item.title}</h1>
<p>{item.description}</p>
</div>
</div>
</a>
)
})
return (
<div className="row">
{ category }
</div>
);
}
}
ReactDOM.render(
<CategoryBox />,
document.getElementById('app')
);
Woah! Let’s break it. There are 4 main lifecycle methods in ReactJS that are fired at different times in a component life. We have got one reactJS lifecycle method here i.e. componentDidMount(), this method is called just after the component has been mounted successfully. In other words, this method is called when react’s virtual dom is ready to be rendered. We are telling component to fire this method as soon as you render on the client’s machine.
From this method we are calling our custom method fetchCategoryList(). This method is going to send a `GET` request to retrieve the resource we need to render on our page. It sends an AJAX request asynchronously and fetches the list of categories for the blog. You can have any url with json document to fetch the result. Once the data has been received, it set’s the state with this data. Yoou must be careful while setting up the state. Use this.setState()?instead of using this.state.categories?because setter method keeps a track of state change and informs the component that view must be rendered again. As soon as the state of the application changes, it tells component to re-render the component. This time component finds the categories data and maps it accordingly.
Conclusion
ReactJS is a cool framework just like facebook. It enables developers to create some of the fantastic websites very quickly. I know it is a bit difficult to grasp the logics at the first time but once you start playing more and more with it, you start to love it even more. If you have any questions or any part that you want more explanation about then please comment below. I would love to answer all your queries.
And as always
Be my aficionado 🙂