React मूलभूत संकल्पना- Components, Props, State

१. Components

Components मध्ये React स्वतंत्र बिल्डिंग ब्लॉक्स आहेत जे पुन्हा वापरले जाऊ शकतात. ते लहान UI घटकांमध्ये विभागले गेले आहेत आणि मोठ्या बनविण्यासाठी एकत्र केले जाऊ शकतात 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, आम्ही घटकाच्या गुणधर्मांना मूल्ये पास करतो आणि UI भागामध्ये वापरतो.

उदाहरण:

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>  
   );  
  }  
}