React Class Components

📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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