PracticU

סיכום קורס ריאקט

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

סיכום קורס ריאקט
הסיכום עובר על כל הנושאים שנלמדו בקורס React, מההתקנה ועד פרסום האתר, ושימושי כרשימת בדיקה לפני פרויקט הסיום.
נושאי הקורס
1. יסודות: התקנות, פתיחת פרויקט, בניית layout והרצתו כקומפוננטה ראשונה. אחר כך interpolation, conditional rendering, הצגת רשימות, props, state ו-two-way binding.
2. עיצוב: CSS leaking והפתרון שלו עם CSS Modules, שימוש ב-styled components וב-Material UI.
3. Hooks ושימוש חוזר בקוד: הם נפוצים ומטרתם. כתיבת קוד פעם אחת והשימוש בו בהקשרים שונים, כולל Higher Order Component.
4. Routing: הגדרת נתיבים, דף 404, נתיב ברירת מחדל, lazy loading ו-route parameters.
5. תקשורת עם שרת: גישה לשרת מרוחק עם AJAX, interceptors לבקשות ותגובות, טפסים עם הספרייה useForm, ולידציה והעלאת תמונה.
6. ניהול מצב גלובלי: Redux, ו-MobX כחלופה, שבה מגדירים observable ו-observer, actions ו-reactions. בנוסף Context לאובייקט שמגיע לכל הקומפוננטות.
7. אימות משתמשים: הרשמה, התחברות והתנתקות, חיבור ל-Redux, חסימת קומפוננטות למי שלא מחובר ושליחת JWT לשרת בעזרת interceptor.
8. דיבוג ופרסום: כלי דיבוג בדפדפן, profiling לבדיקת ביצועים, והעלאת האתר לשרתי Firebase.
אחרי הסיכום אפשר לעבור לפרויקט הסיום.
השיעור הבא בקורס: קורס React – פרויקט סיום

פרקי ההרצאה: סיכום קורס ריאקט

  1. 00:00

    התקנות ויסודות React

  2. 00:42

    סטיילינג ו-Material UI

  3. 01:21

    ראוטינג וגישה לשרת

  4. 01:56

    טפסים, ולידציה ו-Redux

  5. 02:33

    אותנטיקציה ו-JWT

  6. 03:08

    Context ודיבאגינג

תמלול ההרצאה: סיכום קורס ריאקט

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

  1. 00:02

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

  2. 00:38

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

  3. 01:00

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

  4. 01:14

    מה זה Higher Order Component ועוד דברים שאפשר לבצע Reuse עבורם. מה זה ראוטינג, איך אנחנו בונים ראוטינג, איך אנחנו מגדירים אילו ראוטס יש, לאן הם מפנים, איך אנחנו מטפלים בפייג' 404, איך אנחנו מטפלים בדיפולט ראוט, מה זה לייזי לואודינג, מה זה ראוט פרמטרס, איך שולחים ראוט פרמטרס, ווב אקסס, גישה לווב,

  5. 01:38

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

  6. 01:58

    המדהימה useform שהופכת לנו את המידע למודל מוכן, איך אנחנו משלבים כאן ולידציה, עשינו ולידציה בכל מיני טכניקות, איך אנחנו שולחים תמונה לשרת, Redux, כאן בנינו את התשתית של Redux שאפשרה לנו להגדיר איזשהו Global Scope שאליו שלחנו מידע מכל מיני מקומות באפליקציה, קראנו את המידע, האזנו לשינויים שיש במידע הזה,

  7. 02:26

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

  8. 02:51

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

  9. 03:13

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

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

ההרצאה הקודמת: ריאקט - עדכון של Firebase

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

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