ריאקט - יצירת קומפוננטה

תמלול ההרצאה: ריאקט - יצירת קומפוננטה

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

1. 00:02

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

2. 00:21

   עכשיו כל פעם שאני רוצה לבנות קומפוננטה מה אני בעצם צריך לעשות? לפתוח תיקייה ובתוך התיקייה קובץ ESS וקובץ TSX ואת המבנה הזה שיש לי פה את אימפורט של קובץ ה-CSS ויש לי functional component או class component שמחזירה לי דיב עם קלאס שהקלאס זה השם של הקומפוננט ויש לי פה את האקספורט וכו' וכו'.

3. 00:49

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

4. 01:27

   ידי הדגל מינוס G. אז בדומה לזה שהתקנו את הספרייה של React עצמה בואו נגדיר npm i - g כי אנחנו רוצים להתקין את זה פעם אחת באזור הגלובלי של המחשב ואז את השם של הספרייה והשם של הספרייה נקרא react cli snippets כאשר snippets זה קוד מוכן שאנחנו יכולים לשתול אז זאת הספרייה npm i - g react cli snippets היא ספרייה ממש ממש פשוטה לשימוש ומדליקה וחוסכת לנו המון עבודה.

5. 02:11

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

6. 02:33

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

7. 02:57

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

8. 03:16

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

9. 03:36

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

10. 04:00

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

11. 04:23

    זה ככה הספרייה הזאת עובדת, אוטומטית בתוך תיקיית קומפוננטס. אוקיי, בואו נייצר קומפוננט אחר שנקרא testing/subdirectory/high.

12. 04:44

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

13. 05:08

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

14. 05:21

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