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 في React هي بيانات قابلة للتغيير يمكن تغييرها داخل أحد المكونات. يمكن أن يكون لكل مكون خاص به state لتخزين وإدارة البيانات الديناميكية. عند إجراء state التغييرات ، React يتم تحديث واجهة المستخدم المقابلة تلقائيًا. State تتم إدارتها فقط في الفصل components ويتم تهيئتها في منشئ المكون. لتحديث state ، نستخدم State طريقة `set()`.

مثال:

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