מדריך React עם דוגמאות חיות
מדריך חינמי ל-React 19: קומפוננטות, JSX, props, state, הוקים וביצועים. כל דוגמה רצה בתוך הדף, כך שאפשר לערוך את הקוד ולראות את הקומפוננטה והקונסול מתעדכנים.
להתחיל מסלול React מודרךצעדים ראשונים
- מה זה ReactReact היא ספריית JavaScript לבניית ממשקי משתמש מקומפוננטות. אתם מתארים מה המסך צריך להציג עבור הנתונים הנוכחיים, ו-React שומרת על הדף מסונכרן כשהנתונים משתנים.
- התקנת Reactמתקינים React על ידי יצירת פרויקט עם Vite: בודקים את Node.js, מריצים פקודת create אחת, מתקינים תלויות ומפעילים את שרת הפיתוח. הדף מכסה גם את הקבצים שנוצרים, build לפרודקשן, ולמה Create React App הוצא משימוש.
- JSXJSX הוא הרחבת תחביר ל-JavaScript שמאפשרת לכתוב markup שדומה ל-HTML בתוך קומפוננטות React. למדו את הכללים שלו: אלמנט שורש אחד, תגיות סגורות, className, מאפיינים ב-camelCase, סוגריים מסולסלים, סגנונות inline, הערות, ולאיזה קוד הוא מתקמפל.
- קומפוננטותקומפוננטת React היא פונקציית JavaScript שמחזירה JSX. למדו איך כותבים קומפוננטות פונקציה ואיך קוראים להן, איך מרכיבים מהן עץ, מפצלים אותן לקבצים, שומרים עליהן טהורות, ובמה קומפוננטה שונה מאלמנט.
- props ב-Reactprops הם הקלטים של קומפוננטת React: ערכים שהורה מעביר לילד כמאפייני JSX. למדו איך מעבירים props ועושים להם destructuring, קובעים ערכי ברירת מחדל, מעבירים פונקציות, עושים spread ל-props, ולמה props הם לקריאה בלבד.
- children ב-Reactchildren הוא ה-prop שמחזיק את כל מה שמכניסים בין תגית הפתיחה לתגית הסגירה של קומפוננטה. למדו איך בונים איתו קומפוננטות עוטפות ו-layout, מעבירים כמה slots כ-props עם שם, משתמשים ב-children כפונקציה, ומתי ה-Children API הוא הכלי הלא נכון.
- Fragment ב-ReactFragment ב-React מקבץ כמה אלמנטים לערך החזרה אחד בלי להוסיף צומת לדף. למדו את התחביר הקצר <>...</>, מתי צריך <Fragment key>, ולמה fragments חשובים בתוך טבלאות ורשימות.
- רינדור מותנהרינדור מותנה ב-React הוא JavaScript רגיל: משפט if, אופרטור טרנרי או && מחליטים איזה JSX קומפוננטה מחזירה. למדו כל דפוס, את ה-0 המיותר ש-&& יכול להדפיס, החזרת null, ולמה הסתרת קומפוננטה היא לא כמו אי רינדור שלה.
- רשימות ו-keysכדי לרנדר רשימה ב-React קוראים ל-map() על מערך ומחזירים JSX לכל פריט, ונותנים לכל פריט prop בשם key. למדו filter ואחריו map, מאיפה keys צריכים להגיע, ולמה key מבוסס index מבלבל בין פריטים כשהרשימה משתנה.
- אירועים ב-Reactאירועים ב-React הם props כמו onClick ו-onChange שמקבלים פונקציה, ו-React קוראת לה עם אובייקט אירוע כשהמשתמש פועל. למדו איך מעבירים handler במקום לקרוא לו, מעבירים ארגומנטים, קוראים את e.target.value ו-e.key, מונעים רענון של טופס ועוצרים bubbling.
- עיצוב ב-Reactמעצבים קומפוננטות React עם className ו-CSS רגיל, עם ה-prop style לערכים שמחושבים ב-JavaScript, עם CSS Modules לשמות class מבודדים, או עם מחלקות utility של Tailwind. למדו כל אחת מהדרכים, classes מותנים, ומתי להשתמש בכל אחת.
state וטפסים
- useStateuseState נותן לקומפוננטה ערך ששורד רינדורים מחדש ו-setter שמצייר את המסך מחדש כשהערך משתנה. למדו את התחביר, פונקציות updater, אובייקטים ומערכים ב-state, ולמה ערך נראה ישן מיד אחרי שקבעתם אותו.
- עדכון מערכים ואובייקטיםכדי לשנות מערך או אובייקט ב-state של React, בונים חדש ומעבירים אותו ל-setter. למדו איך מוסיפים, מסירים, מחליפים, מכניסים וממיינים פריטים, מעדכנים אובייקטים מקוננים, ולמה mutation של state משאיר את המסך בלי שינוי.
- טפסים ב-Reactבונים טפסים ב-React עם שדות מבוקרים: שדות טקסט, textarea, select, checkboxes וכפתורי רדיו, אובייקט state אחד לשדות רבים, שליחה עם onSubmit, הצגת שגיאות ולידציה, ו-form actions של React 19.
- Controlled מול Uncontrolledשדה מבוקר מקבל את הערך שלו מ-state של React ומשתנה רק דרך onChange. שדה לא מבוקר שומר את הערך שלו ב-DOM, וקוראים אותו עם ref או FormData. למדו את ההבדל, את האזהרות הנפוצות, ומתי להשתמש בכל אחד.
- הרמת state למעלההרמת state למעלה פירושה להוציא state משתי קומפוננטות ולהעביר אותו להורה המשותף הקרוב ביותר שלהן, שמעביר בחזרה מטה את הערך ו-setter כ-props. למדו מתי להרים, איך עושים את זה בשלושה צעדים, ומתי עדיף להשאיר state מקומי.
- useReduceruseReducer שומר state ומעביר כל עדכון לפונקציית reducer אחת: שולחים action, וה-reducer מחזיר את ה-state הבא. למדו את התחביר, איך כותבים reducer טהור, דוגמה של רשימת משימות, אתחול עצל, ומתי לבחור בו על פני useState.
אפקטים ו-refs
- useEffectuseEffect מריץ קוד אחרי ש-React עדכנה את המסך, כדי שקומפוננטה תוכל להסתנכרן עם משהו מחוץ ל-React: טיימר, מנוי, event listener. למדו את שלוש הצורות של מערך התלויות, פונקציית ניקוי (cleanup), לולאות אינסופיות, ומתי לא צריך אפקט בכלל.
- טעינת נתונים ב-Reactטוענים נתונים ב-React על ידי התחלת הבקשה ב-useEffect, החזקת loading, error ו-data ב-state, והתעלמות מתשובות שמגיעות אחרי שהקלטים השתנו. הדף מכסה async/await באפקטים, AbortController, race conditions ומתי להשתמש בספרייה במקום.
- useRefuseRef נותן לקומפוננטה קופסה, `{ current }`, ששומרת את התוכן שלה בין רינדורים בלי לגרום לרינדור כשמשנים אותה. השתמשו בו כדי להגיע לצומת DOM (פוקוס, גלילה, מדידה) או כדי לשמור מזהה טיימר או כל ערך שהמסך לא מציג.
- forwardRefforwardRef מאפשר לקומפוננטה לקבל ref מההורה שלה ולחבר אותו לצומת DOM שבתוכה. ב-React 19 קומפוננטות פונקציה מקבלות `ref` כ-prop רגיל, כך שקוד חדש כבר לא צריך forwardRef. ראו את שתי הגרסאות רצות, יחד עם useImperativeHandle וטיפוסי TypeScript.
- useLayoutEffectuseLayoutEffect עובד כמו useEffect אבל רץ מיד אחרי ש-React מעדכנת את ה-DOM ולפני שהדפדפן מצייר. השתמשו בו כדי למדוד אלמנט ולהתאים את ה-layout בלי הבהוב נראה לעין, והשאירו את useEffect לכל השאר.
הוקים וקונטקסט
- הוקים ב-Reactהוק הוא פונקציה ששמה מתחיל ב-use ומאפשרת לקומפוננטה להשתמש ביכולת של React כמו state, קונטקסט, refs או אפקטים. ראו את כל ההוקים המובנים מסודרים לפי מטרה, את שני הכללים שכל הוק עוקב אחריהם, ואיך כותבים הוק משלכם.
- useContextuseContext קורא ערך שקומפוננטת הורה מספקת, כך שקומפוננטה מקוננת עמוק מקבלת אותו בלי שכל קומפוננטה בדרך תעביר אותו מטה כ-prop. למדו createContext, providers, עדכון קונטקסט מילד, ואיך קונטקסט משפיע על רינדורים מחדש.
- Prop Drillingprop drilling הוא העברת prop דרך קומפוננטות שלא משתמשות בו, רק כדי שקומפוננטה רחוקה יותר למטה תוכל להשתמש בו. ראו את זה בדוגמה שרצה, למה זה כואב כשהאפליקציה גדלה, ואת הפתרונות בסדר שכדאי לנסות אותם: קומפוזיציה, קונטקסט, ואז ספריית state.
- הוקים מותאמים אישיתהוק מותאם אישית הוא פונקציה ששמה מתחיל ב-use ושקוראת להוקים אחרים, כך שכמה קומפוננטות יכולות להשתמש שוב באותה לוגיקה עם state. בנו את useToggle, useLocalStorage, useDebounce ו-useWindowWidth, ולמדו למה כל קריאה מקבלת state משלה.
- כללי ההוקיםלהוקים יש שני כללים: קוראים להם ברמה העליונה של קומפוננטה, אף פעם לא בתוך תנאים, לולאות או פונקציות מקוננות, וקוראים להם רק מקומפוננטות פונקציה או מהוקים מותאמים. למדו למה React צריכה את אותו סדר קריאות בכל רינדור ואיך מתקנים את השגיאות שמקבלים כשהוא משתנה.
- useIduseId מחזיר מזהה ייחודי ויציב לכל מופע של קומפוננטה, כך שתווית, שדה קלט ורמז של aria-describedby יכולים להצביע זה על זה גם כשהקומפוננטה מופיעה פעמים רבות. למדו למה Math.random ומונים נשברים עם רינדור בצד השרת, ולמה useId לא מיועד ל-keys של רשימות.
- useSyncExternalStoreuseSyncExternalStore רושם קומפוננטה לנתונים שחיים מחוץ ל-React, כמו מודול store קטן או API של הדפדפן כמו navigator.onLine, ומרנדר שוב בכל פעם שהנתונים משתנים. למדו את subscribe ו-getSnapshot, למה ה-snapshot חייב להישמר ב-cache, ואת getServerSnapshot.
רינדור וביצועים
- רינדור ב-Reactקומפוננטת React מתרנדרת שוב כשה-state שלה משתנה, כשההורה שלה מתרנדר, או כשקונטקסט שהיא קוראת משתנה. למדו את ההבדל בין render ל-commit, מה ה-virtual DOM באמת אומר, ואיך עוצרים רינדורים שלא צריך.
- useMemouseMemo שומר ב-cache את התוצאה של חישוב בין רינדורים ומחשב אותה מחדש רק כשהתלויות שלה משתנות. למדו את התחביר, איך שומרים אובייקט יציב בשביל ילד עם memo, ומתי useMemo לא שווה את זה.
- useCallbackuseCallback מחזיר את אותה פונקציה בין רינדורים עד שהתלויות שלה משתנות. הוא עוזר רק כשהפונקציה הזו מועברת לילד עם memo או משמשת כתלות של אפקט. למדו את התחביר, את ההבדל מ-useMemo, ואת הטעויות שכדאי להימנע מהן.
- React.memomemo עוטף קומפוננטה כך ש-React מדלגת על הרינדור מחדש שלה כשה-props שלה שווים בהשוואה רדודה לפעם הקודמת. למדו מתי זה עוזר, למה אובייקטים ופונקציות חדשים ב-props מכשילים אותו, ומה הוא לא עוצר.
- useTransitionuseTransition מסמן עדכון state כלא דחוף, כך ש-React יכולה לשמור על הדף רספונסיבי בזמן שהיא מרנדרת את החלק האיטי ברקע. למדו את isPending, את startTransition, transitions אסינכרוניים ב-React 19, ולמה זה לא debounce.
- useDeferredValueuseDeferredValue נותן לכם עותק של ערך שמותר לו לפגר מאחור בזמן רינדורים כבדים, כך ששדה קלט נשאר רספונסיבי בזמן שרשימה איטית משיגה את הקצב. למדו איך זה עובד, את הערך ההתחלתי של React 19, ואיך זה משתווה ל-useTransition ול-debounce.
- Suspense ו-lazySuspense מציג fallback בזמן שהקומפוננטות שבתוכו עוד לא מוכנות, ו-React.lazy טוען את הקוד של קומפוננטה רק כשהיא מתרנדרת לראשונה. למדו code splitting, גבולות מקוננים, Suspense עם use() ב-React 19, וטיפול בשגיאות.
React 19 ונושאים מתקדמים
- React 19React 19 הוסיפה Actions, useActionState, useOptimistic, use, ref כ-prop ו-metadata של המסמך, ו-19.2 הוסיפה את Activity ו-useEffectEvent. ראו כל פיצ'ר רץ, מה הוסר, ואיך משדרגים.
- useActionStateuseActionState עוטף action אסינכרוני, שומר את הערך שהוא החזיר לאחרונה, ואומר לכם אם הוא עדיין רץ. למדו את החתימה, form actions, החזרת שגיאות ולידציה, וקריאה לו מחוץ לטופס.
- useOptimisticuseOptimistic מציג את התוצאה שאתם מצפים לה בזמן ש-action אסינכרוני עדיין רץ, ואז חוזר ל-state האמיתי כשהוא מסתיים, כך שבקשה שנכשלה מבטלת את עצמה. למדו את התחביר, צורת ה-reducer, ולמה הוא חייב לרוץ בתוך action.
- ההוק useuse קורא את הערך של promise או של קונטקסט בזמן הרינדור. עם promise הוא עושה suspend עד שהנתונים מגיעים ומציג את ה-fallback של ה-Suspense הקרוב. בניגוד להוקים אחרים, הוא יכול לרוץ בתוך משפטי if ולולאות.
- Error Boundarieserror boundary הוא קומפוננטה שתופסת שגיאות שנזרקות בזמן רינדור הקומפוננטות שבתוכה ומציגה fallback במקום מסך ריק. למדו מה הוא תופס, איך כותבים אחד כ-class, איך מאפסים אותו, ואת הספרייה react-error-boundary.
- Portals ב-ReactcreatePortal מרנדר חלק מקומפוננטה לתוך צומת DOM אחר, כמו document.body, בזמן שהוא נשאר באותו מקום בעץ של React. השתמשו בו למודאלים, ל-tooltips ולתפריטים שצריכים לברוח מ-overflow hidden ומשכבות z-index.
- Strict ModeStrictMode הוא עטיפה לזמן פיתוח בלבד שמרנדרת קומפוננטות פעמיים, מריצה setup, cleanup ו-setup של אפקטים ב-mount, ומזהירה על APIs מיושנים, כך שרינדורים לא טהורים ו-cleanups חסרים מתגלים מוקדם. בפרודקשן הוא לא עושה כלום.
- מחזור חיים של קומפוננטהכל קומפוננטת React עושה mount (מופיעה), מתעדכנת (מתרנדרת שוב) ועושה unmount (מוסרת). למדו איך כל שלב ממופה ל-useEffect, את מתודות מחזור החיים של class והמקבילות שלהן בהוקים, ואת שלבי ה-render וה-commit.
- קומפוננטות classקומפוננטת class היא class של JavaScript שיורשת מ-React.Component ומחזירה JSX ממתודת render. למדו את this.props, this.state ו-setState, קשירת event handlers, מתודות מחזור חיים, PureComponent, ואיך ממירים class לקומפוננטת פונקציה.
השוואות וראיונות
- שאלות ראיון Reactכ-30 שאלות ראיון ב-React מרמת מתחילים ועד מתקדמים, כל אחת עם תשובה קצרה שמראיין היה מקבל, וקוד חי לשאלות שקל יותר לראות מאשר לקרוא.
- React מול AngularReact היא ספריית UI שמשלבים עם כלים אחרים; Angular היא framework מלא עם ניתוב, טפסים, HTTP ו-dependency injection מובנים. השוו את אותן קומפוננטות כתובות בשתיהן, זו לצד זו.
- React מול VueReact ו-Vue הם שניהם כלי JavaScript לבניית ממשקי משתמש מקומפוננטות. הם שונים ב-markup (JSX מול templates), באופן שבו הם מגיבים לשינויים (state immutable ורינדורים מחדש מול refs ריאקטיביים שאפשר לשנות), ובכמה מהאקוסיסטם רשמי.
- React עם TypeScriptאיך נותנים טיפוסים לאפליקציית React עם TypeScript: props ו-children, useState עם unions ו-null, useRef לאלמנטי DOM, event handlers, קונטקסט, קומפוננטות גנריות ו-props של אלמנטים נייטיב.
