מה זה React ולמה אנחנו צריכים אותה?

מה זה React?

React היא ספריית JavaScript לפיתוח ממשקי משתמש (UI). אם פעם עבדתם עם אתרים אינטראקטיביים שהיו מגיבים לפעולות של המשתמש, כמו כפתורים שנלחצים, טפסים שנשלחים, או מידע שמתעדכן בזמן אמת, סביר להניח שהם עשו שימוש ב-React.

בעצם, React היא ספריית JavaScript שמספקת דרך פשוטה ויעילה ליצור ממשקים דינמיים ומרובי רכיבים, בהם כל רכיב מתפקד כ"קטע עצמאי" של ממשק המשתמש.

למה צריך את זה? נכון, אפשר ליצור אתרים פשוטים ללא React. אבל כשמדובר באתרים או אפליקציות מורכבות, React מציעה פתרונות רבים שיכולים לפשט את הפיתוח ולהפוך את הקוד ליותר נקי ותחזוקתי.

למה אנחנו צריכים React?

אם נחשוב על אתר אינטרנט בסיסי, אפשר ליצור אותו באמצעות HTML ו-CSS בלבד, אך זה לא יספיק אם נרצה ליצור אתר אינטראקטיבי או אפליקציה עם ממשק משתמש דינמי. כאן נכנסת React.

React מאפשרת לנו ליצור רכיבים עצמאים שמייצגים חלקים שונים בממשק המשתמש, ולשלוט בהם בצורה דינמית:

• רכיבים (Components): כל רכיב ב-React הוא עצם עצמאי עם ממשק משתמש משלו, שניתן לשנות ולעדכן בקלות.
• סטייט (State): React מאפשרת למעקב אחר שינויים במידע בתוך הרכיבים וגורמת לדף להתעדכן אוטומטית כשיש שינוי.
• יישומים חד-עמודיים (SPA): בעזרת React, ניתן ליצור אפליקציות שלמות שמגיבות לפעולות המשתמש ללא צורך בטעינה מחדש של הדף כולו.

למעשה, כל אתר או אפליקציה מודרנית — כמו אתרי חדשות, רשתות חברתיות (פייסבוק, אינסטגרם), ואתרי מסחר אלקטרוני (אמזון, איביי) — מבוססים על React או ספריות דומות.

בואו נצלול לעומק 🧠 🌊 🤿

מה זה רכיבים (Components)?

ב-React, רכיבים (Components) הם החלקים שמרכיבים את הממשק שלנו. כל רכיב אחראי להציג מידע מסוים או לבצע פעולה מסוימת — בדיוק כמו לגו: כל חלק הוא עצמאי, אבל אפשר להרכיב אותם יחד כדי ליצור משהו גדול ושלם.

למה רכיבים כל כך מיוחדים?

שימוש חוזר (Reusable): רכיב יכול לשמש במקומות שונים באתר, כך שלא צריך להמציא את הגלגל כל פעם מחדש. עצמאיים (Independent): רכיב פועל באופן עצמאי, מה שמקל על תחזוקה ושדרוג של הקוד. HTML בתוך JavaScript! רכיבים ב-React מאפשרים לנו לשלב קוד HTML בתוך JavaScript בעזרת תחביר מיוחד שנקרא JSX.

זה מה שהופך את הפיתוח ב-React לכל כך מרגש — לא צריך להפריד בין הלוגיקה של הקוד לעיצוב של הממשק.

איך יוצרים רכיב? רכיב ב-React זה בעצם פונקציה. הפונקציה מחזירה אלמנט HTML, וזה מה שיוצג על המסך.

דוגמה לרכיב פשוט:

function Greeting() {
  return <h1>שלום ברוך הבא ל-ריאקט</h1>;
}

מה קרה כאן?

HTML בתוך JavaScript: שימו לב ל-<h1>, זה לא קובץ HTML רגיל — זה קוד JSX שמשולב בתוך JavaScript!

עצמאות: רכיב זה אחראי אך ורק על הצגת הכותרת "שלום, ברוך הבא ל-React!".

שימוש חוזר: אפשר להשתמש ברכיב זה כמה פעמים שרוצים.

מה זה Props?

Props הם דרך להעביר מידע לרכיבים ב-React. בעזרת props, אפשר לשלוט על מה שהרכיב מציג, כך שאותו רכיב יכול לשמש במצבים שונים עם נתונים משתנים.

דוגמה פשוטה: נניח שיש לנו רכיב שמציג כותרת. בעזרת props, נוכל לשלוט על הטקסט של הכותרת בכל פעם שנשתמש ברכיב:

function Title(props) {
  return <h1>{props.text}</h1>;
}

כאן, props.text הוא המידע שהרכיב יקבל.

איך משתמשים ב-Props?

כשאנחנו משתמשים ברכיב, אנחנו פשוט מוסיפים לו את המידע שחשוב לנו:

function App() {
  return (
    <div>
      <Title text="ברוכים הבאים!" />
      <Title text="React זה כיף!" />
    </div>
  );
}

בפעם הראשונה, הכותרת תהיה "ברוכים הבאים!".

בפעם השנייה, הכותרת תהיה "React זה כיף!".

למה Props שימושיים?

Props מאפשרים לרכיב להיות גמיש ולשמש במצבים שונים. במקום לכתוב רכיב חדש בכל פעם, אנחנו יכולים להשתמש באותו רכיב שוב ושוב, אבל לשנות את התוכן או ההתנהגות שלו בעזרת props.

לסיכום:

Props = "נתונים שהרכיב מקבל".

Props - הופכים את הרכיבים ב-React לגמישים, כך שאפשר להשתמש באותו רכיב עם תוכן או התנהגות שונה בכל פעם.

Props - הם דרך פשוטה להפוך את הקוד שלכם לנקי וקל לתחזוקה.

מה זה State ב-React?

State (מצב) הוא כלי ב-React שמאפשר לרכיבים לזכור מידע ולהגיב לשינויים.

בניגוד ל-Props שמגיעים "מבחוץ", ה-State הוא פנימי לרכיב עצמו ומשתנה במהלך הזמן בהתאם לפעולות המשתמש או אירועים בדף.

למשל, אם יש כפתור שמשנה טקסט כאשר לוחצים עליו, המידע הזה (הטקסט הנוכחי) נשמר ב-State של הרכיב.

למה State חשוב?

State מאפשר לרכיבים להיות דינמיים ואינטראקטיביים. זה אומר שהממשק שלך יכול "להגיב" לפעולות של המשתמש בצורה חכמה.

דוגמה פשוטה לשימוש ב-State

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // שמתחיל ב-0 'count' בשם State הגדרת

  const handleClick = () => {
    setCount(count + 1); // עדכון ה-State בכל לחיצה על הכפתור
  };

  return (
    <div>
      <h1>המספר הנוכחי: {count}</h1> {/* הצגת ה-State */}
      <button onClick={handleClick}>הוסף 1</button> {/* שינוי ה-State בלחיצה */}
    </div>
  );
}

export default Counter;

מה הדוגמה הזאת עושה?

הגדרנו State בשם count שמתחיל מהערך 0.

בכל פעם שלוחצים על הכפתור, אנחנו משתמשים בפונקציה setCount כדי להגדיל את count ב-1. התוצאה? המספר שמוצג על המסך מתעדכן מיד.

איך State עובד?

useState: הוא הכלי שמאפשר לנו להגדיר State בתוך רכיב.

הוא מחזיר מערך עם שני ערכים: הערך הנוכחי של ה-State (בדוגמה: count).

פונקציה שמשנה את ה-State (בדוגמה: setCount).

שינוי ה-State: כשמשתמשים ב-setCount, React מעדכנת את הערך של count ומרעננת את מה שרואים על המסך.

לסיכום:

State הוא "הזיכרון" של הרכיב. הוא משמש כדי לשמור ולעקוב אחרי מידע שמשתנה.

כל שינוי ב-State גורם ל-React לרענן את הרכיב ולהציג את המידע החדש.

State הופך רכיבים ב-React לדינמיים ומאפשר להם "להגיב" לשינויים בצורה חכמה! כמו בכל אפליקציה 😊