React बुनियादी अवधारणाएँ- Components, Props, State

1. Components

Components ये React स्वतंत्र बिल्डिंग ब्लॉक हैं जिनका पुन: उपयोग किया जा सकता है। वे छोटे यूआई तत्वों में विभाजित हैं और उन्हें बड़ा बनाने के लिए जोड़ा जा सकता है components । उदाहरण के लिए, किसी एप्लिकेशन में, और components जैसे हो सकते हैं । प्रत्येक घटक की अपनी ज़िम्मेदारियाँ होती हैं और वह संबंधित डेटा प्राप्त कर सकता है और प्रदर्शित कर सकता है। Header Sidebar Content props state

उदाहरण:

// Functional Component  
function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
// Class Component  
class Greeting extends React.Component {  
  render() {  
    return <h1>Hello, {this.props.name}!</h1>;  
  }  
}

2. Props

Props अंदर बाहर से React पारित मूल्य हैं । वे माता-पिता से बच्चे तक components डेटा पहुंचाने में मदद करते हैं । केवल पढ़ने के लिए हैं और घटक के अंदर इन्हें बदला नहीं जा सकता। उपयोग करने के लिए, हम घटक की विशेषताओं के लिए मान पास करते हैं और उन्हें यूआई भाग में उपयोग करते हैं। components components Props props

उदाहरण:

function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

3. State

State in React परिवर्तनशील डेटा है जिसे किसी घटक के भीतर बदला जा सकता है। state गतिशील डेटा को संग्रहीत और प्रबंधित करने के लिए प्रत्येक घटक का अपना स्वयं का हो सकता है । जब state परिवर्तन होता है, React तो संबंधित उपयोगकर्ता इंटरफ़ेस स्वचालित रूप से अपडेट हो जाता है। State केवल कक्षा में प्रबंधित किया जाता है components और घटक के कंस्ट्रक्टर में प्रारंभ किया जाता है। अद्यतन करने के लिए state, हम `सेट State()` विधि का उपयोग करते हैं।

उदाहरण:

class Counter extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { count: 0 };  
  }  
  
  increment() {  
    this.setState({ count: this.state.count + 1 });  
  }  
  
  render() {  
    return( 
      <div>  
        <p>Count: {this.state.count}</p>  
        <button onClick={() => this.increment()}>Increment</button>  
      </div>  
   );  
  }  
}