React Class Component Example

In this article, we will learn about how to create React class component with example. Class components are basically ES6 classes. Apart from the props, a class component can also maintain a private internal state, in simple words it can maintain some information that is private to that component and use that information to describe the user interface. Let’s see how to create the class component.

Step by step to create a class component

1 Import:

Whenever we create a class component in a new file, we need to include two imports react and the component class from react:

import React, {Component} from 'react'

2. Syntax for creating class:

class className extends Component{
render(){
return(
//Some HTML or JSX code
)}
}

Ex:

class className extends Component{
render(){
return(
<h1> Class component </h1>
)}
}

We should extend the component class from react. The class has to implement a render method that will return null or some HTML. This component is in no way connected with the rest of our application, we should export the welcome component. Here, we created a “welcome” class component in the welcome.js file.

3. Display class component
To import our “welcome” class component in the app.js file, we need to export the welcome component in the “welcome.js” file. For that use below code

export default welcome;

Then we import our component using “import” keyword as in the below code.

import Welcome from './welcome.js'

And then within the App.js component, we add the custom “welcome” tag as in the below code.

<welcome/>

Output:

See the above output, our simple class component is displayed.

Class vs Functional Component

Functional component :

Functional components are simple functions receiving props and returning a declaration. You should try to use the functional components as much as possible. If it is possible to create components with both approaches always go with the functional component. The first advantage of using a functional component over a class component is the absence of the ‘this’ keyword which you will encounter in a class-based component. ‘this’ keyword can be quite tricky for a beginner and the functional component will help you in that aspect. The second advantage is you will be forced to think of a solution without having to use ‘state’.

If you have a number of components each with its own private state, maintaining and debugging your application is kind of difficult. It tends to be without any complicated logic and is mainly responsible for the user interface. The functional component is also called the stateless component, dumb component, or presentational component.

Class component:

Class components on the other hand are a bit more feature rich. They maintain their own private data also called ‘state’. They can contain complicated UI logic and most importantly they provide lifecycle hooks. The class component is also called stateful components, smart components, and container components.