How to convert functional component to class component in ReactJS ?

ReactJS offers two primary ways of creating components: functional components and class components. While functional components are more concise and easier to reason about, there are situations where class components may be necessary with the flexibility to use lifecycle methods and manage the state in a different way.

Prerequisites

• React JS
• React Functional component
• React JS Class component
• React LifeCycle methods

Approach to convert functional components to class components in React JS

To convert a function component to a class component we need to make the following major changes.

• Change the function to a class
• Add the render method
• Convert all functions to a method
• Add Constructor
• Replace hooks with lifecycle methods

Creating React Application

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure

It will look like the following.

👁 Image

Example: This is a simple React app using Functional Component.

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

👁 Peek-2023-10-25-10-58

Example: This example involves the use of Class Component for same application 

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

👁 Peek-2023-10-25-11-02