PracticU

יצירת Footer ב-React

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

יצירת Footer ב-React
הקומפוננטה השנייה של ה-Layout היא ה-Footer, שמציג את הודעת זכויות היוצרים. הבנייה דומה ל-Header ומהירה יותר.
השלבים העיקריים
1. יצירה: בטרמינל מקישים חץ למעלה כדי להחזיר את הפקודה הקודמת, מחליפים את header ב-footer ומריצים אותה, וכך נוצרת הקומפוננטה באזור ה-Layout.
2. תוכן: פסקה עם הטקסט "all rights reserved" וסימן זכויות היוצרים.
3. שתילה: ב-Layout.tsx מחליפים את התגית הקודמת ב-Footer, והעורך מוסיף את ה-import. הנתיב יחסי, שתי נקודות עולות תיקייה אחת, ואז יורדים לתיקיית ה-footer, ושם הקובץ נכתב בלי הסיומת .tsx.
4. CSS: מעתיקים את העיצוב של ה-Header, כדי שהטקסט יהיה במרכז, ומקטינים את font-size.
התוצאה היא קומפוננטה שמציגה זכויות יוצרים, תמיד באמצע התחתית. אפשר לשתול קומפוננטה מוכנה ב-Layout ולעצב אותה.
השיעור הבא בקורס: ריאקט - יצירת תפריט באתר - Menu

פרקי ההרצאה: יצירת Footer ב-React

  1. 00:00

    יצירת Footer עם זכויות יוצרים

  2. 00:49

    הצבת ה-Footer ב-Layout

  3. 01:26

    נתיב יחסי באימפורט הקומפוננטה

תמלול ההרצאה: יצירת Footer ב-React

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

  1. 00:02

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

  2. 00:33

    מה אנחנו רוצים שיהיה לנו בקומפוננט עצמו אנחנו רוצים פסקה ולכתוב בתוכה all rights reserved עם איזשהו זכויות יוצרים שזה הסימן של הקופי הזה זהו זה מה שאני רוצה עכשיו מה אנחנו רוצים לעשות בcss קודם כל לפני הcss אולי נציב את הפוטר בואו ניגש רגע לפה ואנחנו רוצים להציב אותו במקום המילאות d. נתחיל לרשום פוטר, נבחר אותו, נסגור,

  3. 01:16

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

  4. 01:37

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

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

ההרצאה הקודמת: יצירת Header ב-React

ההרצאה הבאה: ריאקט - יצירת תפריט באתר - Menu

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

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