ברוכים הבאים לקורס React.js, הפריימוורק המוביל לפיתוח Front End מודרני לאתרים ואפליקציות ווב!
הקורס מכסה את כל היסודות החשובים בפיתוח ריאקט, באופן שיאפשר לכם לפתח אפליקציות ווב בביטחון, באופן מודרני ותוך הבנה עמוקה של מה נדרש ממפתח.
הקורס מלמד ריאקט מהיסוד, מהמושגים הבסיסיים ועד לפיתוח אפליקציות שלמות, ומניח את היסודות לבנייה מודרנית ויעילה של אפליקציות פרונט אנד מורכבות.
בסיום הקורס תהיו מוכנים להשתמש בריאקט לכל צורך - לפרויקטים אישיים או לפיתוח בתעשייה.
סטייטס
סטייטס הם אוסף משתנים שמתארים את המצב של אפליקציית הריאקט שלנו (או של קומפוננטה מסוימת). תפקידנו כמתכנתי ריאקט הוא לשלב את הסטייטס בתוך קוד ה- HTML ולדאוג שהערכים שלהם תמיד מעודכנים. הפריימוורק של ריאקט יודע לעקוב אחר שינויים בהם ולעדכן את ה- UI בהתאם.
אסינכרוניות של states
סטייטס הם "יצורים" מורכבים. כדי שריאקט תוכל להיות יעילה ככל האפשר, הרגע בו הערך של סטייט משתנה בפועל אינו בשליטתנו - אנחנו רק אומרים לריאקט מה צריך להיות הערך המעודכן של הסטייט, אבל העדכון בפועל נעשה באופן אסינכרוני. זו נקודה רגישה שצריך להבין ולדעת איך מתמודדים איתה.
עדכון פונקציונלי של states
בריאקט יש שתי אפשרויות לעדכן סטייט - אפשרות אחת היא על ידי ערך, כלומר מעבירים את הערך החדש שצריך להיות לסטייט. אפשרות שנייה היא על ידי callback (פונקציה מקומית קטנה). עדכון סטייט על ידי callback חשוב במיוחד כשהערך החדש של הסטייט צריך להיות תלוי בערך הקודם שלו. זה במיוחד חשוב בגלל ה- batching של ריאקט, כלומר אם יש כמה שינויים לסטייט שצריכים להתבצע בזמן קצר, ריאקט יכולה "לאגד" אותם לשינוי אחד. אם אנחנו תלויים בערכים שבדרך, זה יכול ליצור באגים לוגיים והעדכון הפונקציונלי מונע אותם.
קומפוננטות
קומפוננטות הן במידה רבה הקונספט החשוב ביותר בריאקט. הן מה שמאפשר לנו לשבור את ה- UI לחלקים הגיוניים שקל להבין ולתחזק. הן גם מה שמאפשר לנו להשתמש ב"לגו" של ריאקט, כלומר לעשות שימוש חוזר בחלקים שונים ב- UI שצריך ביותר ממקום אחד. בחלק הזה של הקורס נלמד איך להגדיר קומפוננטות, איך לעשות בהן שימוש חוזר ואיך לשתול אותן בתוך קומפוננטות אחרות.
ref
רפרנס הוא כלי ריאקטי שמאפשר לנו גישה ישירה לאלמנט HTML-י שמהווה חלק מאפליקצית הריאקט שלנו. ברוב המקרים עדכונים בריאקט לא נעשים על ידי גישה ישירה, אלא על שימוש בסטייטים, אבל לפעמים עדכונים "ידניים" כאלו עדיין נדרשים. גם במקרים שצריך לשלוף ערך או תכונה ישירות מאלמנט HTML-י, רפרנס הוא הדרך המומלצת והנקייה ביותר.
קבצי JS בריאקט
סוג הקובץ הפופולרי בריאקט הוא JSX. JSX הוא הפורמט המיוחד שמאפשר לנו "לערבב" HTML וג'אווהסקריפט, בשונה מעבודה ללא פריימוורק, שם חייבים להקפיד על הפרדה מלאה בין השניים. אך מה לגבי מקרים בהם נדרשת לוגיקה או חישוב באפליקציית ריאקט, שתוצאתם אינה אלמנט HTML-י? במקרים כאלו, עדיף להשתמש בקבצי JS, כיוון שכאשר אנו רואים קובץ JSX, אנו מצפים שתוצאתו תהיה UI של HTML - ולא תוצאה של חישוב. בחלק זה נראה דוגמה כזו ונלמד איך לשלב קובץ JS בתוך אפליקציית ריאקט בצורה נקייה.
פרופס
(Props, קיצור של Properties) בריאקט הם הדרך להעביר נתונים ומידע מקומפוננטת אב לקומפוננטת ילד. כאשר יש היררכייה של קומפוננטות וקומפוננטה אחת משתמשת באחרת, הדרך המקובלת להעביר מידע ביניהן הוא פרופס. זה די דומה לפרמטר של פונקציה, אבל בעולם הקומפוננטות. בחלק זה נראה איך מגדירים פרופס, איך משתמשים בהם ואיך קומפוננטת הילד מתעדכנת מייד עם שינוי ערך בקומפוננטת האב.
מפות והצגת רשימות
אחד הדברים שריאקט מצטיינת בהם היא הצגה איכותית של רשימות. במקום להציג רשימה פשוטה, בריאקט יחסית קל לעטוף כל איבר ב- UI שלם - למשל כרטיס הכולל אייקונים, צבעים, מסגרות וכיו"ב. Map היא פונקציה בג'אווהסקריפט המאפשרת לבנות מערך חדש מתוך מערך קיים, וזה במיוחד שימושי Brendaikt כאשר אנו רוצים להמיר כל איבר במערך קיים לאלמנט UI מתאים.
פרוייקטון - איש תלוי
בשלב הזה של הקורס כבר יהיה לנו בסיס טוב ונבין את כל העקרונות של ריאקט. נתכנת פרייקטון של "האיש התלוי" - זהו משחק מילים שבו המחשב בוחר מילה אך במקום להציג את האותיות שלה, הוא מציג קו עבור כל אות. תפקיד המשתמש הוא לנסות לנחש אותיות שיש במילה. אם המשתמש בחר אות שקיימת במילה, היא נחשפת ומוצגת במקום הקו שלה. אם, לעומת זאת, המשתמש בחר אות שלא קיימת, אנו מתקדמים שלב ב"תלייה" של הדמות הדמיונית. כדי לנצח, המשתמש צריך לנחש את כל האותיות לפני שהדמות "נתלית". הפרויקטון הזה הוא דוגמה מעשית שתעזור לנו להביא לידי ביטוי את כל העקרונות של עבודה בסיסית עם ריאקט.
Prop drilling
זוהי תופעה בריאקט שמתרחשת כאשר יש היררכיות עמוקות של קומפוננטות. אם יש מידע או ערך שצריך להעביר מקומפוננטת הורה לקומפוננטת ילד, אנו בדרך כלל עושים זאת עם פרופ. אבל מה אם הילד צריך להעביר את המידע הזה לילד שלו, כלומר לנכד? אז צריך פרופ נוסף ביניהם. ומה אם הנכד צריך להעביר את אותו מידע לילד שלו? אז שוב צריך פרופ ביניהם. התופעה הזו של גלגול המידע שלב אחרי שלב במורד ההיררכיה של הקומפוננטות נקרא פרופ דרילינג והיא די נפוצה באפליקציות מורכבות יותר.
קונטקסט (context)
המשך ישיר לתופעת הפרופ דרילינג הוא הקונטקסט. פרופ דרילינג זה לא בהכרח דבר "רע", אבל יש מקרים שבהם, אף על פי שמקור המידע הוא בקומפוננטה העליונה, הצרכן האמיתי שלה הוא קומפוננטה שנמצאת מספר רמות במורד ההיררכיה. במקרים כאלו, שימוש בפרופ דרילינג אינו יעיל, כיוון שהוא מכריח אותנו להשתמש בהרבה פרופס כדי להעביר את המידע בין כל הרמות שבדרך. אם הרמות שבדרך לא משתמשות במידע, זו תקורה מיותרת שעלולה לסבך את הקוד שלא לצורך. במקרים כאלו משתמשים בקונטקסט, שפותח ערוץ ישיר למידע לכל ה"צאצאים", כלומר כל קומפוננטה שנמצאת איפשהו במורד ההיררכיה.
עדכון למעלה ו- callbacks
בחלקים הקודמים למדנו איך להעביר מידע מ"למעלה למטה" (מאבא לילד) באמצעות פרופס. אבל מה קורה כשצריך לבצע פעולה הפוכה? כלומר, כשקומפוננטת הילד צריכה לעדכן את קומפוננטת האב (למשל, שינוי טקסט בקומפוננטת הילד שצריך לבוא לידי ביטוי בקומפוננטת האב)? מאחר שפרופס הם "חד-כיווניים", אחד הפתרונות הפופולריים ביותר הוא להעביר פונקציה (Callback) מהאבא לילד בתור פרופ. הילד "קורא" לפונקציה הזו ברגע המתאים, ובכך הוא למעשה מפעיל לוגיקה שנמצאת אצל האבא. אנחנו לא "עוקפים" את מנגנון העדכון של ריאקט (מלמעלה למטה) - ה- callback מאפשר לנו לגייס אותו לטובתנו, גם אם מי שיזם את העדכון הוא קומפוננטת הילד.
use effect
לפעמים אנו רוצים להגיב לשינויים בתוכנית מעבר לזרימה הרגילה של המידע ורינדור של כל הקומפוננטות המושפעות. עדכונים נוספים כאלו נקראים לפעמים side effects, והדרך המקובלת להוסיף אותם היא באמצעות use effect. ה- use effect מאפשר לנו לעקוב אחרי משתנה כלשהו, ולהריץ קוד מוגדר מראש בכל פעם שהוא משתנה. זה עוזר בשלל מקרים בתכנות בריאקט ואנו נראה דוגמה לכך.
חלקו הראשון של הקורס מוצע בחינם להתרשמות.
שימו לב! רכישת הקורס מאפשרת גישה ל- 6 חודשים
לרכישת הקורס יש להיכנס לחשבון