הסבר על Single Props Children
פרקי ההרצאה: הסבר על Single Props Children
תמלול ההרצאה: הסבר על Single Props Children
הטקסט המלא של הדקות הראשונות בהרצאה «הסבר על Single Props Children» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לנושא שנקרא Code Reuse, כלומר שימוש חוזר בקוד. כאן אנחנו הולכים לראות איך אנחנו יכולים להשתמש בכל מיני כלים שריאקט יכולה לספק לנו בכדי לא לחזור על קוד, לכתוב קוד פעם אחת והיכולת להשתמש איתו בכל מיני מצבים.
בעיקר כל מיני דברים שקשורים לקומפוננטות שמאפשרות לנו לעשות את זה. אנחנו מתחילים עם משהו שנקרא props children בואו נבין מה זה אומר נניח שאנחנו רוצים לבנות איזושהי קומפוננטה שמאפשרת להציג מידע אבל הקומפוננטה לא תחליט בשבילנו איזה מידע להציג היא רק תציג אותו אולי בצורה יותר אסתטית בעזרת עיצוב
מסוים ואנחנו רוצים להעביר את המידע מחוץ לקומפוננטה אל תוך הקומפוננטה, זאת אומרת מה-parent ל-child.
עכשיו, איך לעשות את זה אנחנו כבר ראינו בעבר, כן? בואו נראה רגע איזושהי סכמה, נניח שאנחנו רוצים לבנות איזושהי קומפוננטה ואנחנו רוצים שה-parent ישלח לתוך הקומפוננטה שלנו דאטה.
מן הסתם אנחנו ראינו שהדבר שיכול לבצע את זה זה props, נכון props זה אובייקט שמאפשר להגדיר איזה מידע אנחנו רוצים שה-parent שלנו יעביר לתוך הקומפוננטה אבל props זה אובייקט שיש לו מאפיינים.
מה קורה עם המידע שאנחנו רוצים שה-parent יעביר לנו הוא קטע html-י. כאן props לא בעצם יכול לתת לנו איזשהו מענה מאוד נוח.
אנחנו יכולים לעשות משהו שנקרא props children שמאפשר לנו להעביר קטע html מבחוץ אלינו. בואו נראה איך זה מתבצע. לצורך כך אנחנו רוצים לחזור לאזור של ה-home.
בואו נראה רגע שה-home בעצם מוצג לנו פה. מה שאנחנו רוצים לעשות אנחנו רוצים להוסיף קומפוננטה. בואו נפתח כאן את הטרמינל והקומפוננטה שאנחנו רוצים להוסיף זה קומפוננטה שמאפשרת לנו להציג איזושהי סיסמה מסוימת סלוגן מה שנקרא והקומפוננטה תגדיר את העיצוב של הסלוגן או כל מיני דברים
שמעבר שקשורים יותר לעיצוב אבל היא לא תגדיר את ה html עצמו שמכיל את הסלוגן אז למרות שסלוגן יכול להיות רק עדיין אולי אנחנו רוצים לעצב אותו עם איזשהו html פעם עם פסקה פעם עם ספן היא לא תחליט את זה היא תקבל את זה מבחוץ אז בואו נייצר לעצמנו איזושהי קומפוננטה נניח functional קומפוננט ואנחנו רוצים בתוך ה home area לעשות
אותה ואנחנו רוצים לקרוא לה סלוגן ואנחנו כן רוצים להביא props זה משהו שכן יש לנו בואו להעביר את זה, זה אפשר לסגור והנה יש לנו פה את הקומפוננטה שיכולה להציג סלוגן.
אורייט, מה בעצם אנחנו רוצים לבצע? אנחנו רוצים כאן להציג את הסלוגן, בוא נניח שכן נציג את הסלוגן תמיד בתוך איזושהי פסקה מסוימת, כי בכל זאת זה טקסט מסוים אבל יכול להיות שהסלוגן תהיה סתם מידע טקסטואלי ויכול להיות מידע טקסטואלי עם ספאנים יכול להיות מידע טקסטואלי עם מה שנקרא strong,
strong זה תגית נוספת שאומרת איך אנחנו רוצים, את מי אנחנו רוצים להדגיש. ולכן יכול להיות שבתוך הפסקה כאן, מי שרוצה להעביר לנו את הסלוגן צריך להעביר לנו קטע html-י.
אז אנחנו רוצים לאפשר את זה. אנחנו רוצים לאפשר להביא לתוך הפרופס html. איך אפשר לעשות את זה? Props עצמו, אנחנו יכולים לראות את זה כאן, מחיל או יכול להכיל משהו שנקרא Children.
כרגע אנחנו לא רואים את זה, בואו ניפטר רגע מזה. ולצורך כך אנחנו צריכים להגדיר את ה-Children פה למעלה.
השם חייב להיות Children, או לפחות זה מה שמאוד מקובל ב-React, אבל בכל המקומות משתמשים בשם Children, והסוג שלו צריך להיות React Node. מגיע מפה מריאקט ועכשיו אם אני מסתכל על מה יש בתוך props יש לו children וריאקט נוד זה בעצם html שאנחנו יכולים להעביר אז זה נראה די פשוט ואנחנו רוצים להוסיף איזשהו עיצוב מסוים כי אחרת סתם הביאו לנו פה איזה html
ולא כזה משמעותי בוא נניח שאנחנו רוצים להוסיף פה איזשהו אייקון מעניין יש לנו אפשרות לשלב אייקונים למרות שראינו כבר את האפשרות הזאת ממטריאל UI יש לנו אפשרות לשלב משהו שנקרא אימוג'יז איך אנחנו יכולים לשלב אימוג'יז בפרויקט וזה לא קשור רק לסלוגן או ל-children בכל פרויקט
אנחנו יכולים לשלב אימוג'יז יש לנו אפשרות ללכת לאקסטנצ'נס ולהתקין extension מעניין שנקרא emoji snippets והנה הוא כאן בואו נתקין אותו נבצע install והוא התקין נסגור אותו נחזור בחזרה לאקספלורר וברגע שאנחנו רוצים לשתול איזשהו אייקון של אימוג'י אז אנחנו רושמים נקודותיים control space אוקיי
נקודותיים control space פותח לנו רשימה ענקית של אימוג'יז ואנחנו רוצים את האימוג'י שאנחנו רוצים אנחנו פשוט מחפשים אותו בואו נעשה אימוג'י של קודם כל כל אימוג'י אנחנו יכולים לראות כאן את הסמל שלו בואו נחפש אימוג'י של הארט בואו ניקח יש לנו פה בואו ניקח בלו הארט
ואנחנו יכולים פשוט לראות את האימוג'י בקוד ממש ויז'ל סטודיו מראה לנו אותו וגם על הדף הדבר הזה ייראה גם על הקוד בוויז'ואל סטודיו וגם על הדף עצמו. שזה מאוד מגניב, כי זה חוסך לנו פה כתיבה של סתם מילים, וממש רואים את הסמלים גם בוויז'ואל סטודיו וגם על הדף, ממש נחמד כזה. לא היינו חייבים להשתמש כמובן באימוג'י בשביל הדוגמה הזאת, אבל זה משהו מעניין שאפשר לראות על הדרך.
אז עכשיו יש לנו פה סלוגן מסוים, ויש לנו פה איזשהו אימוג'י מגניב על הסלוגן הזה. זהו, סיימנו לבנות את הקומפוננטה, הקומפוננטה ממש פשוטה.
אנחנו יכולים לקחת את הקומפוננטה הזאת בשביל