React بنیادی تصورات- Components ,, Props State

1۔ 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 ڈیٹا منتقل کرنے میں مدد کرتے ہیں ۔ صرف پڑھنے کے قابل ہیں اور جزو کے اندر تبدیل نہیں کیا جا سکتا۔ استعمال کرنے کے لیے ، ہم جز کی خصوصیات میں اقدار کو منتقل کرتے ہیں اور انہیں UI حصے میں استعمال کرتے ہیں۔ 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 ، ہم `set 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>  
   );  
  }  
}