Articles → REACT.JS → Class And Function Components In React

Class And Function Components In React

In this article, we will discuss class and function components in React.js.

What Are Class Components?

Class components are reusable code used for rendering HTML. They are like function components.

This is how we can implement class components.

import React, { Component } from 'react';
import ReactDOM from 'react-dom'



class Message extends Component {

    fruits = ['Banana', 'orange', 'Apple'];
    render() {
        return (
            <h1>I am a class component demo</h1>
        );
    }

}

ReactDOM.render(<Message />, document.getElementById('root'));

Picture showing the output of class component in react.js

Click to Enlarge

What Are Function Components?

These are also reusable codes. The difference between the class and function components is mentioned in the next section.

This is how we can implement a function component.

import React, { Component } from 'react';
import ReactDOM from 'react-dom'

function Fruits() {
    return <h2>Hi, I am a fruit!</h2>;
}

ReactDOM.render(<Fruits/>, document.getElementById('root'));

Picture showing the output of function component in react.js

Click to Enlarge

Difference

The difference between class and function components are: -

Class component returns HTML using the render method
Class components may contain variables and functions
Class components extend the Component class

Posted By -	Karan Gupta

Posted On -	Thursday, August 5, 2021

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**