ReactJS Components : Types Of Components In ReactJs 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 में components core building blocks हैं जो complex UIs को reusable और modular parts में divide करने में help करते हैं। हर component अपना UI और logic को isolate करके maintain कर सकता है, जो application को readable और maintainable बनाता है।

इस topic में हम React Components को detail में discuss करेंगे - क्या हैं, कैसे काम करते हैं, और उनका use कैसे करते हैं।

इसके अलावा , हम देखेंगे कि Functional और Class Components में क्या difference है, और कैसे उनका lifecycle और data management handle किया जाता है।

What are ReactJS Components ?

ReactJS में एक component एक isolated code block है जो एक specific UI part को represent करता है। हर component एक small, reusable और independent part बनाता है जो एक bade UI का छोटा part होता है।

ये एक simple button, form, या complex UI layout जैसे कुछ भी हो सकता है।

RecatJs Component Types

React में components को दो main categories में divide किया जाता है -

• Functional Components

• Class Components

●●●

ReactJs Functional Components

Functional components एक simple JavaScript function कि तरह होते हैं जो JSX return करते हैं। ये lightweight और fast होते हैं और आज के modern React में mostly functional components का ही use होता है।

Functional components React Hooks के साथ काम कर सकते हैं जो state और lifecycle methods को manage करने में help करते हैं।

Example of a Functional Component

File : src/components/Greeting.js

Copy
import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

File : src/App.js

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

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

export default App;

Functional components के साथ props pass करना काफी easy होता है और ये components stateless होते हैं, जब तक हम उनमें Hooks का use न करें।

●●●

ReactJs Class Components

Class components एक React.Component class को extend करके बनाये जाते हैं। ये functional components से ज़्यादा powerful हैं, क्योंकि इनमें state और lifecycle methods का direct support होता है।

लेकिन, functional components और Hooks के आने के बाद इनका use कम हो गया है।

Example of a Class Component

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;

File : src/App.js

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

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;

Class components में state और lifecycle methods का use direct होता है, लेकिन functional components के मुकाबले ये थोड़े bulky और slow हो सकते हैं।

●●●

आपको ReactJs components के बारे में ये overview समझ आया होगा , next topics में हम इन्हे detail में समझेंगे।