אודסיטי · Nanodegree · 7 קורסים · 61 שעות

מסלול Nanodegree בפיתוח ממשקים ב-React — אודסיטי

המסלול מורכב משבעה קורסים ברצף: יסודות React · React ברמת ביניים · React ו-Redux · ברכות על הסיום · React Native (לימודי העשרה) · ובסוף Git ו-GitHub.

השורה התחתונה שלנו

"מסלול-המשך לפיתוח ממשקים ב-React, למי שכבר כותב JavaScript ומכיר HTML ו-CSS — לא קורס-תכנות ראשון וההזדהות בפרויקטים היא הדמיה. בקצב של אדם עובד: עד חודשיים וחצי, וארבעה פרויקטים ב-React."

61ש׳

משך רשמי

ביניים

רמת כניסה

7 · 4

קורסים · פרויקטים

4.7★

574 מדרגים

2חוד׳

עד סיום · שלנו

לעמוד המסלול
באודסיטי ←

הרשמה ותמחור מתבצעים אצל אודסיטי · קישור שיווקי · אנחנו לא מוכרים את הקורס

בשורה אחת

חמש שאלות, חמש תשובות

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

למי זה

למי שכבר כותב JavaScript, מכיר HTML ו-CSS ורוצה להגיע ל-React ברמה מקצועית — לא קורס תכנות ראשון.

מה יוצא ביד

ארבע אפליקציות שנבדקו מול רובריקה — מעקב ספרים, חנות מקוונת, סקרים לעובדים ואפליקציית ניהול לקוחות לנייד.

כמה זמן באמת

61 שעות רשמיות; בקצב של 6 עד 8 שעות בשבוע זה כחודשיים.

איפה זה ממקם אותך

מול הכלים שעובדים איתם בפועל — React 19, React Router, React Query, Redux, טיילווינד (Tailwind), Jest ו-Vitest.

מה חסר

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

המסגרת במספרים

61 שעות, ומה שיוצא מהן

אלה המספרים שאודסיטי עצמה מפרסמת בעמוד-המוצר. נמדדו ב-8.9.2026.

שעות רשמיות

בקצב של 6 עד 8 שעות בשבוע — חודשים עד שניים וחצי, בקצב של 6 עד 8 שעות בשבוע.

קורסים

שיעורים

פרויקטים

4.7

574 מדרגים

אוגוסט 2026

עודכן

עד סיום · שלנו

מסלול הלימוד

שבעה קורסים ברצף אחד

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

קורס 1

ברוכים הבאים למסלול React

0.8ש׳

קורס 2

יסודות React

14.3ש׳

קורס 3

React ברמת ביניים

19.7ש׳

קורס 4

React ו-Redux

26.5ש׳

קורס 5

ברכות על הסיום

0.2ש׳

קורס 6

React Native (לימודי העשרה)

17.8ש׳

קורס 7

Git ו-GitHub

6.8ש׳

1ברוכים הבאים למסלול React0.8 שעות

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

2יסודות React14.3 שעות

למה React — למה הספרייה נבנתה ואילו מושגים של JavaScript פונקציונלי משמשים בה.
רינדור ממשק עם React — בניית רכיבים חוזרים ושימוש ב-JSX ליצירת רכיבי ממשק.
ניהול מצב — ניהול מצב באפליקציה בעזרת props, useState ורכיבים מבוקרים.
הוקים — איך הוקים מאפשרים מצב ומחזור-חיים בתוך רכיבי React.
ניתוב — ניתוב באפליקציות עמוד-יחיד בעזרת React Router.
זרימת נתונים ומצב משותף — הרמת מצב משותף, הימנעות מהעברת props לעומק ושימוש ב-Context.
פרויקטאפליקציה למעקב ספרים

3React ברמת ביניים19.7 שעות

מבוא ל-React ברמת ביניים — מה תלמד בקורס, מה נדרש מראש ובאילו כלים וסביבה תעבוד.
ארכיטקטורה לאפליקציות ייצור — איך ארכיטקטורה שומרת על אמינות, תחזוקתיות ופריסות בטוחות ככל שהמורכבות גדלה.
ניתוב מודרני ב-React — React Router מגרסה 6 ומעלה: ניתוב בצד-הלקוח, מסלולים מקוננים ותבניות פריסה.
יישום תבניות ניתוב מתקדמות — מסלולי פריסה, פרמטרים ופרמטרי-חיפוש לאפליקציות מונחות-מצב.
מערכות רכיבי ממשק מודרניות — ספריות חסרות-עיצוב, הרכבה מול הגדרה, והתאמה דרך מערכת עיצוב.
בניית ממשק עם shadcn/ui וטיילווינד — רכיבים חוזרים, פריסות רספונסיביות, נגישות ומצב כהה.
טיפול בשגיאות ומצבי טעינה — ממשק עמיד עם הודעות ברורות, פעולות שחזור ומעקב בסיסי.
יישום חוויית שגיאה וטעינה — Error Boundaries, שלדי-טעינה והודעות שגיאה ידידותיות למשתמש.
מצב מרוחק מול מצב מקומי — ההבדל בין מצב שמגיע מהשרת למצב שנשמר באפליקציה, ומתי משתמשים בכל אחד.
יסודות React Query — ניהול מצב-שרת עם שאילתות, מטמון, סנכרון ברקע וכלי פיתוח.
התקנה ומשיכת נתונים עם React Query — שימוש ב-useQuery וטיפול במצבי טעינה, שגיאה וריקנות.
תבניות שאילתה מתקדמות ואופטימיזציה — שאילתות תלויות ומקבילות, טעינה מוקדמת, ביטול מטמון וכוונון ביצועים.
יישום יכולות שאילתה מתקדמות — מפתחות דינמיים, שאילתות תלויות וסינון מסונכרן לכתובת ה-URL.
useReducer למצב מורכב — ריכוז לוגיקת העדכון בפעולות ובמפחיתים טהורים לצורך צפיות ובדיקות.
בניית מפחית למצב האפליקציה — עיצוב, כתיבה ושילוב של reducer עם עדכונים טהורים ובלתי-משתנים.
שמירת מצב ובוררים — שמירה בטוחה של המצב, טעינה מחדש, מצב נגזר ומימואיזציה.
שילוב Context, מפחית ושמירת מצב — ניהול מצב משותף שנשמר, בלי לפגוע בטוהר המפחיתים.
הזדהות והרשאות — תהליכי התחברות, ניהול סשן וטוקנים, פקיעה, חידוש וביטול גישה.
יישום הזדהות בעזרת Context — מצב הזדהות משותף, שמירת טוקן, התחברות והתנתקות ואימות טפסים.
הגנה על מסלולים ומסכים — שליטה בגישה, הפניה אחרי התחברות וחזרה לנקודה שבה המשתמש היה.
יישום מסלולים מוגנים וממשק מודע-הרשאות — ניווט בטוח שמותאם למצב ההזדהות של המשתמש.
שינויי נתונים (Mutations) — ההבדל בין שאילתה לשינוי, ושמירה על ממשק עקבי בזמן עדכון.
יישום שינויים ועדכונים אופטימיים — עדכון מטמון, ממשק אופטימי וחזרה לאחור בכישלון.
שיפור ביצועים ב-React — זיהוי בעיות רינדור, מימואיזציה, מעברים ופיצול קוד.
יישום שיפורי ביצועים — פרופיילינג, ייצוב props, הפחתת רינדורים מיותרים ושמירה על ממשק מגיב.
בדיקות באפליקציות React — פירמידת בדיקות מאוזנת והתמקדות בהתנהגות שהמשתמש באמת רואה.
כתיבת בדיקות עם Vitest וספריית הבדיקות — ארגון בדיקות יחידה, בדיקות הוקים ובדיקות אינטגרציה.
בנייה ופריסה לייצור — בניית אפליקציית Vite, משתני-סביבה, בדיקת איכות ו-CI/CD ב-Vercel או ב-Netlify.
פרויקטחנות מקוונת ב-React

4React וRedux — 26.5 שעות

מבוא לקורס — מבנה הקורס, דרישות הקדם, הכלים והצצה לפרויקט הסיום.
ניהול מצב — העברת המצב למקום מרכזי וקביעת כללים נוקשים לקריאה, להאזנה ולעדכון.
ממשק ו-Redux — בניית אפליקציית JavaScript שהמצב שלה מנוהל כולו ב-Redux במקום ב-DOM.
מידלוור ב-Redux — כתיבת מידלוור משלך שמיירט פעולות לפני שהן מגיעות למפחיתים.
Redux עם React — חיבור React לאפליקציית Redux כך שהמצב מנוהל בחנות אחת.
Redux אסינכרוני — בניית מידלוור Thunk משלך לטיפול מסודר באירועים אסינכרוניים.
חיבורי React-Redux — שימוש בספריית הקישור כדי לחבר בין ספריית הממשק לספריית ניהול המצב.
יישום React עם Redux — בניית אפליקציה אמיתית, הרכבת מפחיתים ונרמול נתונים.
בדיקות עם Jest — התקנה והרצה של Jest על פונקציות סינכרוניות ואסינכרוניות, סנאפשוטים ובדיקות DOM.
פרויקטאפליקציית סקרים לעובדים

5ברכות על הסיום0.2 שעות

ברכות! — סיום המסלול וציון ההישג.

6React Native (לימודי העשרה)17.8 שעות

מבוא ל-React Native — הצצה למושגי היסוד ולפרויקט של הקורס.
מסכים ועיצוב בנייד — בניית תצוגות גמישות לנייד ועיצובן.
ניווט ב-React Native — היכרות עם עקרונות הניווט בנייד, הוספת ספרייה ותכנון המבנה.
ניהול נתונים עם Redux — הקמת Redux Toolkit, בניית טופס ושליחתו ומעבר בין מסכים.
יכולות מכשיר — הרשאות, התראות דחיפה והכנה לפרסום האפליקציה.
פרויקטאפליקציית ניהול לקוחות לנייד

7Git וGitHub — 6.8 שעות

מהי בקרת גרסאות — היתרונות של בקרת גרסאות והתקנת Git על המחשב שלך.
יצירת מאגר Git — איך מקימים מאגר חדש אחרי שההתקנה מוכנה.
קומיטים, תגיות והתנגשויות — סקירת היסטוריית הקומיטים של מאגר קיים.
מאגרים מרוחקים ומאגרי מפתחים — פיצול (fork) של פרויקט של מפתח אחר ותרומה לפרויקט ציבורי.
כתיבת קובצי README — חשיבות התיעוד וכתיבת README משמעותי למאגר.

מה יישאר לך ביד

4 פרויקטים בקוד שרץ

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

01
יסודות React
אפליקציה למעקב ספרים
שלושה מדפים קבועים באפליקציה: קורא עכשיו, רוצה לקרוא וכבר קראתי. בקרת-מדף לכל ספר, כשברירת המחדל היא המדף שהספר נמצא בו כרגע. דף חיפוש נפרד בכתובת /search, עם חיפוש חי ואפשרות להוסיף ספר למדף. מצב עקבי בין הדף הראשי לדף החיפוש — שינוי בצד אחד מופיע בצד השני. מועד ההגשה שמופיע בכיתה: 6 באוקטובר 2026.
02
React ברמת ביניים
חנות מקוונת ב-React
אפליקציית צד-לקוח מלאה — קובץ zip, מאגר GitHub או סביבת העבודה
03
React ו-Redux
אפליקציית סקרים לעובדים
אפליקציית ווב (עדיף GitHub) יחד עם בדיקות יחידה ב-Jest
04
React Native (לימודי העשרה)
אפליקציית ניהול לקוחות לנייד
מאגר GitHub או zip עם App.js, קובץ README ומבנה תיקיות מוגדר

החסם של האנגלית

יש בכיתה עוזר שמדבר עברית

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

כל שאלה על מה שכתוב בעמוד

שואלים בעברית והוא עונה בעברית, על השיעור שפתוח מולך.

✓

סיכום, ואז בוחן

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

בדקנו את זה בפועל ב-7.9.2026: שלוש שאלות חופשיות, בקשת סיכום ובקשת בוחן — חמש מתוך חמש חזרו בעברית שוטפת ומדויקת לתוכן.

✓בחר במסלול הזה אם…

אתה כבר כותב JavaScript ומכיר HTML, CSS ושורת-פקודה, ורוצה לעבור ל-React בצורה מסודרת; אתה צריך תוצרים שמישהו בדק — ארבע אפליקציות שעברו בדיקה אנושית מול רובריקה; ואתה יכול להקצות 6 עד 8 שעות בשבוע לאורך כחודשיים.

✕דלג עליו אם…

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

לפני שמחליטים

מה זה לא נותן

הכול באנגלית.: השיעורים, הוראות הפרויקטים והרובריקות כתובים באנגלית בלבד. מארווין עונה בעברית, אבל החומר עצמו לא מתורגם.
הפער בין ההבטחה לפרויקטים.: עמוד-המוצר מדבר על מיומנויות מוכנות לקריירה; מה שנמדד בפועל הוא ארבע אפליקציות אישיות מול רובריקה — בלי עבודת צוות, בלי קוד קיים של ארגון ובלי ליווי השמה.
ההזדהות היא הדמיה.: בפרויקט החנות אודסיטי כותבת במפורש שההתחברות היא בצד-הלקוח בלבד ואינה אבטחה אמיתית. אבטחת צד-שרת אינה חלק מהמסלול.
החלק של הנייד הוא העשרה.: React Native מסומן כלימודי העשרה ויושב מחוץ לרצף הליבה — הוא תוספת, לא מסלול מובייל מלא.

שאלות ותשובות

צריך לדעת React לפני שמתחילים?

לא. React, Redux ו-React Native נבנים מאפס בתוך המסלול. מה שכן נדרש מראש: JavaScript ברמת ביניים כולל קוד אסינכרוני, HTML ו-CSS, שורת-פקודה בסיסית, NodeJS ובקרת גרסאות.

כל התוכן באנגלית — איך מתמודדים?

השיעורים, ההוראות והרובריקות באנגלית. בתוך הכיתה יושב מארווין, עוזר AI שאפשר לשאול אותו בעברית, לבקש ממנו סיכום של השיעור או שיבחן אותך על החומר. בדקנו — חמש מתוך חמש בקשות חזרו בעברית.

מי בודק את הפרויקטים שאני מגיש?

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

כמה זמן זה באמת לוקח?

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

האם הפרויקטים מלמדים אבטחה אמיתית?

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

החלק של React Native הוא חובה?

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

61 שעות, ארבעה פרויקטים, תיק אחד

המחיר, תנאי הביטול ומועד הפתיחה — בעמוד המסלול של אודסיטי. ההחלטה שלך.

לעמוד המסלול באודסיטי ←