שימוש ב-Fragment ב-React
div מיותר ב-HTML. ההרצאה מראה איך Fragment פותר את זה.Home (עם הפקודה create functional component), ומציבים אותו בצורה hardcoded בתוך ה-Layout הראשי. ניווט בין דפים (ראוטינג) הוא נושא נפרד.h2 ו-h3 בלבד, React מציגה שגיאה. החוק אומר שמחזירים תגית אחת בלבד (root element), גם אם שתי התגיות באותה שורה.div. זה עובד, אבל מוסיף תגית שאין בה צורך ושמשוכפלת עם כל שכפול של הקומפוננט.Fragment: מייבאים אותו מ-react ועוטפים בו את התוכן. React מקבלת אותו כ-root element, אך אינה יוצרת ממנו תגית ב-HTML הסופי.Fragment אפשר לכתוב תגית פתיחה וסגירה ריקות. זה זהה, מודרני ונפוץ יותר, והמרצה משתמש בה.h2 ו-h3 ישירות בתוך main. עם div הם היו בתוך תגית עוטפת.Fragment לא קשור ל-CSS. אם אין צורך בעיצוב לקומפוננט, אפשר למחוק את קובץ ה-CSS שלו, ואם יש, משאירים.div או בתגית אחרת.פרקי ההרצאה: שימוש ב-Fragment ב-React
תמלול ההרצאה: שימוש ב-Fragment ב-React
הטקסט המלא של הדקות הראשונות בהרצאה «שימוש ב-Fragment ב-React» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לנושא די נרחב, די גדול מבחינת התוכן שיש לו, וזה Component Basics. זה בעצם הדברים הבסיסיים שיש ב-react, ש-react מספקת לנו.
אז אנחנו הולכים לראות את ה-basics עצמם של-react, כאשר כל נתון בסיסי כזה הולך להיות באיזשהו סרטון נפרד. הדבר הראשון שאנחנו רוצים לעשות זה קודם כל איפה אנחנו הולכים לכתוב את כל הדברים האלה, הרי אנחנו בנינו את ה-Layout וב-Layout היה לנו את האזור הראשי של ה-Layout, ראינו את ה-Header,
ראינו את ה-Footer, ראינו את ה-Menu אבל כל הדברים האלה שייכים ל-Layout. אולי בהמשך נוסיף עוד איזה משהו שקשור ל-Layout עצמו אבל איפה אנחנו הולכים לכתוב את כל ה-Basics?
אז כל ה-Basics אנחנו הולכים לבנות בדף Home. בואו רגע ניגש לטרמינל, האמת עוד לא הרצתי את התוכנית הפעם npm art go ובינתיים שהיא תרוץ בואו נפתח טרמינל מספר 2 ונצרף לעצמנו איזשהו דף בייט שבתוכו אנחנו הולכים לבנות את כל מה שקשור לבייסיקס עצמם של ריאקט אז יש לנו כאן את הפקודה create functional
component אבל אנחנו לא רוצים לבנות את זה בתוך האזור של הלאוט אז בואו נייצר לעצמנו אזור שנקרא home ובתוך ה-home אנחנו רוצים הנה האתר מתחיל לרוץ לו נוריד את זה רגע למטה אנחנו רוצים קודם כל קומפוננט שיהיה אחראי על דף הבית שבתוכו אנחנו נראה את כל ה-basics האלה אז נקרא לו גם כן home שימו לב שזה האזור וזה הקומפוננט עצמו שלא יבלבל
נריץ את זה רגע ואנחנו רואים שהמערכת בנתה לנו כאן home קומפוננט שנקרא home עד כאן זה בסדר יש לנו את האתר שרץ לו ודבר ראשון בואו נציב את ה-home כאן עכשיו אנחנו כמובן יודעים שאנחנו רוצים לראות את האזור של דף הבית רק כאשר היוזר לוחץ על התפריט של ה-home
ואם הוא ילחץ על התפריט של המוצרים אז הוא כמובן יראה כאן את האזור של המוצרים הדבר הזה קשור לנושא האחר שנקרא ראוטינג אנחנו לא מתעסקים כרגע עם ראוטינג אנחנו מתעסקים עם דברים בסיסיים יותר בריאקט ולכן בגלל שאני לא רוצה כרגע בנושא הזה להיכנס לראוטינג אז אני אציב בצורה hardcoded את ה-component
של ה-home. בואו רק ניגש ונכתוב כאן איזה h2 כזה home page רק בשביל לראות משהו וניגש לאזור של ה-layout הראשי את זה אפשר לסגור ובמקום p נגדיר שאנחנו רוצים hardcoded כרגע את ה-home.
אז הנה אנחנו רואים שהוא נמצא פה. בואו רגע נסתכל על האתר, והנה אנחנו רואים שפשוט שתלנו את זה. זה לא משנה, התפריט כרגע לא עובד, זה יעבוד בנושא הראוטינג.
כאן אנחנו רוצים עכשיו לראות את הדברים הבסיסיים שריאקט מספקת לנו. אז מה אנחנו הולכים לראות בתור דבר ראשון בסרטון הזה?
הדבר הראשון שאנחנו הולכים לראות שהוא דבר בסיסי שריאקט מספקת לנו זה קונספט שנקרא fragment. מה זה אומר fragment? מעין קומפוננט אפשר להגיד שריאקט מכילה שחוסכת לנו תגית מיותרת.
מה הכוונה? בוא נניח שאנחנו רוצים באמת את הקומפוננט הזה של ה-home והנה אנחנו רואים פה את ה-H2, הכל בסדר, אבל אנחנו נמצאים בתוך הדיב הזאת.
אנחנו רואים שיש לנו פה איזושהי דיב שאנחנו נמצאים בתוכה. וזה בסדר כרגע, אבל בואו נניח שאני רוצה לעשות אולי משהו קצת אחר.
בואו נניח שאני רוצה שיהיה לי כאן h2 ובואו נגיד גם h3 שם subheader ועוד כל מיני דברים שהולכים להיות פה בהמשך. אם אני מסתכל אני רואה את זה כאן. למה בעצם אני צריך את זה?
למה יש לנו תמיד את הדיב הזאת שאנחנו רואים שעוטפת את כל הקומפוננטות? אז אתם יכולים להגיד, נו ברור, אתה רוצה שיהיה לך איזשהו קלאס ניים?
אוקיי, בסדר, בוא נניח שאני לא רוצה קלאס ניים, לא רוצה איזושהי דיב עוטפת שמכילה לי את הקלאס ניים, אולי אני לא רוצה בכלל עיצוב כרגע עבור, לפחות לא עבור הקומפוננט הזה.
ויש לנו פה איזושהי דיב שעוטפת לנו את הכל, אבל האם אני באמת צריך אותה? מה, אם לא היה לי את הדיו אז הקומפוננט לא היה מוצג? מה, לא היינו רואים את ה-H2 ואת ה-H3? אז בואו ננסה, בואו נוריד רגע את הדיו וכבר אנחנו חוטפים שגיאה והמערכת לא מסכימה.
למה? בגלל שברגע שאנחנו מחזירים מידע מקומפוננט, החוק בריאקט אומר שהמידע חייב להיות בתגית אחת. זה לא משנה אם יש לה עיצוב או אין לה עיצוב, אבל חייבת להיות משהו שנקרא רוט אלמנט, שעוטפת לנו את כל ה-Component הזה.
אז אתם יכולים להגיד, נו בסדר, אז שים דיו, מה הבעיה? אוקיי, אין כזאת בעיה, אבל זה אומר שרק בגלל חוקי React היינו צריכים להוסיף דיו.
יש לי עכשיו תגית ב-HTML שאני לא באמת צריך אותה, אני לא רוצה את הדיו הזאת, אין לה שום עיצוב, היא לא נותנת לי שום דבר ב-HTML, והסיבה בעצם היחידה שהיא קיימת כאן זה בגלל ש-React אומרת לי שאם אתה בונה קומפוננט אתה חייב להחזיר מהקומפוננט תגית האחת ויחידה, בתוכה תחזיר מה שאתה
רוצה, אתה לא יכול להחזיר שתי תגיות או יותר מהקומפוננט, אין דבר כזה, גם לא אם תשים לי את הכל נניח בשורה אחת, React לא מסכימה להחזיר יותר מתגית אחת ובתוכה שיהיה הכל.
טוב, בואו רגע נעשה קונטרול Z, נחזיר את הדיו. זה המצב, זה בגללו בעצם אנחנו רואים כאן שאנחנו מחויבים מבחינת React באיזושהי תגית עוטפת.
וזה איזשהו חיסרון, כי עכשיו יש לנו בדפדפן תגית מיותרת, שאנחנו לא באמת צריכים אותה בשביל הדף עצמו. אם היה לי פה איזשהו עיצוב שהייתי רוצה בשביל כולם, ברור שהייתי רוצה לעטוף אותה.
אם היה לה משמעות אחרת, נניח הייתי רוצה, לא יודע מה, לשים את כל החבר'ה האלה במסגרת כלשהי, או בצד, או משהו כזה, שזה כן הגיוני לשים פה איזה דיב, או הייתי רוצה להעלים אותם בבת אחת, הייתי משאיר את הדיב הזאת או איזושהי תגית אחרת.
אין שום היגיון בתגית כזאת. אז מה הפתרון שריאק נותנת לנו? אז ריאק אומר את שמו, אתם לא חייבים שיהיה לכם פה דיב או תגית אחרת, אתם כן חייבים איזשהו רוט אלמנט, אבל בשביל זה יש קומפוננט שנקרא פראגמנט.