In this tutorial, we will learn React Class Components with examples.
React Class Component Overview
- Class components are ES6 classes that return JSX.
- Class components (ES6 class) extend the Component class in React.
- Naming convention: Class Components always start with a capital letter.
- Class Component takes Props (in the constructor) if needed Class component must have a render( ) method for returning JSX
React Class Component Example 1
In this example, we define a class component called Employee. It extends the Component class from the react package. The component has an initial state object with properties firstName, lastName, and email:
import React from "react"
class Employee extends React.Component {
constructor(props) {
super(props)
this.state = {
firstName: "Ramesh",
lastName: "Fadatare",
email: "ramesh@gmail.com"
}
}
render(){
return (
<div className="center">
<h1> Employee Details</h1> <hr />
<p>{this.state.firstName}</p>
<p>{this.state.lastName}</p>
<p>{this.state.email}</p>
</div>
)
}
}
export default Employee
Next, use this Employee class component in the App component:
import Greeting from './components/Employee'
function App() {
return (
<div>
<Employee />
</div>
)
}
export default App
React Class Component Example 2
In this example, we define a class component called Counter. It extends the Component class from the react package. The component has an initial state with a count property set to 0.
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
handleClick = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h2>Count: {this.state.count}</h2>
<button onClick={this.handleClick}>Increment</button>
</div>
);
}
}
export default Counter;
Next, use this Counter class component in the App component:
import Greeting from './components/Counter'
function App() {
return (
<div>
<Counter />
</div>
)
}
export default App
The handleClick method is defined as an arrow function within the class component. When the button is clicked, it calls this method to update the count state by incrementing it by 1 using setState().
The render() method is required in a class component and returns the JSX that defines the component's UI. It displays the current count value and a button to increment the count.
Related Tutorials
- React Hooks - useState and useEffect
- React JS ( React Hooks) + Spring Boot Tutorial
- Create a New React App Step by Step
- Understanding React App Folder Structure
- How to Add Bootstrap to React App
- ReactJS Axios GET, POST, PUT, and DELETE Example Tutorial
- ReactJS Axios Example
- ReactJS Fetch API Example
- React JS CRUD Example Tutorial
- React Router Step-By-Step Tutorial
- React Class Components
- React Functional Components
- React Props
- React State and setState in Class Components
- React useState Hook
- React Conditional Rendering
- How to Add Bootstrap in React JS Using NPM
- How to Create React App using Vite
- Handling Events in React
- How to Consume REST API in React
- React JS Form Validation Example
Comments
Post a Comment
Leave Comment