ריאקט - יצירת תפריט באתר - Menu
nav, וכך מנועי חיפוש וכלי נגישות מזהים אותו. במקום div חיצוני ו-nav בתוכו, הקופסה של הקומפוננט עצמו הופכת ל-nav.a: דף הבית, מוצרים, תמיכה ויצירת קשר. כל ה-href מצביעים בינתיים על הדף הנוכחי, כי עדיין אין דפים אמיתיים.display: flex ו-flex-direction: column, כדי שהקישורים יופיעו אחד מתחת לשני.a בתוך התפריט נותנים margin-top של 20 פיקסלים.color: blue ל-a. את זה כותבים ב-index.css ולא בקומפוננט, כך שהצבע חל על כל הקישורים באתר.פרקי ההרצאה: ריאקט - יצירת תפריט באתר - Menu
תמלול ההרצאה: ריאקט - יצירת תפריט באתר - Menu
הטקסט המלא של הדקות הראשונות בהרצאה «ריאקט - יצירת תפריט באתר - Menu» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
מה שנשאר לנו לעשות ב-Layout זה רק התפריט. בואו ניגש, את זה אפשר לסגור את כל אלה. פאנל נקה פה, טרמינל, חץ למעלה, Create Functional Component ובאזור של ה-Layout אנחנו רוצים לבנות קומפוננט שנקרא מניו כי הוא מתאר את התפריט.
הוא יהיה בתוך האזור שבצידי הדף אבל הקומפוננט עצמו מהווה תפריט ולכן הוא נקרא מניו. בואו, בוא תבנה לי אותו, thank you, גש לפה ויש לנו את ה-CSS שלו, נשים אותו רגע פה בצד ואנחנו רוצים תפריט.
רגע, תפריט נמצא לפי חוקי HTML בתוך תאגיד שנקראת nav, בצורה כזאת, בכדי שמנועי חיפוש ידעו שמדובר בתפריט הראשי וגם כל מיני כלי נגישות ידעו שמדובר בתפריט הראשי אז מאוד חשוב לעטוף את התפריט הראשי לא סתם לינקים אלא ספציפית הלינקים של התפריט הראשי בתגיד nav אבל כאן יש לי כאילו משהו קצת מיותר יש לי
פה דיו שהתפקיד שלה זה להיות קופסה של הקומפוננט ובתוכה יש עוד קופסה שהתפקיד שלה להיות nav בשביל לתאר לכל מיני מערכות שאנחנו תפריט ראשי במקום לעשות את זה בואו נגדיר שהדיו הזאת נקראת nav פשוט מאוד במקום שיהיה לנו את ה-Nav הזה.
אנחנו לא חייבים שה... משהו בעצם נמחק לי, מה נמחק לי? אוקיי, זה נמחק לי. אנחנו לא חייבים שהקופסה הזאת ששייכת לקומפוננט תהיה תמיד דיו.
מקובל, אבל לפעמים בא לי שהיא תהיה משהו אחר, אז הנה אני רואה שהקופסה היא Nav. ואם אני רוצה לשמור על אחידות, יכלתי שזה יהיה דיו ובתוך לשים Nav וזה גם בסדר.
אז מה שאנחנו רוצים לעשות זה פשוט סדרה של לינקים. לינק זה תגיד a, אנחנו רוצים לינק עבור דף הבית. כרגע אין לי שום דף בית באמת, אין לי באמת את הלינקים האלה, אז בואו נגדיר להם שהם href שמצביעים לנו על דף הנוכחי, סולומית זה הדף הנוכחי.
נשכפל את זה למספר לינקים. בואו נגיד שאנחנו רוצים מוצרים. בואו נגיד שאנחנו רוצים אבאוט או בואו נקרא לזה ספורט יותר טוב לנו שזה יהיה כאילו תמיכה באתר ובואו נגיד שאנחנו רוצים קונטקט אס שימו לב אין לנו כרגע באמת לינקים כאלה שאנחנו גולשים אליהם בהמשך יהיו כרגע יש לנו את הלינקים
הספציפיים האלה אז אם אנחנו מסתכלים על הקומפוננט בעצם בואו קודם כל נשתול אותו במקום שלו. זה אמור להיות באזור הזה במקום ה-B בצידי הדף.
אז יש לנו Component Menu, פרנו, סגרנו, הנה הוא פה, ועכשיו אנחנו אמורים כאילו לראות את התפריט. בואו נסתכל מה אנחנו רואים, נרפרש קודם כל.
והוא לא מסכים, למה הוא לא מסכים? חסר לי closing tag ל-D, איפה חסר לי closing tag ל-div? מוזר, אני לא רואה שחסר לי closing ל-div. או, נרגע.
זה לא מה שאני רוצה לראות. בואו נהיה בוטים. זה לא מה שאני רוצה לראות. אני רוצה תפריט home מתחת product, מתחת support, מתחת contact us, מפני שיש לי פה את הפאנל הזה שאני רוצה את התפריט אחד מתחת לשני.
זה מה שהחלטתי בלארט. אוקיי, css, טפל בזה. אז כל מה שאנחנו צריכים לעשות זה להשתמש ב-flex, פלקס מומחה בטיפול בסדרת פרטים ברצף.
דיספליי, פלקס ואנחנו רוצים להגיד לו פלקס דיירקשן קולום. נדמה לי שזה מספק אותנו, בואו נראה, יופי. אבל אולי טיפה כדאי לרווח ביניהם, אז בואו נגיד שכל מה שנמצא תוך המניו, למרות שזה יכול להיות A גם, A שנמצא בתוך המניו, אנחנו רוצים מרג'ין טופ עשרים פיקסלים.
בואו נפרש אותו. יש לנו פה טיפה ריווח. הם לא עושים כלום, אבל יש לנו פה טיפה ריווח. אולי כדאי גם שהצבע שלהם לא ישתנה לנו לסגול כזה.
בגלל שדפדפן רואה שכבר גלשתם לאנשהו, אז הוא שם לכם סגול. אז אני רוצה שהצבע שלהם יהיה כחול. כמובן שאני יכול לבוא לפה ולצבע אותם בכחול, אבל מה אם הייתי רוצה שכל הלינקים באתר כולו יהיו כחולים? אני לא רוצה לראות את הצבע הסגול