ברוכים הבאים לקורס React
בקורס זה תלמדו איך לכתוב יישומי Full Stack באמצעות React, החל מקומפוננטות קטנות ועד שילובן ליישומים מלאים.
1. מה זה React
ריאקט היא פריימוורק לפיתוח ווב מבוססת קומפוננטות שעוזרת לנו גם בכתיבת דפי HTML וגם בכתיבת קוד ה JavaScript האינטרקטיבי של דפים אלה. ב HTML רגיל הקוד כתוב בקובץ עם סיומת html וכל האלמנטים שמופיעים על העמוד נמצאים באותו קובץ. קוד ה JavaScript של העמוד כולו שמור בקבצים נפרדים וקוד העיצוב שמור בקבצים נפרדים נוספים. בפריימוורק מבוסס קומפוננטות אנחנו מחלקים את העמוד לחלקים קטנים יותר שנקראים קומפוננטות, כל קומפוננטה מורכבת גם מקוד HTML, גם מקוד JavaScript וגם מקוד עיצוב. פיתוח אפליקציה כולל בנייה של הקומפוננטות הבסיסיות וחיבורן לעמודים גדולים יותר שמכילים מספר קומפוננטות יחד. חלוקה מבוססת קומפוננטות מקלה על תחזוקת הפרויקט שכן הקוד מחולק טוב יותר לקבצים, הקבצים עצמם קטנים יותר ואפשר בקלות לשתף קומפוננטה בין מספר דפים או בין מספר פרויקטים.
ריאקט נוצרה ב 2013 בפייסבוק כדי להקל על תחזוקת קוד צד הלקוח של פייסבוק ולוודא שכל החלקים על העמוד יהיו מסונכרנים. בתחילת דרכה היא שימשה כספריית צד לקוח בלבד, אבל לאורך השנים התחלנו להשתמש בריאקט גם כדי לכתוב קבצי HTML בצד שרת. כיום ריאקט רצה גם בצד השרת וגם בצד הלקוח ונוצרו פריימוורקים רבים שמחברים את שני התפקידים האלה של ריאקט למערכת Full Stack אחת.
2. מה לומדים בקורס
אחד האתגרים בלימוד ריאקט הוא התפקיד הכפול שהיא ממלאת: מצד אחד זו ספריה מ 2013 שצריכה לשמור על תאימות אחורה כי היא נמצאת בשימוש בפרודקשן בפייסבוק ולכן היא מגיעה עם מטען והיסטוריה, מצד שני זו הספריה הפופולרית ביותר בעולם היום לפיתוח יישומי Front End ו Full Stack, וככזו היא מקבלת פיצ'רים חדשים באופן תדיר. בלימוד ריאקט נצטרך להבין קודם כל את הרעיונות הבסיסיים של הספריה ונרצה לראות איך רעיונות אלה משתלבים גם בשיטות פיתוח מתקדמות. בקורס אנחנו נלמד איך להשתמש ב React בעיקר במסגרת פריימוורק Full Stack שנקרא Next.JS. זה השימוש המודרני בריאקט ומבחינות רבות גם השימוש הפשוט יותר. לקראת סוף הקורס נדבר גם על שימוש ב React בפרויקט צד-לקוח בלבד ונבין מתי כדאי לנו לבחור בכל שיטת עבודה.
3. קישורים חשובים
דף התיעוד הראשי של ריאקט: https://react.dev/reference/react
התקנת Next ויצירת פרויקט ראשון: https://nextjs.org/docs/app/getting-started/installation
יצירת פרויקט ריאקט בענן ב Playground: https://reactplayground.vercel.app/
ברוכים הבאים לקורס React
בקורס זה תלמדו איך לכתוב יישומי Full Stack באמצעות React, החל מקומפוננטות קטנות ועד שילובן ליישומים מלאים.
מה זה React
ריאקט היא פריימוורק לפיתוח ווב מבוססת קומפוננטות שעוזרת לנו גם בכתיבת דפי HTML וגם בכתיבת קוד ה JavaScript האינטרקטיבי של דפים אלה. ב HTML רגיל הקוד כתוב בקובץ עם סיומת html וכל האלמנטים שמופיעים על העמוד נמצאים באותו קובץ. קוד ה JavaScript של העמוד כולו שמור בקבצים נפרדים וקוד העיצוב שמור בקבצים נפרדים נוספים. בפריימוורק מבוסס קומפוננטות אנחנו מחלקים את העמוד לחלקים קטנים יותר שנקראים קומפוננטות, כל קומפוננטה מורכבת גם מקוד HTML, גם מקוד JavaScript וגם מקוד עיצוב. פיתוח אפליקציה כולל בנייה של הקומפוננטות הבסיסיות וחיבורן לעמודים גדולים יותר שמכילים מספר קומפוננטות יחד. חלוקה מבוססת קומפוננטות מקלה על תחזוקת הפרויקט שכן הקוד מחולק טוב יותר לקבצים, הקבצים עצמם קטנים יותר ואפשר בקלות לשתף קומפוננטה בין מספר דפים או בין מספר פרויקטים.
ריאקט נוצרה ב 2013 בפייסבוק כדי להקל על תחזוקת קוד צד הלקוח של פייסבוק ולוודא שכל החלקים על העמוד יהיו מסונכרנים. בתחילת דרכה היא שימשה כספריית צד לקוח בלבד, אבל לאורך השנים התחלנו להשתמש בריאקט גם כדי לכתוב קבצי HTML בצד שרת. כיום ריאקט רצה גם בצד השרת וגם בצד הלקוח ונוצרו פריימוורקים רבים שמחברים את שני התפקידים האלה של ריאקט למערכת Full Stack אחת.
מה לומדים בקורס
אחד האתגרים בלימוד ריאקט הוא התפקיד הכפול שהיא ממלאת: מצד אחד זו ספריה מ 2013 שצריכה לשמור על תאימות אחורה כי היא נמצאת בשימוש בפרודקשן בפייסבוק ולכן היא מגיעה עם מטען והיסטוריה, מצד שני זו הספריה הפופולרית ביותר בעולם היום לפיתוח יישומי Front End ו Full Stack, וככזו היא מקבלת פיצ'רים חדשים באופן תדיר. בלימוד ריאקט נצטרך להבין קודם כל את הרעיונות הבסיסיים של הספריה ונרצה לראות איך רעיונות אלה משתלבים גם בשיטות פיתוח מתקדמות. בקורס אנחנו נלמד איך להשתמש ב React בעיקר במסגרת פריימוורק Full Stack שנקרא Next.JS. זה השימוש המודרני בריאקט ומבחינות רבות גם השימוש הפשוט יותר. לקראת סוף הקורס נדבר גם על שימוש ב React בפרויקט צד-לקוח בלבד ונבין מתי כדאי לנו לבחור בכל שיטת עבודה.
קישורים ששווה לשמור
דף התיעוד הראשי של ריאקט:
https://react.dev/reference/react
התקנת Next ויצירת פרויקט ראשון:
https://nextjs.org/docs/app/getting-started/installation
יצירת פרויקט ריאקט בענן ב Playground:
https://reactplayground.vercel.app/