16 - Class and Functional Components

 

Class Based Component

React class based components are used in most modern web apps built in ReactJS. 

These components are simple classes (made up of multiple functions that add functionality to the application). 

All class based components are child classes for the Component class of ReactJS. 

Image 1 -  Creating Basic React App Package through node terminal 

 Create a React app and edit the App.js as

Note-  Use Snippet  rce in Visual Studio Code

import './App.css';

import React, { Component } from 'react'

export class App extends Component {

 

render() {

    return (

      <div>

     

</div>

    )

  }

}

export default App

Main feature of class-based components

The main feature of class-based components that distinguished them from functional components is that they have access to a state which dictates the current behavior and appearance of the component .

Later, with React Hooks introduced in version 16.8, we are able to declare a stateful component without declaring a class. 

This state can be modified by calling the setState() function. 

One or more variables, arrays, or objects defined as part of the state can be modified at a time with the setState() function.

Image 2 - Difference between class and functional based components