React היא ספריית JavaScript פופולרית לבניית ממשקי משתמש. כדי להתחיל לעבוד עם React בצורה יעילה, חשוב להבין את המושגים הבסיסיים של Props ו-State וקומפוננטות (Component), שהם אבני היסוד של הספריה. במאמר זה נסקור את המושגים הללו, נסביר את השימוש בהם, ונספק דוגמאות קוד להמחשה.
קומפוננטות ב-React
קומפוננטות (Components) הם הבסיס של כל אפליקציית React. קומפוננטה הוא למעשה פונקציה או מחלקה שמחזירה אלמנטי React. ישנם שני סוגי Components.
- קומפוננט מבוסס פונקציה: פונקציות המוגדרות כך שיחזירו JSX.
- קומפוננט המבוסס על מחלקה: מחלקות המורשות מ-
React.Componentוכוללות מתודת render שמחזירה JSX.
דוגמה לקומפוננטה מבוססת פונקציה
import React from 'react';
const Greeting = () => {
return <h1>Hello, World!</h1>;
};
export default Greeting;
דוגמה לקומפוננטה מבוססת Class
import React, { Component } from 'react';
class Greeting extends Component {
render() {
return <h1>Hello, World!</h1>;
}
}
export default Greeting;
Props
Props (קיצור של "properties") הם אובייקטים המאפשרים לנו להעביר נתונים מקומפוננטת הורה לקומפוננטת ילד. Props הם קריאים בלבד (read-only) ולכן אינם ניתנים לשינוי בתוך קומפוננטת הילד.
דוגמה לשימוש ב-Props
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const greeting = "Hello from Parent";
return (
<div>
<ChildComponent message={greeting} />
</div>
);
};
export default ParentComponent;
// ChildComponent.js
import React from 'react';
const ChildComponent = (props) => {
return <h1>{props.message}</h1>;
};
export default ChildComponent;
State
State הוא אובייקט פנימי בקומפוננטה שמאפשר לנו לנהל ולשנות נתונים לאורך חיי הקומפוננטה. State משמש לניהול נתונים שמשתנים במהלך חיי הקומפוננטה, כמו טפסים, ספירות ולחצנים.
דוגמה לשימוש ב-State בקומפוננטה מבוססת מחלקה
import React, { Component } from 'react';
class Counter extends 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>
);
}
}
export default Counter;
דוגמה לשימוש ב-State בקומפוננטה מסוג פונקציה עם useState
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
export default Counter;
תוכלו לקרוא כאן עוד על State Managment
שילוב Props ו-State
נוכל לשלב שימוש ב-Props וב-State יחד כדי להעביר נתונים מקומפוננטת הורה לקומפוננטת ילד ולשנות אותם בתוך קומפוננטת הילד.
דוגמה לשילוב
// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<ChildComponent count={count} increment={increment} />
</div>
);
};
export default ParentComponent;
// ChildComponent.js
import React from 'react';
const ChildComponent = ({ count, increment }) => {
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
export default ChildComponent;
סיכום
במאמר זה למדנו על קומפוננטותומושגים בסיסיים ב-React, כגון Props ו-State. Props משמשים להעברת נתונים מקומפוננטת הורה לקומפוננטת ילד, בעוד State משמש לניהול נתונים פנימיים שמשתנים במהלך חיי הקומפוננטה. הבנה של מושגים אלו ויישום נכון שלהם יאפשרו לכם לבנות אפליקציות React מורכבות ויעילות יותר.
אם אתם רוצים ללמוד עוד על React ונושאים מתקדמים נוספים, מוזמנים להתייעץ איתנו על קורס React
