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, আমরা `সেট 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>  
   );  
  }  
}