יצירת קומפוננטת ניתוב - ריאקט
react-router-dom, ובפרויקט TypeScript מתקינים גם את @types/react-router-dom.BrowserRouter את כל קומפוננטת ה-Layout, כולל התפריט ואזור התוכן, כי שניהם קשורים לראוטינג. זה תפקידה היחיד.ProductList בתוך אזור product-area, כדי שיהיה מה להציג. היא נבנית כ-class component (cc) כי בהמשך יהיה בה state.Routing בתוך אזור ה-Layout, בלי CSS ובלי props, שמכילה את ההגדרות. את הקומפוננטה מציבים ב-Layout במקום הקומפוננטות שמוצגות שם עד עכשיו.Switch רק ראוט אחד נבחר. כל Route מקבל path ו-component: הנתיבים /home, /products (עם ProductList), /support ו-/contact-us. שימו לב לייבא את Switch ו-Route מ-react-router-dom ולא מ-Material UI, וכתיבת הנתיבים נעשית במקפים (kebab-case), לא ב-camelCase./home, /products וכו' מציגה את הקומפוננטה המתאימה. התפריט עדיין לא עובד, ויטופל בסרטון הבא.exact: בלי exact, כתובת כמו /home עם המשך כלשהו עדיין מציגה את Home, כי הראוט מתאים לכל נתיב שמתחיל בו. הוספת exact לכל ראוט מונעת זאת.פרקי ההרצאה: יצירת קומפוננטת ניתוב - ריאקט
תמלול ההרצאה: יצירת קומפוננטת ניתוב - ריאקט
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת קומפוננטת ניתוב - ריאקט» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו רוצים לגלם באפליקציה שבנינו עד עכשיו את מנגנון הראוטינג. אז הדבר הראשון שאנחנו צריכים לעשות זה התקנה. מנגנון ראוטינג לא מגיע בילד אין עם פרויקט ריאקט.
אנחנו צריכים להתקין איזושהי חבילה שמאפשרת לגלם ראוטינג בפרויקט ריאקט. עכשיו, אם פרויקט ריאקט בנוי רק בג'אווה סקריפט ולא בטייפ סקריפט, אז ההתקנה היא npm i react router dom אם ההתקנה אם סליחה פרויקט הריאקט הוא טייפ סקריפט אז אנחנו צריכים גם את ההתקנה הזאת וגם התקנה
נוספת של טייפים שקשורים לטייפ סקריפט בהקשר של המנגנון של הראוטינג זאת אומרת שמעבר להתקנה הזאת של react router dom אני צריך עוד התקנה אז אני לוחץ כאן רווח ופשוט מתקין גם את ההתקנה השנייה.
אז יש לנו פה, ההתקנה השנייה היא strudel-types/ ואותו הדבר react/router/dom. בואו נתקין את זה.
אוקיי, ובסיום ההתקנה אנחנו יכולים לגשת ולהתחיל לשלב את מנגנון הראוטינג בפרויקט שלנו. עכשיו בואו רגע ניזכר מה בעצם עשינו ב-Layout.
ב-Layout היה לנו כאן את כל המבנה של ה-Layout, ראינו פה את ה-Header והיינו את ה-Side איפה שיש את התפריט ולמטה יש את ה-Footer ובאזור הראשי של ה-Main אנחנו כל פעם השתמשנו בקומפוננטה אחרת.
כלומר אנחנו אין לו פה שימוש כרגע בתפריט שבעזרתו אנחנו מחליפים את הקומפוננטות אלא כשלמדנו על דברים בסיסיים ב-React אז השתמשנו בקומפוננט ה-Home כשלמדנו על עיצובים השתמשנו ב-Support ובקונטקט אס אז בייסיקלי מה שאנחנו רוצים כרגע לעשות זה לגרום לכל
הקומפוננטות להיות מוצגות באזור הזה לא רק לאחת מהן וכמובן שהתפריט יקבע איזה קומפוננטה מוצגת כאן זה בעצם המהות של מנגנון הראוטינג אז מה אנחנו רוצים לעשות אנחנו רוצים כאן לא להציג אף אחד מהם אלא להציג משהו ששייך למנגנון של הראוטינג, שיבחר את הקומפוננטה המתאימה בהתאם לראוט שכתוב כרגע על הדפדפן.
לצורך כך אנחנו צריכים ב-react לעטוף את כל הקוד שלנו בתגית מיוחדת, אני אעשה אותה כאן, אתם רואים שיש לנו פה את ה-div של כל ה-layout, ומה שאנחנו צריכים לעשות זה לעטוף, בעצם אנחנו לא צריכים לעטוף את כל הקוד אנחנו צריכים לעטוף רק את מה שקשור למנגנון הראוטינג אבל תכף אתם תראו שלא רק האזור הזה קשור למנגנון הראוטינג אלא גם התפריט קשור
למנגנון הראוטינג. אז אני צריך עכשיו תגיד שעוטפת לי גם את התפריט וגם את האזור הזה לכן אני לא אעשה אותה כאן שעוטפת מעין משהו מוזר כזה באמצע אני פשוט אעטוף הכל.
זה גם כן משהו שהוא די מקובל לביצוע. התגית נקראת browser router, הנה היא כאן. אז בואו ניקח אותה, נגיד שזה ההתחלה שלה, זה הסוף שלה, היא פשוט עוטפת לנו את כל הקומפוננטה של הלאוט ולכן היא עוטפת את עץ הקומפוננטות של האתר שלנו.
וזה מבחינת מנגנון הראוטינג משהו שמנהל הכל. כלומר, מבחינת React כל מה שאנחנו צריכים לעשות זה להציב אותו כאן, אין לו תפקיד אחר, אז הצבנו אותו.
סבבה, אז זה דבר ראשון. עכשיו, איזה קומפוננטות אנחנו רוצים שיהיו לנו במנגנון ראוטינג? בואו נסתכל רגע על התפריט. כשלוחצים על home, אנחנו רוצים להציג פה באזור הזה את ה-home קומפוננט.
home קומפוננט זה קומפוננטה שיש לנו. כשלוחצים על support, אנחנו רוצים להציג באזור הזה את ה-support קומפוננט שיש לנו. contact us אמור להציג באזור הזה את ה-contact us שיש לנו.
אבל פרודקטס אין לנו כי עדיין לא התעסקנו עם מוצרים. אז הדבר הבא שאנחנו רוצים לבצע זה לגשת ולייצר את פרודקטס קומפוננט בכדי לגלם אותו במנגנון ה-Layout. אפילו שכרגע אנחנו לא הולכים לכתוב את הקומפוננטה הזאת ורק בהמשך נבנה אותה, רק שתהיה לנו קומפוננטה שנוכל בעצם להראות
משהו. אז בואו ניגש לכאן לטרמינל, ננקה אותו רגע ונבצע קריאייט. cc, אני אבנה אותו כcc כי זה מה שאנחנו נצטרך בהמשך ואני אצור עבורו איזשהו אזור עבור מוצרים כי בטח יהיה לנו כל מיני דברים שקשורים למוצרים אז אני לא רוצה להכניס אותו פה לאזורים האלה
שקיימים אז בואו נייצר אזור שנקרא product area ובתוכו אנחנו רוצים את הקומפוננטה הזאת שנקרא לה product list. בואו נקרא לה product list זה נראה לי שם טוב עבור הקומפוננטה אנחנו נצטרך עבורה בהמשך אני פשוט רוצה רק להכין את הקרקע כרגע state אז אני אבנה אותה בצורה כזאת מקסימום אולי נשנה משהו בהמשך כשנתעסק איתה אבל נראה לי שזה בעצם פותר לנו רק את היצירה שלה בואו
נריץ את זה והנה אנחנו רואים שיש לנו פה אזור חדש פרודקטס אריה ויש לו פרודקט ליסט רשימת המוצרים שזה בעצם הקומפוננטה שאנחנו רוצים לראות כשילחצו פה על התפריט פרודקטס ונראה לי שזה בסדר ואנחנו עכשיו יכולים לצלול ולבנות את מנגנון הראוטינג ואז נציב אותו כאן במקום שיהיה רק אחת מהן
נציב את מנגנון הראוטינג. אז איך אנחנו בונים את מנגנון הראוטינג עצמו? סגנון הראוטינג, מה שנהוג לבצע זה לייצר עבורו קומפוננטה נפרדת, מפני שיש בו קוד.
יש בו איזשהו נפח מסוים של קוד בכדי להגדיר כל מיני הגדרות, אתם תכף תראו, ולכן לא משלבים אותו כאן ממש, לא ממש בונים פה את כל הפקודות, אלא יוצרים קומפוננט נפרד לגמרי.
נהוג לקרוא לקומפוננט הזה ראוטינג, אז בואו נייצר קריייט, הקומפוננט הוא מאוד פשוט, אז ניקח כ-fc ונוסיף אותו לאזור של הלייאוט, הגיוני שהוא שייך ללייאוט שלנו, אז בואו נגדיר כאן layout area, בתוכו אנחנו רוצים ראוטינג, אין לנו צורך בפרופס, היה לנו צורך בסטייט, זה משהו מאוד סימפל.
בואו נראה, layout area, מנגנון ראוטינג, קומפוננט ראוטינג, go, את זה אפשר לסגור, ובתוך ה-LayoutArea אנחנו אמורים לראות פה קומפוננטת ראוטינג.
דבר ראשון, לראוטינג אין CSS. הקומפוננטה עצמה לא מתעסקת עם עיצוב, לכן כבר אנחנו יכולים להוריד כאן את ה-CSS וכבר אנחנו יכולים להיפטר מקובץ ה-CSS, delete, ולהתחיל לבנות את מנגנון הראוטינג.
אז מה בעצם אנחנו רוצים שהקומפוננטה הזאת תעשה? זה כמובן לא קיים, ואני לא צריך כאן, אין לנו גם את ה-class name.
מה בעצם אנחנו רוצים שהקומפוננטה תעשה? מה שאנחנו רוצים שהיא תעשה זה להציג רק קומפוננטה אחת מבין סדרת הקומפוננטות ששייכות לכאן.
זאת אומרת, אם יוזר לוחץ על home, אנחנו פה רוצים לראות את הקומפוננטה של ה-home. אם יוזר לוחץ על product, אנחנו רוצים לראות פה את ה-product list.
support, בוא תראה לי את ה-support קונטקט אס, זה הקומפוננט של הקונטקט אס. זאת אומרת, מה כתוב פה ב-route, לפי זה אנחנו רוצים שהוא יציג לנו את הקומפוננטה.
אבל רק אחת. איזה כלי תכנותי קיים שבודק משהו, לא משנה כרגע מה, ולפי זה עושה רק פעולה אחת או סדרת פעולות אחת?
סוויץ', משהו שקיים בכמעט כל שפת תכנות. אז אנחנו לא כותבים סוויץ' כפקודה תכנותית, יש לספרייה הזאת שהתקנו קומפוננטה שנקראת סוויץ', ושימו לב ל-S הגדולה.
אז אנחנו עכשיו יוצרים את סוויץ', אבל זה לא ממטריאל UI, בגלל שיש לנו מטריאל UI ואנחנו רואים שיש פה המון דברים שמגיעים ממטריאל UI, הנה הסוויץ' שאנחנו רוצים, זה שמגיע מטייפס, סליחה, מריאקט ראוטר דום מהטייפ של ריאקט ראוטר דום אז שימו לב כשאתם מגדירים את זה לא לקחת את
הרכיב הלא נכון כמובן אז אני פשוט אקליק על זה ואני רואה שהוא מביא לי את זה מריאקט ראוטר לפי מה שאני זוכר הוא אמור להגיע מריאקט ראוטר דום זה מעניין למה הוא הביא לי את זה אבל תכף נראה וואלה אם הוא אומר שזה מה שצריך אולי הוא צודק
ואני לא זוכר נכון, בואו נראה. נזרום עם הסוויץ' הזה. אוקיי, אז הנה יש לנו כאן סוויץ'. בתוך הסוויץ' רק ראוט אחד ייבחר. ראוט מוגדר על ידי עוד קומפוננטה שנקראת ראוט בצורה כזאת.
שוב, חשוב לראות שהוא מוביל את זה מריאקט ראוטר דום. הינה אני רואה שהוא הביא לי את זה גם מפה מריאקט ראוטר, אבל נזרום איתו.
וזאת תגית רקע. שאנחנו נותנים לה סדרה של הגדרות. דבר ראשון, מה ה-route שאנחנו רוצים? זה מוגדר על ידי path. בואו נתחיל עם ה-route הראשון, נסתכל רגע מה יש פה, זה לא חייב להיות כרגע לפי הסדר, נתחיל עם home.
אז אני בא ואני אומר, אם ה-route שלי זה /home, חשוב שהוא יתחיל ב-slash, אנחנו רוצים להציג את ה-component home, לא מ-material UI, מאצלנו.
הנה לקחנו את ההום מאצלנו ואם אנחנו מציגים בואו רגע נשכפל את ארבעת הראוטים האלה אם הראוט שכתוב בדפדפן הוא פרודקט בוא תציג לנו את הפרודקט ליסט שלנו