In my previous post, I covered how to implement a simple hello world application in ReactJS while talking a lot about components explaining how ReactJS is all about components and how they react.
What is a ReactJS Component?
In ReactJS, a component represents a part of the User Interface. In fact, everything is a component over here. Be it a header, a navbar, a footer, anything, and everything is a component.
Whatever is visible on the web page is a component. One can actually put components together to make one bigger component. Like App component holds another component.
Components are also reusable. The same component can be used with different properties to display different information.
For example, The component SIDENAV can be the left SIDENAV as well as the right SIDENAV. Hence, allowing re-use of components.
Types of Components:
-
Stateless Functional Component
-
Stateful Class Component
Functional Components are simply Javascript functions. They return HTML, which describes the UI. For example:
function Welcome(props) {
return <h1> Hello Jaz</h1>;
}
In the above code, we have a function called Welcome which returns an h1 tag that says Hello, Jaz.
Class Components, on the other hand, are the regular ES6 classes that extend the component class from the react library. They must contain a render method, which in turn returns the HTML or JSX(discussed next). For example:
class Welcome extends Component {
render() {
return <h1> Hello Jaz</h1>;
}
}
Now the question arises, what is the difference between these two component types and when to use one over the other?
For this let's take a closer look at each of them, one at a time.
Functional Components
One should try to use functional components as much as possible and by that I mean if it is possible to create a component with both the approaches always go with the Functional Components.
The first and foremost advantage of using this approach is the absence of this keyword, which could be very tricky for a beginner to understand.
Secondly, you do not need to maintain the state of the component, which means if you have a number of components each with their own private state, maintenance and debugging your application become complicated.
Functional components tend to be without any complicated logic and are mainly responsible for the User Interface.
This is why functional components are also called Stateless, Dumb or Presentational components.
Class Components
The class component, on the other hand, is a bit more feature-rich.
They can maintain their own private data, also known as the state. They can contain complicated UI logic. They provide lifecycle hooks(will be discussed in the posts to follow)
And because what they are capable of and how they are used, they are classified as Stateful, Smart or Container Component.
Here we have a summary of the differences between the Functional and Class components:
This was all about the Introduction to components, will dive further into it with the sections to follow.
You may also like:
