REACT JS:
All of us are aware of the MVC architecture. This is the architecture we follow to develop any web application (We use so-called MVVM in Angular js). React is a javascript library which allows us to implement V in MVC. To complete MVC architecture we use Redux, flux, we will discuss those in other articles. In Any React application, we find components everywhere. React application considered better if we have reusable components.
COMPONENT:
According to react community they define component as,
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
Let us jump into some real time scenarios we can face. We have assigned to create a component which should display the comments to any Blog.
So let us create a CommentComponent.
COMMENT COMPONENT
PROJECT PHASE 1:
In the initial phase of the Project, our task is to create a component which will display the comment to any blog.
If we define an independent component with HTML rendering inside it as well as it is calling network api to take a data to display.
so our components tasks are,
1 call an API say “10.10.0.255/blog/comments/_ID_OF_THE_BLOG”
Suppose it receives data as
[
{
id : 1, commenter : ”Akash, ”comment : ”wow”
},
{
id : 2, commenter : ”Suresh”, comment : ”cool”
},
{
id : 3, commenter : ”Rahul”, comment : ”awesome”
},
{
id : 4, commenter : ”Manish”, comment : ”pretty”
}
]2. Render the view with the data received.
As described above, our CommentComponent should be designed as,
import React from 'react';
import axios from 'axios';
class CommentComponent extends React.Component {
constructor(props) {
super(props); this.state = {
comments: []
};
}
componentDidMount() {
axios.get('www.cronj.com/blog/'+this.props.blog_id)
.then(res => {
const posts = res.data.data.children.map(obj => obj.data);
this.setState({ comments });
});
} render() {
return (
<div>
<ul>
{this.state.comments.map(comment =>
{comment.commenter}<li key={comment.id}>{comment.comment}</li>
)}
</ul>
</div>
);
}
}
GREAT, Problem solved.
How to use CommmentComponent from the BlogComponent,
<CommentComponent blog_id="blog1" />PROJECT PHASE 2:
Now project requirement increases over the time and we want to add comments to Picture also, now your previous CommentComponent is helpless to the pictures, as that component can only call blog API. I . know we can create another component called PictureComment or something similar but we love Object Oriented Programming. We want to reuse most of the stuff which is already living in our Project directory, so we won’t go to create another component but we can configure our old CommentComponent. Instead of static URL of blog, we are sending blog URL from the component from which CommentComponent will be called.
SOLUTION:
Make that comment component dynamic and pass the API URL. CommentComponent will take care of everything there.
So now we will modify component as,
import React from 'react';
import axios from 'axios';
class CommentComponent extends React.Component {
constructor(props) {
super(props); this.state = {
comments: []
};
}
componentDidMount() {
axios.get(this.props.api_url + '/' +this.props.blog_id)
.then(res => {
const posts = res.data.data.children.map(obj => obj.data);
this.setState({ comments });
});
} render() {
return (
<div>
<ul>
{this.state.comments.map(comment =>
{comment.commenter}<li key={comment.id}>{comment.comment}</li>
)}
</ul>
</div>
);
}
}
How to use CommentComponent in this case?
<CommentComponent api_url = "cronj.com/blog" blog_id="blog4" />BUT, as the project grows you need to configure the CommentComponent as well as the component from which we are calling it. It can not be considered as a solution.
PLEASE, SOMEONE, RESCUE ME FROM HERE?
Define CommentComponent as an only presentational component where we will pass the data to it and it will only render that view with the data. CommentComponent should not think about how data came to it/logic or API behind it.
A CommentComponents task should only be to render the view with the data it receives.
import React from 'react';
class CommentComponent extends React.Component {constructor(props) {
super(props);
}
render() {
return (
<div>
<ul>
{this.props.comments.map(comment =>
{comment.commenter}<li key={comment.id}>{comment.comment}</li>
)}
</ul>
</div>
);
}
}
If you look at the component it does only display the values it receives. It does not bother about anything else.
Suppose I have implemented BlogComponent, then this component will call comments it will pass those comments to CommentComponent and that will display. we will use CommentComponent as below.
<CommentComponent comments="this.props.comments" />Requirement changes, we want to implement pictures also, no problem implement PictureComponent, get the comments there and pass to CommentComponent, that will display comments for you. we will call CommentComponent as below.
<CommentComponent comments="this.props.comments" />Again some fancy requirement comes, no problem, implement FacnyComponent, get the comments and pass to CommentComponents. we will call CommentComponent as below.
<CommentComponent comments="this.props.comments" />So, BlogComponent, PictureComponent, FacnyComponent are called as Container component which does the tricks and your CommentComponent never changes when requirement increases or changes. That is the beauty of using container component.
IMPORTANT!!! Is Route component is container component?
Yes, Definitely it should be, right? Route component is the component which divides the single application page application. And according to redux, They divide component into Smart and dumb. They call container to the smart component. Presentational components are only components. According to redux law, I believe Route is the smartest component among all.
CONTAINER COMPONENTS:
If you have read the article then you will realize that Container component is nothing it is just a component rather Smart component which is responsible for fetching data and rendering it by itself or taking help from some Presentation/Dumb Component. So, Virtually it is a Container Component. This is just an implementation technique which makes use of reusability of the components.
Looking for ReactJS Development Services, Hire our dedicated developers.!
