מה נלמד בקורס?
מבוא ליסודות ריאקט
מבוא לקורס בריאקט:
מילות פתיח.
מה זה ריאקט וקצת על היסטורית הספרייה.
דגשים לעבודה על מערכת קודבוקס.
קומפוננטה בסיסית בריאקט:
נלמד מהו JSX בריאקט.
איך כותבים קומפוננטה בסיסית ראשונה.
בניית קומפוננטה עם data סטאטי והבנת היסודות.
בניית רשימה עם מידע דינאמי:
נבנה אלמנטים בצורה דינאמית.
נשתמש ביכולות של Array.protopype.map לבנייה הדינאמית.
יבוא ויצוא קומפוננטות מקובץ.
בניית טבלה עם מידע דינאמי:
מבנה הטבלה ומרכיבייה בhtml.
שימוש בלולאה מקוננת לבניית טבלה.
נשתמש בפונקציית הmap בצורה מקוננת.
נשתמש בdata דינאמי מקובץ שמייבאים.
עיצובים עם אובייקט style:
נבין את השוני בין html לJSX.
נלמד להכיל עיצובים על אלמנטים בדף.
נתרגל בנייה דינאמית אלמנטים בצורה מתאתגרת בשילוב style שנלמד.
קומפוננטות עם state ואירועים
שילוב קבצי css בעבודה עם ריאקט:
נשלב את עולם העיצובים כחלק בלתי נפרד מבניית קומפוננטות.
נבין מהו className ועל השוני בין html ל JSX.
נשלב תרגול מקיף של כל החומר הנלמד עד נקודה זו בקורס.
נחדד חוקי css ואיך הם משתלבים לנו במערכת שנבנה.
שילוב props בקומפוננטות:
מהם props בריאקט ומתי נשתמש בהם.
בניית קומפוננטות עם props ומה השיטות המקובלות לכתיבה.
שימוש בקומפוננטות שכתבנו בבניה דינאמית.
בניית טבלה עם שימוש ב props:
בניית טבלה עם שימוש בprops.
יצירת קומפוננטה חכמה בבניית הטבלה.
שילוב בנייה דינאמית עם כמה קומפוננטות עם שימוש ב props ועיצוב עם css.
שימוש באירועים ו useState:
איך קושרים event מסוג onClick לאלמנטים.
מהן קומפוננטות חכמות ולמה צריך אותן.
מהו react hook מסוג useState ואיך משתמשים בו.
יצירת תנאים בולאנים בתוך הJSX של קומפוננטה.
נחבר יצירת ארועים ושמירת state לבניית קומפוננטות חכמות בריאקט.
שימוש באירוע onChange:
איך נוסיף input לדף ונשתמש בuseState לשמור את ערכי input.
בניית רשימה דינאמית עם הזנת נתונים מהמשתמש.
הסבר מעמיק על מערכים וההבדל בין value ל reference.
נבין איך עובדים עם מערכים שנשמרים על הstate של הקומפוננטה.
נושאים מתקדמים ושימוש ב API
בניית טבלה דינאמית עם ארועים:
נבין איך נשלב את כל מה שנלמד עד כה לבניית טבלה בצורה דינאמית
נשתמש בuseState לשמירת מספר אינפוטים.
דוגמא לשימוש state מורכב עם מערך אובייקטים.
שימוש בhook מסוג useEffect:
מהו react hook מסוג useEffect ואיך ומתי נשתמש בו.
נבצע תקשורת לשרת עם שימוש ב fetch.
נראה שיטות לאבטוח הקוד שלנו להמנע משגיאות מיותרות.
נבנה קומפוננטה חכמה שמשלבת שני סוגי hooks גם useState וגם useEffect.
דוגמא לשילוב useEffect בחיפוש מול שרת:
נבחן שימושים נוספים לuseEffect.
נבין איך מחזור החיים של קומפוננטה משפיע על מימוש הקוד שלנו.
נציג דוגמא מורכבת לשימוש בuseEffect.
שימוש בinputs נוספים:
מהו input מסוג checkbox ואיך משתמשים בו.
מהו input מסוג radio ואיך משתמשים בו.
מהם inputs מסוג datetime וdatetime-local ומתי נשתמש בהם.
בניית טבלה מApi עם וסינון תוצאות:
נעשה בקשת Api להבאת נתונים על טבלה
נבנה את הטבלה בצורה דינאמית
נלמד איך לבצע חיפושים באמצעות סינון תוצאות בצורה חכמה
נדבר על ארכיטקטורת קוד
נושאים מתקדמים וארכיטקטורת קוד
שימוש בפילטרים מתקדמים:
נבנה טבלה שמציגה נתונים על טיסות.
נרחיב את שימוש הטבלה עם קומפוננטת שורה חכמה לטבלה.
נשתמש באינפוטים כדי לבנות פילטרים לטבלה, נעשה שימוש באינפוטים מסוג checkbox, datetime ו text.
ספריית bulma לעיצוב מתקדם:
נלמד להטמיע עיצובים מוכנים.
נשתמש בחבילת bulma להוסיף צבע ועיצובים לפרוייקטי ריאקט שנבנה יחד.
נטמיע עיצוב בקומפוננטה קיימת ונעשה מעבר על Docs של הספרייה בה נשתמש.
מיונים ב javascript:
נשפר קומפוננטת טבלה קיימת ונוסיף לה יכולות מיון.
נבין לעומק איך מיונים עובדים על מערכים עם מספרים מחרוזות ואובייקטים.
נראה איך מתמודדים עם מיון מיוחד כאשר השדה שלנו לא בר השוואה
ערוצי תקשורת בין קומפוננטות:
נלמד איך קומפוננטה בן יכולה לתקשר עם קומפוננטת אב.
נממש באמצעות bulma עיצובים על מספר קומפוננטות.
נבנה קומפוננטה רב שימושית שמאפשרת לנו להטמיע tabs באפליקציה.
נראה מספר דוגמאות לשימוש ב props מסוג פונקציה.
מילות סיום
