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

२. 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'));

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