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.
What you will learn?
- 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.
Welcome back, Let’s start by setting up ReactJS on our website. Simply create a new .html file and paste below content in it.
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.
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.
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.
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.
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 🙂