יצירת Header ב-React
h1 אחד עם הטקסט "Northwind Web Site".Layout.tsx מוחקים את התוכן הקודם וכותבים פתיחת תגית Header. העורך מציע את הקובץ מ-header.tsx ומוסיף את ה-import בראש הקובץ. אחר כך סוגרים את התגית.header עם h קטנה היא תגית HTML, ו-Header עם H גדולה היא הקומפוננטה. שם התגית הוא תמיד שם הפונקציה שיוצאה, ובריאקט נהוג לכתוב קומפוננטות באות גדולה כדי לא להתבלבל עם תגיות HTML.div העוטף רוחב 100% ו-display: flex. עם flex-direction: column ו-justify-content: center התוכן יושב באמצע אנכית. היישור האופקי כבר מגיע מ-text-align: center של האתר.פרקי ההרצאה: יצירת Header ב-React
תמלול ההרצאה: יצירת Header ב-React
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת Header ב-React» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז אנחנו רוצים לגשת ולבנות את ה-Header. הכלי המדהים הזה, אוסיף אותו, הנה הוא כאן. אנחנו כמובן נעבוד עם הכלי הזה עוד הרבה. ואנחנו רוצים לבנות לעצמנו את ה-Header. כל מה שיש ב-Header זה H1, ובואו נניח אנחנו רוצים לכתוב פה Northwind Web Site.
זאת ההגדרה היחידה שאנחנו רוצים, ואנחנו רוצים גם לעצב CSS, לפני שאני אעצב את ה-CSS בואו נשים את הקומפוננט הזה.
איפה אנחנו רוצים לשים אותו? אז השם של הקומפוננט זה header ואנחנו צריכים לגשת ל-Layout.tsx ובמקום a אז אני אפטר מ-a אני ארד פה שורה ואני אתחיל לרשום פתיחת תגית header והנה אני רואה שהוא מגלה לי אותו פה הוא אומר לי תשמע הוא מגיע מ-src components layout header והקובץ נקרא header.tsx בחר את זה,
נוסיף לך כאן למעלה את האימפורט המתאים, מעולה. אנחנו כמובן צריכים רק לסגור את התגית. אז שימו לב שיש הבדל בין header עם h קטנה שזאת תגית html ל-header עם h גדולה שזה הקומפוננט שבנינו.
השם של התגית שאנחנו שמים זה תמיד השם של הקומפוננט, השם של הפונקציה עצמה, מה שהחצנו החוצה. וזאת הסיבה גם שבריאקט נהוג לקרוא לקומפוננטים באותיות גדולות, שלא יהיה איזשהו בלבול עם תגיות html, שתגיות html זה תמיד באותיות קטנות.
אם אנחנו מסתכלים כרגע על האתר, אנחנו אמורים לראות את ה-h1 כאן, אבל הוא לא נראה לי הכי טוב כזה. תראו, הוא לא ממש רספונסיבי.
אז בואו ניגש לכאן וניתן לו קצת css בכדי להפוך אותו לקצת יותר רספונסיבי. בוא נניח שהוא תופס לי 100% ובוא נניח זה שהוא תופס לי 100% זה אוטומטית הגדיל אותו את הדיו הזאת 100% ובשביל להגדיר את התוכן שלה סליחה זה לא זאת זה אפשר לסגור זה זאת הדיו הזאת בכדי להגדיר שהתוכן שלה יישב בדיוק באמצע
מבחינה ורטיקלית אחרי שיש לנו פה 100% תפוסה אז אנחנו יכולים to display it as flex כאן אתם צריכים להכיר פלקס, זה גם כן חלק מהיכולות של CSS. ובפלקס יש לנו flex-direction בוא תגדיר לי את כל מה שיש בתוך ה-db