React Class

What Do you mean by React Class?

The bread and butter of most modern ReactJS web projects are React class-based components. Simple classes make up these components (made up of multiple functions that add functionality to the application). All ReactJS component classes are child classes of the Component class.
Class components were the sole way to keep track of a React component's state and lifecycle. "Stateless" function components were considered.
Function components are now essentially identical to Class components thanks to the addition of Hooks. Because the distinctions are so slight, you will almost certainly never need to utilise a Class component with React.
Despite the fact that Function components are preferred, there are no plans to remove Class components from React at this time.
This section will walk you through how to use React Class components.

 
import React from "react";
 
class App extends React.Component {
  render() {
    return <h1>Welcom to Learn About React Class</h1>;
  }
}
 
export default App;

The purpose of this programme is to show how to make class-based components.

A component can be utilised in other components once it has been declared. Demonstrate the use of class-based components in other components with this programme.

 
import React from "react";
 
class temp extends React.Component {
  render() {
    return <h1>Let's learn React JS</h1>;
  }
}
 
class App extends React.Component {
  render() {
    return <temp/>;
  }
}
 
export default App;

React Components

Components are self-contained, reusable code chunks. They perform the same functions as JavaScript functions, however they operate independently and return HTML using the render() function.
Class components and Function components are the two sorts of components.

How to create a class components?

The component's name must begin with an upper case letter when establishing a React component.
The extends React.Component declaration must be included in the component; this statement generates an inheritance from React.Component and grants your component access to React.functionalities. Component's
The render() method, which returns HTML, is also required by the component.

 
import React from "react";
 
class Human extends React.Component {
  render() {
    return <h1>Hey! we are the human being..</h1>;
  }
}
 
export default App;

In the above example we create a Human class component.
Your React application now has a Human component that returns a <h2> element.
Use the same syntax as conventional HTML to use this component in your application:

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

Component Constructor

If your component has a function Object() { [native code] }() function, it will be called when the component is first started.
The function Object() { [native code] } function is where the component's properties are started.
In the function Object() { [native code] } function, you can also honour the parent component's inheritance by including the super() statement, which performs the parent component's function Object() { [native code] } code, giving your component access to all of the parent component's functions (React.Component).

 
class Block extends React.Component {
  constructor() {
    super();
    this.state = {color: "green"};
  }
  render() {
    return <h2>I am a Square!</h2>;
  }
}

export default App;

In the above example, In the Block component, add a function Object() { [native code] } method and a colour property.

In the render() function, use the colour property:

 
class Block extends React.Component {
  constructor() {
    super();
    this.state = {color: "green"};
  }
  render() {
    return <h2>I am a {this.state.color}Square!</h2>;
  }
}

export default App;

The fundamental difference between class-based and functional components is that class-based components have access to a state that controls the component's present behaviour and appearance (Later, with React Hooks introduced). The setState() function can be used to change this state. With the setState() function, one or more variables, arrays, or objects defined as part of the state can be updated at the same time.

Props

Props are another approach to deal with component properties.
Props are similar to function arguments, and you send them as properties to the component.
Props work the same way for all ReactJS components, whether they're class-based or functional. The parent component's props are always sent down to the child component. As a rule, ReactJS does not enable a component to change its own props. Only by changing the props passed from the parent component to the child component can the props be modified. This is usually accomplished by sending a reference to a parent component function that modifies the props supplied to the child component.

 
class Block extends React.Component {
  render() {
    return <h2>I am a {this.prop.color}Square!</h2>;
  }
}
ReactDOM.render(, document.getElementById('root'));

In the above code we Pass a colour to the Block component via an attribute and use it in the render() function.

Props in Constructor

Props should always be supplied to the function Object() { [native code] } and also to the React.Component via the super() method if your component has a function Object() { [native code] } function.

 
class Block extends React.Component {
  constructor() {
    super(props);
    super(props);
  }
  render() {
    return <h2>I am a {this.state.color}Square!</h2>;
  }
}
ReactDOM.render(<Block color="green"/>, document.getElementById('root'));

In the above code we Pass a colour to the Block component via an attribute and use it in the render() function.

Functional Components vs Class Components

Conclusion

So there you have it, your journey into the React Class. The performance of class-based components is slightly slower than that of functional components. The performance difference is very modest and nearly non-existent for smaller web apps, yet it grows as the amount of components in the app grows. Furthermore, class-based components need somewhat more coding on the part of the programmer, making them slightly less efficient to utilise.