• React Class components are simply JavaScript classes which are made up of multiple functions adding certain functionalities to the component.
• The following example is of the simplest type of class components in React consisting only of a render function:

class Car extends React.Component {  
/* This statement creates an inheritance to React.Component & gives your class 
component access to React.Component's functions*/
render(){
/* The render method is the only method you are required to define in a class
component*/
return (<h2> I'm a Car! </h2>); 
/*Returning a JSX Element. The parentheses after the word "return" are necessary
to compile the JSX elements*/
}
}

The Life-cycle of React Class Components:

• Each react component has a life-cycle that consists of three main phases Mounting: Inserting Elements into the DOM* Updating: Involves methods for updating components in the DOM* Unmounting: Removes the component from the DOM*

*DOM refers to Document Object Model which constructs a tree of objects to represent the contents of an HTML page. The official W3C definition of DOM is:

A Platform & language-neutral interface that allows programs & scripts to dynamically access & update the content, structure & style of a document

Mounting Phase in the Life-cycle of a React Class Component:

React has 4 built-in methods that get called in the following order, when mounting a component: 1) constructor() 2) getDerivedStateFromProps() 3) render() 4) componentDidMount()

The render() method is required & will always be called. The others are optional and will be called only if you define them

Method#1 in the Mounting Phase - constructor() method:

• The constructor() method is the first method to be called in the component's life-cycle.
• It is used to initiate the component, hence it is the natural place to set-up the initial state* and other initial values
• The constructor method is called with the Props as arguments