PracticU

ניתוב בריאקט - React Routing

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › ניתוב בריאקט - React Routing
מילון מושגים:
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
דפדפן - תוכנה שמציגה דפי אינטרנט ומריצה את הקוד שבהם, ומאפשרת לגלוש בין אתרים, למשל Chrome או Firefox.
ראוט - הגדרה שמקשרת כתובת בקשה לקוד שמטפל בה באפליקציה. גם מסלול שדרכו עוברות חבילות ברשת.
URL - הכתובת שמזהה משאב באינטרנט, למשל דף אתר, וכוללת פרוטוקול, שם מארח ונתיב.
נתיב - מחרוזת שמתארת את מיקומו של קובץ או תיקייה במערכת הקבצים, או כתובת של משאב בתוך אתר.
root - משתמש העל במערכות Linux, בעל הרשאות מלאות לכל פעולה. גם הרמה העליונה בעץ של תיקיות או נתונים.
פרמטר - ערך שמועבר לפונקציה או לפקודה כקלט, ומשפיע על אופן פעולתן ועל התוצאה שהן מחזירות.
דומיין - תחום ניהולי משותף של מחשבים ומשתמשים ברשת ארגונית, המנוהל מרכזית. גם שם ייחודי של אתר באינטרנט.

ניתוב בריאקט - React Routing
ראוטינג הוא המנגנון שמאפשר לאתר ריאקט להציג קומפוננט שונה לפי הכתובת בדפדפן. לפני שבונים אותו, חשוב להבין מהו ראוט.
מה זה ראוט
1. ראוט: החלק הפנימי של ה-URL אחרי הכתובת הראשית של האתר. ב-www.mysite.com/about הראוט הוא /about, וב-/toys/puzzles הראוט הוא כל הנתיב הפנימי, לא מילה אחת בלבד.
2. הראוט הראשי: כשאין נתיב פנימי, הראוט הוא / בלבד, ונקרא גם root.
מה זה ראוטינג
1. המנגנון: מציג קומפוננט בהתאם לראוט הנוכחי שכתוב בדפדפן. זה לא משנה אם המשתמש הקליד את הכתובת או לחץ על תפריט שכותב אותה.
2. דוגמאות: /home מציג קומפוננט Home, /support מציג support, /products מציג product list, ו-/news/sport מציג קומפוננט אחד של חדשות ספורט.
3. Route Parameter: מידע שנמצא בתוך הראוט עצמו. במקום לבנות קומפוננט לכל אחד מ-500 סוגי ממתקים, כמו /candies/kitkat ו-/candies/oreo, בונים קומפוננט אחד, candy details, שקורא את הפרמטר ומביא את הנתונים המתאימים מהדאטה.
שימו לב
הראוט תמיד נמדד מהדומיין פנימה, לא כולל הכתובת הראשית. בסרטונים הבאים בסדרה בונים את המנגנון בפועל.
אחרי ההרצאה אפשר לזהות את הראוט בכל כתובת ולהסביר איך הוא קובע איזה קומפוננט יוצג.
השיעור הבא בקורס: יצירת קומפוננטת ניתוב - ריאקט

פרקי ההרצאה: ניתוב בריאקט - React Routing

  1. 00:00

    מהו Route

  2. 01:04

    דוגמאות לכתובות ניתוב

  3. 02:06

    הראוט הראשי slash

  4. 02:45

    הצגת קומפוננט לפי הראוט

  5. 03:42

    ניתוב לקומפוננטות שונות

  6. 04:16

    מהו Route Parameter

תמלול ההרצאה: ניתוב בריאקט - React Routing

הטקסט המלא של הדקות הראשונות בהרצאה «ניתוב בריאקט - React Routing» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

  1. 00:02

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

  2. 00:16

    ראוט זה פשוט הניתוב הפנימי של כתובת ה-URL בתוך האתר שלנו, כתובת הפנימית לאתר שלנו או באתר שלנו. יש לנו את הכתובת הראשית לאתר, יכול להיות אחרי הכתובת הראשית עוד המשך של מעין ניתוב פנימי.

  3. 00:38

    בואו נראה כמה דוגמאות. נניח שיש לנו איזשהו url שהאתר שלנו זה mysite.com בואו נראה רגע לייזר פוינטר יש לנו mysite.com אוקיי אז הכתובת הראשית של האתר זה לדוגמה www.myside.com אבל יש פה איזשהו ניתוב פנימי לדוגמה /about במקרה כזה הראוט הוא פשוט /about

  4. 01:09

    אפשר להגיד שהראוט הוא about אפשר להגיד שהוא /about בוא נראה דוגמה נוספת הראוט לא חייב להיות בנוי ממילה אחת הנה לדוגמה מצב שבו יש לנו את ה-myside.com ואז יש לנו toys אבל פאזלס זאת אומרת בתוך טויז אנחנו רוצים לקבל רק פאזלס הראוט במקרה הזה זה שוב הכתובת הפנימית מכאן מסוף המייסאי.קום שזה הדומיין פנימה אז הנה אנחנו רואים סלאש טויז סלאש פאזלס

  5. 01:44

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

  6. 02:16

    אז אחרי שהבנו מה זה ראוט שזה רק אלה מה שנמצא פנימה, קל לנו להבין מה זה ראוטינג. ראוטינג זה פשוט מנגנון שמאפשר להציג קומפוננט כתלות בראוט.

  7. 02:32

    כתלות ב-rout הנוכחי שכרגע כתוב בדפדפן עצמו. בואו נראה כמה דוגמאות. אז בוא נניח שה-rout שכרגע מצוין בדפדפן זה כמובן כלומר כל ה-url זה כמובן www.mysite.com או לא משנה כל כתובת שהיא ואז ה-rout הוא /home אם זה המצב יכול להיות שאנחנו רוצים להציג את ה-component שאחראי לדף הבית.

  8. 03:05

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

  9. 03:25

    המנגנון של הראוטינג מאפשר לפי הראוט הזה להציג את הקומפוננט המתאים שאנחנו רוצים. בואו נראה עוד כמה דוגמאות. אם הראוט שכתוב למעלה, שוב, לא משנה איך, יוזר כתב, יוזר לחץ על תפריט וכו', הוא slash support.

  10. 03:42

    אנחנו רוצים להציג קומפוננט שנקרא support. יוזר מציג, יוזר כותב בדפדפן products, אז אנחנו רוצים להציג product list. כמובן, כל הראוטים האלה זה אחרי הכתובת הראשית של האתר.

  11. 03:59

    מה קורה אם זה מה שכתוב? news slash support. אנחנו תמיד מציגים קומפוננט אחד, לדוגמה במקרה הזה אנחנו מציגים ספורט ניוז שזה איזשהו קומפורנט אחד זאת אומרת כל זה זה הראוט ולפי כל הראוט הזה אנחנו מציגים רק את הקומפורנט הזה אפשר לבצע משהו שנקרא ראוט פרמטר ראוט פרמטר זה מידע שיכול להיות כל דבר שאנחנו

  12. 04:27

    יכולים לשים בראוט עצמו במקום מיוחד הנה לדוגמה

לקורס המלא: קורס ריאקט אונליין

ההרצאה הקודמת: בניית Custom React Hook

ההרצאה הבאה: יצירת קומפוננטת ניתוב - ריאקט

הרצאות קשורות מקורסים אחרים

  • ניתוב בתפריט עליון - ROUTING
  • ניתוב סטטי צף
  • ניתוב ספציפי
  • Swarm - Layer 7 Routing - HTTP Host Header

קורסים נוספים במסלול

  • קורס יסודות HTML - בניית אתר אינטרנט פשוט
  • קורס CSS 3 - בדגש על Flex & Grid
  • קורס Javascript כולל JQuery
  • קורס ג'אווה סקריפט מעשי - JavaScript
  • קורס TypeScript
  • קורס NodeJS