PracticU

מה זה מבנה בסיסי של אתר - React Layout ?

בלי כתוביותעם כתוביות
PracticU › קורס ריאקט - React › מה זה מבנה בסיסי של אתר - React Layout ?
מילון מושגים:
React - ספריית JavaScript לבניית ממשקי משתמש מבוססי רכיבים, שפותחה על ידי פייסבוק.
לייאאוט - ארגון וסידור הרכיבים החזותיים על המסך או בדף, כמו מיקום כפתורים, טקסט ותמונות.
HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.
רכיב - יחידת בניין עצמאית וניתנת לשימוש חוזר בתוך מערכת או ממשק משתמש, שאחראית על חלק מוגדר מהתפקוד.

מה זה מבנה בסיסי של אתר - React Layout ?
מתחילים לבנות את האתר בפועל, והנושא הראשון הוא ה-Layout, הסידור הכללי של האתר. ההרצאה מסבירה מהו ואיך הוא נבנה בעזרת קומפוננטות.
הרעיון
1. מהו Layout: הסידור הכללי של החלקים בכל דף. בדוגמה יש כותרת למעלה, זכויות יוצרים למטה, פרסומות משני הצדדים, תפריט עם Home, About, Products ו-Contact, ואזור תוכן.
2. מה משתנה: לחיצה על פריט בתפריט מחליפה רק את התוכן. הכותרת, הפרסומות והזכויות נשארות כפי שהן. המשתמש רואה כמה דפים, למרות שמאחורי הקלעים יש index.html אחד.
3. הבעיה בדפי HTML נפרדים: היינו חוזרים על אותו קוד של הכותרת, האזורים והתפריט בכל דף.
4. הפתרון בקומפוננטות: בונים קומפוננטה גדולה אחת ל-Layout, ובתוכה משתילים קומפוננטות לכל חלק. רק היא נשתלת ב-index.html, וכל שאר הקומפוננטות נשתלות בתוכה.
5. החלפת תוכן: איך מחליפים את הקומפוננטה בלחיצה על קישור יילמד בהמשך.
בנושא הזה בונים את קומפוננטת ה-Layout ואת הרכיבים הקבועים שבתוכה. אחרי ההרצאה אפשר להסביר למה Layout הוא קומפוננטה אחת ולא קוד שחוזר בכל דף.
השיעור הבא בקורס: עיצוב CSS ב-React

פרקי ההרצאה: מה זה מבנה בסיסי של אתר - React Layout ?

  1. 00:00

    מהו Layout של אתר

  2. 00:44

    כותרת, זכויות יוצרים ופרסומות

  3. 01:41

    רק התוכן מתחלף בין הדפים

  4. 02:15

    שכפול קוד בדפי HTML נפרדים

תמלול ההרצאה: מה זה מבנה בסיסי של אתר - React Layout ?

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

  1. 00:02

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

  2. 00:15

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

  3. 00:30

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

  4. 00:55

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

  5. 01:22

    פה גם נקרא לזה קונטקט כרגע רגע כי זה מה שנכנס לי למקום פה אז בוא נניח שזה התפריט שלנו אני לוחץ על home פה אני רוצה לראות את דף הבית אבל כל הדברים האחרים נשארים as is אם יש לי פה כותרת היא נשארת אם יש לי זכויות יוצרים למטה זה נשאר פרסומות פה בוא נניח נשארות או כל מיני מבצעים שאני יכול לשים פה נשארים about רק התוכן הזה

  6. 01:59

    מתחלף הכל נשאר אותו הדבר מוצרים אני רואה אותם פה אבל הכל נשאר אותו הדבר דבר וכולי וכולי אז כל המבנה הכללי הזה של החלקים השונים נחשב layout של האתר ואנחנו רוצים את ה-layout הזה בכל אחד מהכביכול דפים שיש לנו אם היינו בונים את האתר הזה בעזרת דפים שונים של html היינו צריכים לחזור

  7. 02:24

    על הקוד הזה בכל אחד מהדפים וכמובן יש שכפול קוד כל קובץ html היינו צריכים לרשום פה את הכותרת ופה את האזורים בצד שאנחנו נשים בהם

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

ההרצאה הקודמת: שחזור node modules

ההרצאה הבאה: עיצוב CSS ב-React

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

  • מבנה בסיסי של מחשב
  • מבנה אתר אינטרנט - Grid Layout - חלק 1
  • Layout
  • יצירת Layout

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

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