In this article, we will take a look at class components in reactjs and how to. create class components. Also, we will take a look at which one should we use over the other.

 We are going to cover the following topics,

Contents

  • What are class components?
  • How to import and export components?
  • Functional vs Class components
  • Summary


class components in reactjs


Alright, let's get started,

What are class components?

Class components are basically es6 classes, similar to a functional component a class component also can optionally receive props as input and return HTML.  Apart from the props, a class component can also maintain a private internal state, in simpler words, it can maintain some information that is private to that component and use that information to describe the user interface.

To get a comparison let's create the exact same Home component but this time as a class component, let me create a file called Home.js, I am simply changing the name because we cannot have two files with the same name. 


Whenever you create a class component we need to include two imports, we need to import react and the component class from react.

How to import and export components?

Let me define the class, let's call this class Home, for this class to become a react component there are two simple steps,

The first step is it should extend the component class from React, so class Home extends the component.

In the second step, the class has to implement a render method that will return null or some HTML, render method which returns some HTML and that is pretty much it,  you have created your own class component. 

Again, this component is in no way connected with the rest of our application so what we have to do is export the Home class from Home.js, import it into App.js, and then included it in the app component.

So export default Home and back in App.js, we are going to import Home from components slash Home and within the HTML, I'm going to add the custom tag Home. If we save all the files and take a look at the browser, you should be able to see the text welcome home class component so the basic class component is working.


Now, that we have seen how to create a functional component and a class component. You might be wondering what is the advantage of using one over the other and when exactly should you use a particular component type. I want to discuss that but, what you have to keep in mind is you might only partially understand the discussion and that is completely fine at this point.

I am going to briefly talk about them so that you have a basic idea, in the coming articles, you'll learn more about the different concepts, in reactjs, it will start to make much more sense to you.

Functional vs Class components

So let's compare the two types of components and let's begin with 

Functional components

1. Functional components are simple functions receiving props and returning a declaration, 

2. They can maintain their own private data also called a state using hooks

3. You 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 component approach.

4. The first advantage of using a functional component over a class component is the absence of this keyword which you will encounter in a class-based component, this keyword can be quite tricky for a beginner and a functional component will help you in that aspect 


Class components

1. Class components, on the other hand, are a bit more feature-rich

2. They can maintain their own private data also called a state

3. They can contain complicated UI logic and most importantly they provide lifecycle hooks.  we will discuss lifecycle hooks in detail later on in the upcoming articles but for now, I just want you to know that they are really useful

4. Because of what they are capable of and how they are used class components are also called stateful components, smart components, or container components. 

Summary

All right, so far we have seen three components app.js, Welcome.js, and Home.js, in all three components we simply return some HTML, but let me tell you that is not regular HTML, it is something known as JSX but what exactly is JSX let's take a look at that in the next article.


Thank you for reading this article.  I'll see you guys in the next one.