ReactJS Class Components In Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

ReactJS में Class Components एक core concept हैं, जो functional components के आने के पहले React applications में primarily use होते थे। Class components में state और lifecycle methods का direct access होता है, जो complex functionalities और data handling में helpful होते हैं।

अगर आप React में deep understanding रखना चाहते हैं, तो Class Components को समझना जरूरी है, क्योंकि ये अब भी existing codebases में काफी common हैं।

इस topic में हम React Class Components को detail में discuss करेंगे - कैसे बनाये जाते हैं, state और lifecycle methods कैसे handle होते हैं, और class components में data handling के techniques क्या हैं

What are ReactJS Class Components ?

React में Class Components एक blueprint कि तरह काम करते हैं जो React.Component class को extend करते हैं और render() method के through JSX return करते हैं।

ये components state और lifecycle methods को handle करने के लिए ideal होते हैं।

Class components का syntax कुछ अलग होता है क्योंकि ये JavaScript classes का use करते हैं, जो ES6 (ECMAScript 2015) में introduce हुई थी।

●●●

ReactJs Class Component Example

एक basic Class Component में class keyword, extends React.Component, और render() method होता है, जो component का essential structure बनाते हैं।

File : src/components/Greeting.js

Copy
import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return (
      <div>
        <h1>Hello from Class Component!</h1>
      </div>
    );
  }
}

export default Greeting;

Explanation

• Greeting एक Class Component है जो React.Component को extend करता है।

• render() method के अंदर JSX return होता है जो component का UI define करता है।

●●●

State in Class Components

Class components में state को handle करने के लिए this.state का use होता है, जो component-specific data को store और manage करता है।

State एक mutable data होता है जो change हो सकता है और हर change के साथ component re-render होता है।

Example of State

File : src/components/Counter.js

Copy
import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h2>Counter: {this.state.count}</h2>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Explanation

• constructor method में this.state initialize होती है जिसमे initial value count : 0 set कि गयी है।

• increment function this.setState के through count को increment करता है और component re-render होता है।

Note : this.setState का use directly state को modify करने के लिए नहीं होता। ये React को बताता है कि state change हुई है और component को re-render किया जाए।

●●●

Props in Class Components

Props Class Components में data को pass करने का एक तरीका है, जो this.props के through access किया जाता है। Props immutable होते हैं और सिर्फ read-only mode में होते हैं।

Example of Props

File : src/components/UserCard.js

Copy
import React, { Component } from 'react';

class UserCard extends Component {
  render() {
    return (
      <div className="user-card">
        <h2>{this.props.name}</h2>
        <p>Age: {this.props.age}</p>
      </div>
    );
  }
}

export default UserCard;

File : src/App.js

Copy
import React from 'react';
import UserCard from './components/UserCard';

function App() {
  return (
    <div>
      <UserCard name="Alice" age={25} />
      <UserCard name="Bob" age={30} />
    </div>
  );
}

export default App;

●●●

Lifecycle Methods in Class Components

Lifecycle methods React के Class Components में special functions होते हैं जो component के different phases में execute होते हैं। ये lifecycle phases कुछ इस तरह हैं -

• Mounting : जब component DOM में insert होता है।

• Updating : जब component re-renders due तो state or props change.

• Unmounting : जब component DOM से remove होता है।

Common Lifecycle Methods

• componentDidMount() : Component render hone के तुरंत बाद call होता है।

• componentDidUpdate() : State या props के change hone पर call होता है।

• componentWillUnmount() : Component unmount hone से पहले call होता है।

●●●

Example of Lifecycle Methods

File : src/components/Timer.js

Copy
import React, { Component } from 'react';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = { time: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({ time: new Date() });
  }

  render() {
    return <h2>Time: {this.state.time.toLocaleTimeString()}</h2>;
  }
}

export default Timer;

Explanation

• componentDidMount() में setInterval set किया गया है जो हर second tick() function को call करता है।

• tick() function state को update करता है जो time को refresh करता है।

• componentWillUnmount() में interval को clear किया गया है ताकि component unmount hone पर unnecessary memory usage न हो।

●●●

Event Handling in Class Components

Class Components में events को handle करने के लिए arrow functions या bind() का use किया जाता है ताकि this keyword correctly reference करे।

Example of Event Handling

File : src/components/ToggleButton.js

Copy
import React, { Component } from 'react';

class ToggleButton extends Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      isOn: !prevState.isOn
    }));
  }

  render() {
    return (
      <div>
        <button onClick={this.toggle}>
          {this.state.isOn ? "ON" : "OFF"}
        </button>
      </div>
    );
  }
}

export default ToggleButton;

Explanation

• toggle method this.setState को use करके isOn state को toggle करता है।

• bind(this) का use करके toggle function को component instance के साथ bind किया गया है ताकि this का correct reference मिले।

Note : ES6 arrow functions का use करना bind कि जरूरत को avoid करता है। Arrow functions में this automatically lexical context को reference करता है।

●●●

ReactJS में Class Components complex UI और data handling के लिए काफी helpful होते हैं। जब तक आप functional components के साथ comfortable हो, Class Components को समझना React कि पुरानी और existing codebases को maintain करने में helpful होगा।

Happy coding! 🎉