יצירת קומפוננטה של Layout ב-React

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

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

1. 00:02

   אחרי שיש לנו את ה-CSS הכללי של כל האתר, אנחנו יכולים לעבור ולבנות את הקומפוננטה עצמה של ה-Layout. ראשית, איזה Layout אנחנו רוצים לבנות?

2. 00:15

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

3. 00:33

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

4. 01:10

   כמה חלקים אנחנו רואים ב-Layout הזה? אנחנו רואים ב-Layout הזה שיש לו ארבעה חלקים וכמובן אנחנו בונים אותו בקומפוננט ייעודי משלו.

5. 01:22

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

6. 01:46

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

7. 02:04

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

8. 02:22

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

9. 02:58

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

10. 03:25

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

11. 03:51

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

12. 04:03

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

13. 04:19

    רגע, למה שקומפוננטה תשב בתיקייה נפרדת? תראו כמה קבצים יש לקומפוננטה אחת. יש לה את ה-CSS שלה, יש לה את ה-TSX שלה, אולי יש לה קובץ בדיקות עבורה.

14. 04:31

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

15. 04:53

    בתוך ה-Layout אני אבנה עוד תיקייה עבור קומפוננטה שנקראת Layout. אז עכשיו זה יכול טיפה לבלבל כי יש לי פה Layout ופה Layout, מה ההבדל ביניהם?

16. 05:04

    ה-Layout הזאת שנמצאת ישירות בתוך ה-Components זה עבור האזור של ה-Layout. אם יותר נוח לכם תקראו לזה Layout Area האזור הכללי של ה-Layout.

17. 05:15

    ואז כל תיקייה שנמצאת בתוך קומפוננטס פשוט תקראו לה Layout Area, Products Area, Suppliers Area האזור עצמו. אני לצורך הפשטות אשאר רק עם השם הכללי layout ובתוכה תיקייה שנקראת layout ובתוך התיקיית layout אנחנו רוצים להוסיף לעצמנו קובץ שנקרא layout.tsx ועוד קובץ שנקרא layout.css ב-react

18. 05:49

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

19. 06:07

    יש לנו פה את הטייפ סקריפט ואת ה-CSS של הלהוט. ומה שאנחנו רוצים לבנות זה קומפוננטה ראשונה. אז מה אנחנו צריכים?

20. 06:20

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

21. 06:37

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

22. 06:52

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

23. 07:14

    נתעסק גם עם class components. אז יש לנו פה פאנקשן ואני פשוט קורא לה בשם של הקומפוננט layout וזה דבר שהוא מקובל. הקומפוננט, השם של הקומפוננט זה איזשהו שם, במקרה הזה layout, הכובד שלו יהיה layout.tsx, ה-CSS שלו יהיה layout.css והוא נמצא בתיקייה שנקראת layout.

24. 07:39

    בואו נניח שנרצה עוד מעט לבנות קומפוננטה עבור, איפה זה היה? כאן, ה-header. אז אולי אנחנו נרצה שתהיה לנו קומפוננטה שנקראת header, אז תהיה לנו תיקייה שנקראת header, היא כמובן תהיה באזור הכללי של ה-Layout, ובתוכה יהיה header.css,

25. 08:03

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

26. 08:32

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

27. 08:56

    אז קומפוננטה אמורה to return, מה היא אמורה להחזיר? היא אמורה להחזיר UI, אז איזה UI אנחנו רוצים להחזיר? אנחנו רוצים להחזיר בעצם את המרכיבים האלה שקיימים כאן, ומה שמקובל לעשות זה להחזיר קופסה אחת div שמכילה את כל ה-HTML בתוכה, זה מה שמקובל לבצע.

28. 09:34

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

29. 09:48

    אז אם אני רוצה עכשיו לרדת שורה, תהיה לי כאן בעיה, מפני שה-Return מחזירה רק את מה שכתוב פה. ה-Return לא מחזירה את מה שכתוב מתחת, כי JavaScript יש לה מנגנון שנקרא Semicolon Injection, כלומר הזרקת נקודה פסיק, זה נקודה פסיק וזה הסיבה לפעמים שאתם שוכחים אולי לשים נקודה פסיק ולא קורה כלום כאילו

30. 10:19

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

31. 10:42

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

32. 11:09

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

33. 11:26

    בתוך הקומפוננטה הזאת יש לנו header וזה בעצם תגית של html, בלי קשר לאולי קומפוננטת header שאני רוצה לבנות אחרי זה.

34. 11:39

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

35. 11:54

    אז כאן אנחנו רוצים לשים או תגית nav לדוגמה שאחראית על התפריט הראשי או תגית שנקראת aside והיא אחראית על המידע בצידי הדף. אז בואו נגדיר, טוב בואו נשאר כאן עם ה-aside זה בעצם יהיה האזור פה בצידי הדף ואנחנו רוצים main זה בעצם תגית של האזור הראשי ו-footer והנה יש לנו את ה-HTML מוכן as is.

36. 12:32

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

37. 12:52

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

38. 13:23

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

39. 13:35

    בגלל שהתקנו תוסף שנקרא, איפה הוא נמצא לנו? Extensions, הוא נקרא Auto-Import. אוטומטיקלי אימפורט את מה שצריך. אז התוסף הזה, לפעמים גם אם אין אותו זה עובד, אבל לפי הניסיון שלי, אם אין אותו זה עובד ממש גרוע, עד בכלל לא.

40. 14:02

    ואם יש אותו, אז הקטע הזה של ההשלמה האוטומטית של ה-Layout עולה ל-99% במקרים. אורייט, בואו נחזור בחזרה, נלך ל-Explorer ומה שאנחנו רוצים לעשות עכשיו זה להיפטר מכל מה שקשור ל-App. דרך אגב, כבר עכשיו אנחנו אמורים לראות, בואו רגע נפרש אותו,

41. 14:23

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

42. 14:33

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