מדריך מלא: יצירת רשימת ספרים בפרויקט React

🧠 מה React מאפשרת לך?

📘 מדריך: בניית פרויקט ב־React עם פיצול רכיבים

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

🧩 מה ההבדל מ־HTML רגיל?

ב־HTML רגיל הכל בקובץ אחד. ב־React אנו מפרידים לרכיבים – מה שמאפשר לכתוב קוד קריא, ניתן למחזור ולתחזוקה קלה.

🧱 שלבי הבנייה:

• 🔹 שלב 1: books.jsx

  השלב הזה יוצר את ה־List — מערך של פריטים (ספרים) שנשתמש בו. זה הבסיס ל־Lists & Keys.

  
• 🔹 שלב 2: Book.jsx

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

  
• 🔹 שלב 3: BookList.jsx

  כאן מתבצעת הליבה של Lists & Keys: אנחנו עוברים עם map() על מערך הספרים ומייצרים רכיב Book לכל איבר. בשלב זה חשוב להוסיף prop בשם key כדי ש־React תוכל לזהות כל רכיב ולנהל אותו ביעילות.

  
• 🔹 שלב 4: App.jsx

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

  
• 🔹 שלב 5: main.jsx

  מניע את כל המערכת. כאן אנחנו מבצעים את ה־render ומתחילים את חוויית המשתמש.

  

🔗 איך זה קשור ל־Lists & Keys?

• 📄 ה־List נוצר בקובץ books.jsx כמערך של אובייקטים.
• 🔁 אנחנו משתמשים ב־map() כדי לעבור על הרשימה ולהפוך כל ספר לרכיב Book.
• 🔑 כדי למנוע בעיות ולהבטיח ביצועים, לכל רכיב Book אנחנו מוסיפים prop בשם key עם מזהה ייחודי.
• ⚙️ React משתמשת ב־key כדי לדעת איזה רכיב השתנה, נוסף או הוסר – זה משפר את הביצועים ומונע באגים.