Updated April 1, 2023
Introduction to React Class Component
As we know components are basic building blocks of a react-based application. Therefore it is important to understand how to create components and what are different components available are in react. In this article we will cover what class components are, how are they are created and used in react.
What is React Class Component?
A component can be defined as a reusable block of code that divides the user interface into smaller parts. Basically, there are two types of components in React JS. Class Components and functional components. Class components are stateful components whereas functional components are stateless components. Class components are called stateful components because they allow us to do more complex things like react state management whereas stateless components do not provide such capability.
Types of Components in React
As already covered, components are basic building blocks of react application. Every application in react can be considered as a collection of components. Components play a major role in user interface designing as a given user interface is broken down into several components. These components can be developed independently and then finally merged to create a final user interface. In react there are mainly two types of components:
1. Functional Components
Functional components can be considered as simple functions build using javascript. These are stateless components that cannot be used to achieve complex tasks.
Syntax:
Functional components can be created using the below syntax:
function Componentname()
{
return <h1>Welcome Text!</h1>;
}Here Component name can be any user-defined name and should start with a capital letter.
2. Class Components
These are more complex components as compared to functional components. Due to their complex nature, they are stateful in nature. Class components can be used whenever state management is required in react. The functional components have no idea about other components present in the application whereas class components can communicate with other components that their data can be transferred to other components using class components. Creating a class component requires us to create javascript classes.
From the above discussion, it is clear that we will go for functional components only in the case when our component does not need to interact with other components. But when there is a requirement of interaction with other components, then you should use class components. It is worth noting that the use of class components can make our application in-efficient. Therefore you should not use class components without their need.
Syntax:
Class components can be created using the below syntax:
class Componentname extends React.Component
{
render(){
return <h1>Welcome Text!</h1>;
}
}Here Component name can be any user-defined name and should start with a capital letter.
Examples of React Class Component
Examples of react class component are as follows:
Example #1
Now will cover some examples to provide more clarity on the concept of components is to react. The below example shows a simple functional component and how is it called.
import React from 'react';
import ReactDOM from 'react-dom';
// functional component
function StartPage()
{
return <h1>Welcome to edubca!</h1>
}
ReactDOM.render(
<StartPage />,
document.getElementById("root")
);The above code is observed that the name of StartPage is the name of the functional component and its starts with a capital letter. The component is called the inside render method. The following output would be produced.
The following things are taking place in the above example:
- render is called with the first parameter as a component.
- Call to the given component StartPage takes place which returns <h1>Welcome to edubca! </h1> as output.
- ReactDOM updates the DOM container and renders the output to the DOM element with id ‘root’.
Example #2
Now we will cover another example showing the use of the class component.
import React from 'react';
import ReactDOM from 'react-dom';
//class component
class Bike extends React.Component {
constructor() {
super();
this.state = {color: "green"};
}
render() {
return <h2>This is a Bike!</h2>;
}
}The above code shows how a class component is created and called in react. This code will produce the below output.
Example #3
In this example, we will see how a component can be used in another component. Here is my component named TestComponent defined as follows:
class TestComponent extends Component {
render() {
return (
<div>This is my TestComponent.</div>
);
}
}
export default TestComponent;Now we want to use this component in another component which is defined as:
import TestComponent from './TestComponent ';
class OtherComponent extends Component {
render() {
return (
<div>
<div>Here is other component.</div>
<TestComponent />
</div>
);
}
}
export default OtherComponent;From the above example, it is clear that a class component can be used directly in another component. It just requires us to im7port that component. The above code will produce the following output:
Conclusion
From the above discussion, it is clear that components play a vital role in user interface designing in react. It is important to note that you should prefer to use functional components over class components as they are simpler, testable, better in terms of performance, requires less code, and allow the use of best practices. But class components have their own advantages. Hope this post will make your understanding better regarding reacting components.
Recommended Articles
This is a guide to React Class Component. Here we discuss what is react class component? along with examples of react class components. You may also look at the following articles to learn more –
