Asalanka and Hasaranga crush Afghanistan to give Sri Lanka the series victory.

Certainly! In React.js, class components are a way of defining React components using ES6 classes. Class components are the traditional way of creating components in React, and they provide a way to manage state and lifecycle methods. However, with the introduction of React Hooks in React 16.8, functional components can now also manage state and lifecycle, making class components less common in modern React development. Nevertheless, it's still valuable to understand class components, especially when working with codebases that use older versions of React.

Here's a breakdown of the key concepts in class components:

1. Class Definition:

In a class component, you define a class that extends React.Component:a

import React, { Component } from 'react';
class MyComponent extends Component {
// ... component logic goes here
}

2. State:

Class components can have state, which allows them to manage and track data changes within the component. State is initialized in the constructor:

class MyComponent extends Component { constructor(props) { super(props); this.state = { // initialize state properties here }; } }

State can be accessed and updated using this.state and this.setState().

3. Render Method:

The render method is where you define what the component will render to the DOM. It returns JSX, describing the structure of the component:

class MyComponent extends Component { render() { return ( <div> {/* JSX content */} </div> ); } }

4. Lifecycle Methods:

Class components have lifecycle methods that allow you to perform actions at different points in the component's lifecycle. Common lifecycle methods include:

• componentDidMount: Called after the component has been rendered to the DOM.
• componentDidUpdate: Called after the component updates.
• componentWillUnmount: Called just before the component is removed from the DOM.

class MyComponent extends Component {

  componentDidMount() {

    // logic to execute after the component is mounted

  }

  componentDidUpdate(prevProps, prevState) {

    // logic to execute after the component updates

  }

  componentWillUnmount() {

    // logic to execute just before the component is unmounted

  }

}

5. Props:

Props (short for properties) are the way components receive data from their parent components. Props are accessed via this.props:

class MyComponent extends Component { render() { return <div>{this.props.myProp}</div>; } }

Example:

Here's a simple example combining these concepts:

import React, { Component } from 'react'; class Counter extends Component { constructor(props) { super(props); this.state = { count: 0, }; } componentDidMount() { console.log('Component mounted!'); } componentDidUpdate(prevProps, prevState) { console.log('Component updated!'); } componentWillUnmount() { console.log('Component will unmount!'); } incrementCount = () => { this.setState((prevState) => ({ count: prevState.count + 1, })); }; render() { return ( <div> <p>Count: {this.state.count}</p> <button onClick={this.incrementCount}>Increment</button> </div> ); } } export default Counter;