1.0.0 :הרודהמתא םיקה םש ,Applitools-ל ףרטצה רשאכ 2014 תנשב עציב דנאטנורפה םלועל רבעמה תא.התוא ליבומ אוה םויכו

זיק-רן בר — בעברית ריאקטללמוד

2

ריאקט בעברית ללמוד

זיק-רן בר 1.0.0מהדורה:


3

.2020זיק, -רן בר © שמורות הזכויות כל

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

ניתן להסבה לעשות שימוש אישי בספר זה לצרכים ניתן להעברה )למעט על פי דין(, ובלתי לימודיים בלבד.

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

.אחרת

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

זיק, ואסור לך להשתמש בהן בתוך תוכנות -הדוגמאות המובאות בספר זה הן בבעלות של רן בר

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


4

עריכה לשונית: יעל ניר הגהה: חנן קפלן

(tsv.co.il)עיצוב הספר והכריכה: טל סולומון ורדי

סוכנות לסופרים – הפקה: כריכה www.kricha.co.il

https://tsv.co.il/

http://www.kricha.co.il/


5

תוכן העניינים 9 ................................................................................................... על "ללמוד ריאקט בעברית"

10 ........................................................................................................................ על המחבר

11 .......................................................................................................... על העורכים הטכניים

11 ............................................................................................................................ דורון זבלבסקי

11 ................................................................................................................................... גיל פינק

12 ................................................................................................................................ דורון קילזי

13 ......................................................................................................... על החברות התומכות

Really Good ............................................................................................................................ 13

13 .................................................................................................................................. אלמנטור

HoneyBook ............................................................................................................................ 15

16 ......................................................................................................................... על ריאקט

18 ....................................................................................................................... דרך הלימוד

18 ...................................................................................................................על המונחים בעברית

20 .................................................................................................... סביבת העבודה הבסיסית

codepen ................................................................................................ 23- סביבת עבודה בסיסית ב

26 .............................................................................................................. אפליקציית ריאקט

32 .............................................................. העבודה הבסיסיתבניית קומפוננטת פונקציה בסביבת

Create React App ... Error! Bookmark notבנייה של סביבת ריאקט אמיתית ומורכבת יותר באמצעות

defined.

.Error! Bookmark not defined ...................................................... על המחשב שלכם Node.jsהתקנת

.Error! Bookmark not defined .............................................................................................. התקנה על חלונות .Error! Bookmark not defined ................................................................................................... התקנה על מק

.Error! Bookmark not defined .............................................................................................. התקנה על לינוקס

.Error! Bookmark not defined .............................................................................. עבודה עם טרמינל

.Error! Bookmark not defined ................................................................................................הפעלת הטרמינל .Error! Bookmark not defined .................................................................................................... ניווט בטרמינל

.Error! Bookmark not defined .................................................... מציאת מיקומים בטרמינל דרך חלונות

.Visual Studio Code ........................................................................... Error! Bookmark not defined-טרמינל ב .Error! Bookmark not defined ..................................................................... דרך הטרמינל Node.jsגרסת בדיקת

.Create React App ............................................................. Error! Bookmark not definedעבודה עם


6

.Error! Bookmark not defined .................................................................................. קשיים ותקלות

.Create React App .......................... Error! Bookmark not defined-כתיבת קומפוננטה ראשונה ב

Export\ Import ....................................................................... Error! Bookmark not defined.

.Error! Bookmark not defined ......................................................................... ייבוא מנתיבים אחרים

.js .................................................... Error! Bookmark not definedאין חובה להשתמש בסיומת הקובץ

.Error! Bookmark not defined ....................................................................... ייצוא של כמה משתנים

.Error! Bookmark not defined ................................................. ומשאבים אחרים CSSת, ייבוא של תמונו

JSX ......................................................................................... Error! Bookmark not defined.

.JSX ................................................................................... Error! Bookmark not defined-רשימות ב

.Error! Bookmark not defined .................................................... (propsקומפוננטה עם תכונות )

.Error! Bookmark not defined ...................................................................................... דיבאג

.Error! Bookmark not defined ...................................................................................... סטייט

.Error! Bookmark not defined .................................................................................... ריאקט וִרנדור

.Error! Bookmark not defined .............................................................................................. סטייט

.Error! Bookmark not defined ........................................................... תכנון מבנה הקומפוננטות

.Error! Bookmark not defined ......................................................... אירועים ועדכון קומפוננטות

.DOM ..................................................................................... Error! Bookmark not definedאירועי

.Error! Bookmark not defined ............................................................... אירועים סינתטיים/ ריאקטיים

.fragment ..................................................................... Error! Bookmark not definedאלמנט

useEffects ............................................................................... Error! Bookmark not defined.

.Error! Bookmark not defined ................................................................... קומפוננטה ללא שם

.Error! Bookmark not defined ..................................................................... עיצוב קומפוננטות

CSS בסיסי ........................................................................................ Error! Bookmark not defined.

.Error! Bookmark not defined ............................................................................................................. סלקטור .Error! Bookmark not defined .............................................................................................................. תכונות

.Error! Bookmark not defined ............................................................................ קלאס ריאקטי

.Error! Bookmark not defined ........................................................................... מעגל החיים בקלאס

componentDidMount ..................................................................................... Error! Bookmark not defined. componentDidUpdate (prevProps, prevState, snapshot) .............................. Error! Bookmark not defined.

componentWillUnmount ............................................................................... Error! Bookmark not defined. shouldComponentUpdate (nextProps, nextState) ......................................... Error! Bookmark not defined.

getDerivedStateFromError (error) ................................................................. Error! Bookmark not defined.


7

componentDidCatch (error, info) ................................................................... Error! Bookmark not defined.

.Error! Bookmark not defined ........................................... אחריםשימוש בקומפוננטות ממקורות

.Error! Bookmark not defined ........................................................................ ייבוא כמה קומפוננטות

.Error! Bookmark not defined .................................................................................. מודולים חסרים

HOC: Higher Order Component ............................................... Error! Bookmark not defined.

.Error! Bookmark not defined .................................................................................... ראוטינג

.Error! Bookmark not defined ................................................................................. קונטקסט

.Error! Bookmark not defined ............................................................ חיבור לשרת עם סרוויסים

.jest ................................................................ Error! Bookmark not definedמבוא לבדיקות עם

.import ......................................................................... Error! Bookmark not defined –חלק ראשון

.Error! Bookmark not defined ........................................................ כתיבת מסגרת הבדיקה –חלק שני

.Error! Bookmark not defined ......................................................... הרצת הקומפוננטה –חלק שלישי

.Error! Bookmark not defined .......................................................................... הבדיקה – חלק רביעי

.props ............................................................ Error! Bookmark not definedבדיקות לקומפוננטה עם

.assert .................................................................... Error! Bookmark not defined –פונקציית בדיקה

not .................................................................................................................. Error! Bookmark not defined. toBeTruthy ..................................................................................................... Error! Bookmark not defined.

toBeFalsy ........................................................................................................ Error! Bookmark not defined. toContain ........................................................................................................ Error! Bookmark not defined.

.Error! Bookmark not defined ................................. לסביבה חיה יצירת בילד והעלאת האפליקציה

.Error! Bookmark not defined ...................................................................................... רידקס

.Error! Bookmark not defined .................................................................. הפילוסופיה מאחורי רידקס

.Error! Bookmark not defined ......................................................... קומפוננטות מנוהלות מול מנהלות

.Error! Bookmark not defined .................................................................................. מעת רידקס הט

.Error! Bookmark not defined ................................................................................................... התקנת רידקס .Error! Bookmark not defined ................................................................... תכנון הסטייט וזרימת המידע במערכת

mapStateToProps ........................................................................................... Error! Bookmark not defined. mapDispatchToProps ..................................................................................... Error! Bookmark not defined.

.Error! Bookmark not defined ......................................................... ס במערכת שלנוהמימוש של רידק

.Error! Bookmark not defined .................................................................... ומה עכשיו? –סיום

.Error! Bookmark not defined .................................................................. התחברות לקהילת הפיתוח

.Error! Bookmark not defined ............................................................................. מפגשים ומיטאפים


8

.Stackoverflow ....................................................................... Error! Bookmark not definedהאתר

.Error! Bookmark not defined .......................................................................... תרומת קוד בגיטהאב

.PropType ...................................................................... Error! Bookmark not definedנספח:

.PropTypes ........................................................................... Error! Bookmark not definedהתקנת

.PropTypes ....................................................................... Error! Bookmark not defined-השימוש ב

.Error! Bookmark not defined .........................................................................ערכים שאפשר לקבוע


9

על "ללמוד ריאקט בעברית"

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

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

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

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

לאידיאלית לכניסה לעולם פיתוח צד הלקוח.

. אם אינכם מכירים CSS-וב HTML-ע מקיף בג'אווהסקריפט וידע בסיסי בהספר מניח ידג'אווהסקריפט, אפשר ללמוד זאת בספר "ללמוד ג'אווהסקריפט בעברית". יש שם פרק המסביר

בסיסי. מי שסיים לקרוא את הספר ההוא ותרגל כהלכה, אמור להחזיק CSSבסיסי ועל HTMLעל הכרת – יאקט. בספר זה נלמד על ריאקט ממש מהבסיס בידע מספק על מנת להתחיל ללמוד ר

high orderונגיע עד חומרים מתקדמים כמו –מונחים בסיסיים ויצירת סביבת עבודה components ו-state hooks 16. הספר מעודכן לגרסת ריאקט.


10

המחבר על

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

בצד הן מתקדמות בטכניקות מפתח הוא שם ,Verizon ועד HPE-מ ,לאומיות-רב חברות של פיתוח על וכמובן CI\CD-ב שימוש על נכונה, פיתוח תשתית בניית על דגש ושם השרת, בצד הן ,הלקוח

.מידע אבטחת

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

טכני אתר שהוא (,internet-israel.com) "ישראל אינטרנט" האתר את רן מפעיל 2008 משנת בשבוע. פעם לפחות ומתעדכן בעברית תכנות על והסברים מאמרים מדריכים, המכיל

ומלמדבעברית" Node.jsוהספר "ללמוד "בעברית אווהסקריפט' ג ללמוד" הספר מחבר הוא רן

.אונו האקדמית בקריה

טולקין וחובב ארוכים למרחקים רץ .ומיכל דניאל , כפיר ,עומרי :ילדים לארבעה ואב ליעל נשוי רן .מושבע


11

הטכניים העורכים על

זבלבסקי דורון תוכנה, כמהנדס עבד בהןש מידע אבטחת בחברות השרת, בצד דווקא התחילה דורון של הקריירה

מקצועי. ומנהל טכני מוביל את הקים שם ,Applitools-ל הצטרף כאשר 2014 בשנת ביצע הפרונטאנד לעולם המעבר את

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

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

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

פינק גיל , Web Technologies Google Developer Expert ווב, מערכות לפיתוח מומחה הוא פינק גיל

Microsoft Developer Technologies MVP חברת של והמייסד sparXys. אינטרנט מבוססי פתרונות בפיתוח מסייע הוא שם ,שונים ולארגונים לחברות מייעץ הוא כיום

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

(Microsoft Official Course MOC,) הספר של משותף מחבר "Pro Single Page Application Development" (Apress) הבינלאומי הכנס בארגון ושותף AngularUP.

http://www.gilfink.net גיל: על נוספים לפרטים

http://www.gilfink.net/


12

דורון קילזי כעשור. זה לרשת פיתוח ונושם חי דורון

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

האינטרנט מחברות אחת ,Verizon Media-ב full-stack מפתח דורון האחרונות השנים בארבע כגון ותיקות מטכנולוגיות החברה של במעבר ,היתר בין ,עוסק הוא אלו בימים בעולם. הגדולות

Angular.js ה בעולם מתקדמות מערכות של ובפיתוח ריאקטל-ad tech. בעולם מחדש יום כלב ולהתאהב להתמקצע להמשיך לו גורם ולהשתפר ללמוד דורון של הדחף

. js-ה


13

החברות התומכות על

Really Good Really Good היא בוטיק פיתוחFront End שעובדת עם סטארטאפים וחברות טכנולוגיה מאז

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

בריא בין עבודה לחיים.

מנוסים וממש טובים עם תשומת לב לפרטים הקטנים. Front Endאנחנו מגייסים מפתחי ReallyGood.co.il

אלמנטור

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

ידידותי למפתחים, ובכך לחסוך זמן פיתוח ולהיות יעילים ורווחיים. APIבאמצעות

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

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

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

Full, מפתחי UI&UXלכם את הידע כדי לבנות עולם יפה יותר אנחנו מחפשים אתכם, מעצבי

https://reallygood.co.il/


14

Stack מהנדסי ,Big Data וDevOps עם מומחיות בניהולKubernetes על פלטפורמות הענן שלGCP &AWS.

/https://elementor.comאתר החברה:

/https://careers.elementor.com: עמוד המשרות

https://elementor.com/



https://careers.elementor.com/


15

HoneyBook

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

משימות, אוטומציה וכו.יום לעשרות אלפי אנשים בארה״ב להתנהל בצורה אפקטיבית ומקצועית -עוזרת יוםהפלטפורמה

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

לוודא שאנחנו מאפשרים לו בהאניבוק הלקוח הוא המרכז ואיתו גם הברנדינג שלו. חשוב לנו

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

תקשורת מהירה ויעילה עם הלקוחות שלו.

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

את הדרך בה עצמאים עושים עסקים. חברה שמאפשר ללקוחותיה להתפרנס מהחלום שלהם.? גם 2019ו 2018טרקטיביים ביותר לשנת וכבר הזכרנו שהופענו ברשימת מקומות העבודה הא

בישראל וגם בסן פרנסיסקו )אם תהיתם(.

אז למה לעבוד בהאניבוק? כי התרבות עבודה פה מדהימה. כי כיף להגיע כל בוקר לעבוד עם אנשים מוכשרים כל כך. כי כל יום שומעים מאות פידבקים מדהימים מלקוחות ששינינו להם את

ולוגי דוחף אותנו כל יום לבנות דברים חדשים ולשפר את מה שכבר בנינו.החיים. כי האתגר הטכנ

https://www.honeybook.com/careers :עמוד המשרות שלנו

https://www.honeybook.com/careers


16

ריאקט על

אתר הם בעצם -והם המשתמש אל שולח האינטרנט ששרת לקבצים הכינוי הוא הלקוח צד בציו קבו תמונות בציו קב ,CSS-ו HTML אחד או יותר של בקובץ מדובר כלל בדרך האינטרנט.

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

בתחילה ;אינטרנט אתרי נראו כך הרשת ימי בתחילת התנהגותו. את הג'אווהסקריפט כמיםחו תמ לתפקידים ובהמשך בדף שונות אינדיקציותל או לאנימציות שימשה ג'אווהסקריפט

ובכל זאת, באתרי האינטרנט הראשוניים, כל .AJAX באמצעות בקשות שליחת כמו יותרשיגרה בקשה לשרת –על כפתור בתפריט או שיגור טופס לחיצה –אינטראקציית ניווט כלשהי

HTML ,CSSוגרמה לטעינה מחודשת שלו בידי הדפדפן ולקבלת סט חדש של קובצי וג'אווהסקריפט.

תיספרי תהיהי jQuery תיספרי .jQuery כמו ,ג'אווהסקריפט ספריות להתפתח החלו הזמן במהלך

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

צד על מסתכלים אנו שבה הדרך את לחלוטין ששינתההייתה ספרייה זו .Backbone.js שנקראת כמו ומתנהגת הלקוח בצד שיושבת שלמה אפליקציה – התנהגות רק שמגדיר קוד במקום :לקוחה

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

הלקוח. עבור דופן יוצאת שימוש תיחווי ועד פיתוח מקלות – רבים היו ,הלקוח בצד ההתנהגות את באתר כשגולשים . כלומר,SPA – Single Page Application ליצור אפשרו האלו הפריימוורקים

באמצעות רכיב מבוסס לדף דף בין חלק מעבר אלא מהשרת מחדש טעינה אין דפיםבין ובמעבר אבל ,נההראשו היתהי Backbone.js .ג'אווהסקריפט שנקרא ראוטר )ועליו נלמד בהמשך הספר(

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

לנו מאפשרת היא הלקוח. לצד תהמיועד ג'אווהסקריפטת מבוסס ספרייה היא (React) ריאקט

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


17

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

, שעד היום היא התומכת הראשית שלה פייסבוק חברת היא ריאקט של במקור, המפתחת

מפותחת ריאקט הדרך. את ומתווים ריאקט של הליבה פיתוח את מובילים שלה המפתחיםו בה להשתמש אפשר בגיטהאב. נמצא שלה המקור וקוד( 16)החל מגרסה מלא פתוח קוד שיוןיבר

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

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

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

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

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

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


18

הלימוד דרך

מליץ מאוד להעתיק כל הניסיון שלי מלמד שכל דבר חדש בתכנות לומדים דרך הידיים. אני מ Visual Studio Codeכמו – החביב עליכם IDE-דוגמה וכל קטע קוד בספר, להדביק אותם ב

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

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

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

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

–שונות. נוסף על כך, בפייסבוק יש לא מעט קבוצות מקצועיות בעברית שישמחו לסייע לכם יש כמה קישורים רלוונטיים. בפרק הסיכום של הספר

בעברית המונחים על בעברית מונחים באילו והדילמה מעשור, יותר כבר תכנות ועל טכנולוגיה על בעברית כותב אני

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

לבצע חדשה דרך על שמעתי האחרון המתכנתים "במפגש ותגידו: עבודה לריאיון תגיעו אם האלו. אם אבל העבודה. את תקבלו שלא להניח סביר הבטחות", מבוסס במנשק הזחות שבודק הידור מבוסס API-ב אינדנטציה שבודק ִקמּפול לבצע חדשה דרך על שמעתי האחרון "במיטאפ תגידו,

"הידור", כמו מילים בספר תמצאו שלא הסיבה זו מדברים. אתם מה על יבינו – פרומיסים" הם השתמשתי שבהם המונחים ו"אינטרנט". "קלאס" "קמפול", אלא "מרשתת", או "מחלקה" אני לראשונה, במונח משתמש אני שבו מקום בכל בפועל. בתעשייה משתמשים שבהם המונחים

בגוגל. שלכם לחיפושים אותו להכניס שתוכלו כדי באנגלית שלו הגרסה את גם מספק


19

המדוברת לשפה נכנסו אכן שלה מהמונחים ושחלק ללשון לאקדמיה כלל בז שאיני לציין חשוב ירהחבה בידיי שהייתה מקום בכל אבל (,נתונים מסד או קובץ :למשל) השונים הטכנולוגיה במרכזי

.מובן להיות העדפתי ,הלשון בכללי לעמוד לבין מובן להיות בין


20

סביבת העבודה הבסיסית

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

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

אפשר לדלג על -כל טכניקה וטכניקה. פשוט אי – נסו מדפדפן אחר שאינו הדפדפן הרגיל שלכם השלב הזה.

כולם בג'אווהסקריפט. החלק הראשון הוא הספרייה עצמה: –מכמה חלקים ריאקט מורכבת

ריאקט. מדובר בקובץ ג'אווהסקריפט מרכזי המכיל את כל הפונקציונליות של הספרייה. הקובץ אפשר להשתמש -ובלעדיו אי – מכיל מודולים של ג'אווהסקריפט וגם משתנים גלובליים ואחרים

ה בסיסית, אנו נזקקים לריאקט. הגיוני, לא?בריאקט. כשאנו בונים סביבת עבוד. גם הוא חלק מהספרייה וגם הוא כתוב בג'אווהסקריפט. הוא מכיל react-domהחלק השני הוא

Document Objectהם DOM. ראשי התיבות של DOM-את הפונקציות הקושרות בין ריאקט לModel ואני ארחיב לגביו בהמשך. כרגע צריך פשוט לזכור שמדובר בעוד חלק של הפריימוורק ,

שאנו צריכים איתנו כשאנחנו מפתחים עבור אתרי אינטרנט.

. מה זה? מדובר בספריית ג'אווהסקריפט שימושית ופופולרית מאוד. babelהחלק השלישי הוא סייעה למתכנתים שרצו להתאים את קוד babelיש לה כמה תפקידים חשובים. במקור

הג'אווהסקריפט שלהם לדפדפנים ישנים שלא תמכו בפיצ'רים החדשים של השפה, למשל חה את כל הקוד המודרני של . הספרייה הזו לקconstאו letדפדפנים שלא ידעו מה זה

ג'אווהסקריפט והעבירה אותו תהליך, שבמסגרתו הוא הפך לקוד שתואם גם דפדפנים ישנים. , כך שדפדפן ישן יוכל לעבוד איתו. התהליך הזה נקרא var-ל letלמשל, היא המירה את

ם זו המילה במדעי המחשב שמשמעה לקחת קוד שכתוב בשפה מסוימת ולתרג –"טרנספירציה" אותו לקוד שכתוב בשפה אחרת. במקרה הזה לקחת קוד שכתוב בג'אווהסקריפט מודרנית

ולהעביר אותו לקוד שכתוב בג'אווהסקריפט מגרסאות קדומות.

שלנו, שהוא הסינטקס שבו אנו JSX-יש תפקיד משמעותי בהמרת ה babel-במקרה שלנו, לנלמד בהרחבה JSXעבוד איתו. על שהדפדפן יודע ל HTMLכותבים בריאקט קומפוננטות לקוד

בהמשך.


21

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

אנו כותבים את הקוד שלנו.

. ראשי CDN-האלו מהאתר של ריאקט או להשתמש בהם ישירות מאנו יכולים להוריד את הקבצים זהו כינוי לשרתים גדולים שנמצאים בכל – Content Delivery Networkהם CDNהתיבות של

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

מציעה את הקבצים בקישורים הבאים: unpkgואנו נשתמש בו. unpkgמשתמשת בו הוא

קובץ הפריימוורק של ריאקט:om/ajax/libs/react/16.4.0/umd/react.development.jshttps://cdnjs.cloudflare.c

. URL-של ריאקט ולכן קיים המספר הזה ב 16שימו לב: הספר מלמד על גרסה

:react-domקובץ -dom/16.4.0/umd/react-https://cdnjs.cloudflare.com/ajax/libs/react

dom.development.js

:babel-קובץ ה

[email protected]/babel.min.js-https://unpkg.com/babel

https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js

https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js

https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js


22

שלנו נראה: HTML-כך קובץ ה <!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>React development environment</title>

<script crossorigin

src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-

dom.development.js"></script>

<script crossorigin src="https://unpkg.com/babel-

[email protected]/babel.min.js"></script>

</head>

<body>

<div id="content"></div>

</body>

<script type="text/babel">

console.log('Here will be React code');

</script>

</html>

שהוא קוד שצריך לעבור טרנספילציה babel-בתחתית הקובץ נמצא הקוד שלנו. אנו מסמנים ל

באמצעות הצמדה של:

type="text/babel"

לתגית הסוגרת שלו, אנו יכולים לכתוב את קוד script-. בין התגית הפותחת של הscript-לתגית ה

הג'אווהסקריפט שלנו. כרגע יש שם את השורה הבאה:

console.log('Here will be React code');


23

HTML-החינמי(, צרו את קובץ ה Visual Studio Codeבאמצעות עורך הקוד החביב עליכם )כמו בדפדפן באמצעות כניסה HTML-הזה ושמרו אותו במחשב המקומי שלכם. פתחו את קובץ ה

לתיקייה שבה הקובץ נשמר ולחיצה על "פתח עם דפדפן" וּוַדאו שהוא עולה ושבקונסולה של כלי זהו, אנחנו מוכנים לעבודה ראשונית. –. אם כן Here will be React codeהמפתחים מופיע

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

. מדובר באתר שמאפשר לכולם )אפילו בלי codepen.ioאבל האתר הכי פופולרי ומוצלח הוא רישום, אף על פי שמומלץ להירשם כי זה מאפשר שמירה של הקוד שלכם( לכתוב קוד פשוט

, /https://codepen.io/pen. העבודה באתר פשוטה: נכנסים אל CSS-ו HTMLבג'אווהסקריפט, התוצאות. את ורואים קוד לכתוב מתחילים

וריאקט חייבים להכניס את שלושת קובצי הג'אווהסקריפט שהזכרתי codepen עם לעבוד כדי

. איך עושים את זה? babel-וקובץ ה react-dom-קודם: קובץ הפריימוורק של ריאקט, קובץ ה preprocessor-כ babelבאותו אתר( הקפידו להכניס את penבהגדרת כל "פרויקט" )שנקרא

. זה נראה כך: CDN-וקישור ידני אל קובצי הג'אווהסקריפט מה

https://codepen.io/pen/


24

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

vuer/pen/gOYMWoP-the-https://codepen.io/barzik

.Here will be React codeצפו בקונסולה וראו את המסר

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

הראשונה.

https://codepen.io/barzik-the-vuer/pen/gOYMWoP


25


26

אפליקציית ריאקט

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

אחד. מובן HTML, וחיה. יכולות להיות כמה אפליקציות ריאקט בדף Virtual DOMמשלה, שנקרא DOMאחר. אפליקציית הריאקט היא בעצם אלמנט DOMשכל אחת מהן חיה מתחת לאלמנט

שהם –בו אנו יכולים ליצור את המרכיבים של האתר שלנו שאנחנו מכריזים עליו כשלנו, ו קומפוננטות הריאקט.

כדי ליצור אפליקציית ריאקט מתחת לאלמנט מסוים אנו חייבים פשוט... לבחור אותו. אנו נגדיר div שזה אלמנט ,HTML פשוט ביותר עםid פשוט. להזכירכם– id הוא סלקטור ייחודי המגדיר

בוחרים לתת להם זהות ספציפית. שאנו HTML-אלמנטים ב כזה: divשלנו כבר יש הגדרה של HTML-בקובץ ה

<!DOCTYPE html>

<html>

<head>



<script crossorigin






<script src="local-react-code.js"></script>

</head>

<body>


</body>

</html>


27

:contentשלו הוא id-שה div –הינה ההגדרה


. contentהוא id-זה המקום שבו תוצב אפליקציית הריאקט שלנו. אנו צריכים רק לזכור שה

את אפליקציית הריאקט אנו יוצרים באמצעות:

ReactDOM.render

- . האובייקט הגלובלי הזה בא בזכות קובץ הReactDOMהמתודה הזו באה עם האובייקט הגלובלי

react-dom.js שדאגנו שיהיה בסביבת הפיתוח שלנו. המתודה מקבלת שני ארגומנטים: האחד ,)שעוד מעט נלמד בדיוק מה הוא(, והשני הוא האלמנט שאנו בוחרים כדי להריץ בו את JSXהוא

הזה. JSX-ה

הציבו את הקוד הזה בין תגיות הסקריפט שלכם:


const target = document.getElementById('content');

ReactDOM.render(

<h1>Hello World!</h1>,

target

);

</script>

בדפדפן אם הכול תקין. !Hello Worldשמרו וצפו בתוצאה. אתם תראו

הפסיקו לקרוא, פתחו את הקונסולה, צפו !Hello Worldאם לא הכול תקין ואתם לא רואים בגוגל כדי לתקנן, ודאו שהעתקתם את הקוד כשורה והמשיכו רק כאשר בשגיאות וחפשו אותן

אתם יודעים שסביבת הקוד שלכם עובדת.


28

. אני יוצר רפרנס target-. נתחיל מהשני, הReactDomהבה נעבור על הארגומנטים השונים של לאלמנט שבו אני רוצה להציב את התוכן שלי באמצעות:

document.getElementById('content');

כארגומנט השני. אתם אמורים להכיר את זה אם יש לכם ידע targetאני מעביר אותו לקבוע

)שנמצא גם בספר שלי HTML-בג'אווהסקריפט. אם לא, אנא חזרו על החומר של ג'אווהסקריפט ו "ללמוד ג'אווהסקריפט בעברית"(.

עכשיו נדבר על הארגומנט הראשון:

<h1>Hello world!</h1>

הזה נמצא HTML-ה –. אבל שימו לב למשהו מעניין HTMLהוא לא מורכב מדי, בסך הכול תגית ללא מירכאות בקוד HTMLבתוך קוד ג'אווהסקריפט! איך זה יכול להיות? הרי אם תשתמשו בקוד

ולא יודעת HTMLג'אווהסקריפט, הקוד ידפיס שגיאה ויפסיק לפעול. ג'אווהסקריפט לא מכירה בג'אווהסקריפט ללא מירכאות והקוד HTML-וב h1-. איך יכול להיות שאני משתמש בלעבוד איתו

לא נופל?

? הוא אחראי babel-. זוכרים את המרכיב השלישי בסביבת הפיתוח שלנו, הJSXהסיבה היא שיש בקוד הג'אווהסקריפט ולהמיר אותן למשהו HTML-למצוא את כל התגיות של ה

– JSXפשוט בלבד, הוא HTMLדד איתו. הקוד הזה, שכרגע יש בו שג'אווהסקריפט יודעת להתמו והוא אחד מהפיצ'רים החזקים שיש לריאקט. אנו נלמד עליו – JavaScript XMLראשי תיבות של

לעומק בהמשך ונראה איך מהמצב שיש לנו אפליקציית ריאקט אנו מגיעים למצב שבו אנו מפתחים קומפוננטות.

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

const target = document.getElementById('content');

const value = <h1>Hello World!</h1>;

ReactDOM.render(

value,

target

);

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


29

תרגיל div-שמכיל אפליקציית ריאקט במחשב המקומי שלכם. אפליקציית הריאקט תהיה ב HTMLצרו

.my-react-appשייקרא

פתרון

<!DOCTYPE html>

<html>

<head>



<script crossorigin






</head>

<body>

<div id="my-react-app"></div>

</body>


const target = document.getElementById('my-react-app');

const value = <h2>I am learning React!</h2>;

ReactDOM.render(

value,

target

);

</script>

</html>


30

פשוט שבו יש קריאה לשלושת הקבצים שאנו צריכים לאפליקציית HTMLראשית ניצור קובץ ריאקט ושעליהם הסברנו בתחילת הפרק.

מסוים שאנו רוצים להכניס אליו את אפליקציית הריאקט. idשיש לו divהצעד הנוסף הוא ליצור

במקרה הזה:


השלב הבא הוא ליצור את אפליקציית הריאקט באמצעות:

ReactDOM.render

והשני הוא האלמנט שהאפליקציה תהיה JSX-המתודה הזו מקבלת שני ארגומנטים: האחד הוא ה

, מלבד העובדה הפשוטה שהוא בתוך HTML-פשוט שאינו שונה מ JSXבו. הארגומנט הראשון הוא קובץ ג'אווהסקריפט:

const value = <h2>I am learning React!</h2>;

הארגומנט השני הוא האלמנט שהאפליקציה תהיה בו. אני מקבל אותו באמצעות

getElementById שהוא מתודת ג'אווהסקריפט שנמצאת בדפדפן באופן טבעי )בלי קשר , לריאקט(, ומעביר אותו באמצעות משתנה:


ושנית המטרה JSX-לפי הסדר, ראשית ה ReactDom.render-אני מכניס את שני המשתנים ל

שלי. זה הכול:

ReactDOM.render(

value,

target

);

. !I am learning Reactופתיחה שלו באמצעות הדפדפן תציג לי HTML-שמירת ה


31


32

בסביבת פונקציה קומפוננטת בניית העבודה הבסיסית

בסיסי, הגיע הזמן ללמוד על המבנה JSXאחרי שלמדנו לבנות את האפליקציה ואפילו למדנו על

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

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

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

". !I am learning Reactבתרגיל בפרק הקודם יצרנו אפליקציית ריאקט שבה כתוב "

JSX-ב h2-ה את לשכפל יכול אני ,"!I am learning React" פעמים כמה לכתוב רוצה אני אם באופן הבא:


ReactDOM.render(

<div>

<h2>I am learning React!</h2>



</div>,

target

);

דורשת renderאחד מקיף, כיוון שפונקציית div-השכפולים שלי בשימו לב שאני צריך לעטוף את

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


33

הבה ניצור קומפוננטה שהיא זו שתדפיס עבורנו את:


סוג אחד הוא קומפוננטות מבוססות קלאס, שעליהן נלמד בהמשך –יש שני סוגי קומפוננטות

הספר. הסוג השני והנפוץ יותר הוא קומפוננטה של פונקציה, והיא פשוטה למדי. מגדירים אותה וננטה נראית כך:באמצעות פונקציה )זו לא הפתעה גדולה, נכון?(. כרגע זה די פשוט. הקומפ

function Greeting() {

return <h2>I am learning React!</h2>;

}

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

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

. כך:HTMLאיך נשתמש בקומפוננטה הזו? בדיוק כמו

<Greeting />

כאלמנט שסוגר את עצמו. או כך:

<Greeting></Greeting>

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


34

ואיך הקוד המלא שלנו ייראה? כך:

<!DOCTYPE html>

<html>

<head>



<script crossorigin






</head>

<body>


</body>




}


ReactDOM.render(

<div>

<Greeting />

</div>,

target

);

</script>

</html>


35

אני יכול לשכפל את הקומפוננטה כרצוני, כמובן:



}


ReactDOM.render(

<div>

<Greeting />

<Greeting />

<Greeting />

<Greeting />

<Greeting />

</div>,

target

);

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

לקומפוננטה, אני יכול לעשות את זה במקום אחד בלבד, ובבת אחת השינוי הזה ישפיע על כל שימוש ושימוש בקומפוננטה בתוך האפליקציה שלי.


36

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

function Hello() {

return <span>Hello,</span>

}


return <h2><Hello />I am learning React!</h2>;

}


ReactDOM.render(

<div>

<Greeting />

<Greeting />

<Greeting />

<Greeting />

<Greeting />

</div>,

target

);

אולי הקוד הזה נראה לכם מסובך, אבל הוא ממש לא! ראשית, יש לנו קומפוננטה שמחזירה לנו

Hello :היא נראית כך .

function Hello() {

return <span>Hello,</span>

}


37

היישר באפליקציה או בתוך כל קומפננטה אחרת. – ניתן להשתמש בקומפוננטה הזו בכל מקום - . איך היא משתמשת בה? בדיוק כמו בGreetingבמקרה הזה מי שמשתמש בה הוא קומפוננטת

HTML שם הקומפוננטה כתגית .HTML:


return <h2><Hello />I am learning React!</h2>;

}

ואפילו כמה וכמה פעמים, אבל פה JSX-אני יכול להשתמש בקומפוננטה הזו בכל מקום ב

הסתפקתי רק בפעם אחת.

כמה פעמים שאני רוצה. בכל פעם שאני Greetingאני יכול להשתמש, כמובן, בקומפוננטת .!Hello, I am learning Reactמשתמש בה, אני אראה על המסך

אם ארצה לשנות את הברכה, אוכל לעשות זאת בקלות דרך שינוי במקום אחד. זה מה שיפה ( בכל מקום. reuseאפשר לבצע בהן שימוש חוזר )המונח המקובל הוא –בקומפוננטות ריאקטיות

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


38

:תרגיל

.Rootצרו אפליקציית ריאקט שבתוכה יש קומפוננטה אחת שנקראת ,Helloשהוא JSXומחזירה Inigoנוספות, אחת שנקראת יש שתי קומפוננטות Rootבקומפוננטת

my name is Inigo Montoya והשנייה שנקראת ,Greeting ומחזירהJSX שהואPrepare to die!:בהפעלת האפליקציה אני אראה שכתוב .

Hello, my name is Inigo Montoya, Prepare to die!

:פתרון

function Inigo() {

return <span>Hello, my name is Inigo Montoya</span>

}


return <span>prepare to die!</span>

}

function Root() {

return <span><Inigo />, <Greeting /></span>

}


ReactDOM.render(

<div>

<Root />

</div>,

target

);

פשוט. JSXמחזירות Greeting-ו Inigoיצרתי שלוש קומפוננטות פשוטות. הראשונה והשנייה

.span-אני חייב לשים אלמנט אב אחד, במקרה הזה בחרתי ב JSX-כדאי לשים לב שב


39

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

אחר. HTMLאלמנט

-ו Inigoוהיא מכילה את שתי הקומפוננטות Rootהקומפוננטה השלישית היא קומפוננטת Greetingמנט אב אחד. גם הוא . גם פה, חשוב לציין, יש אלspan.

, באפליקציה שלי.Rootכל מה שנותר לי לעשות הוא להציב את הקומפוננטה השלישית,

Documents

1.0.0 :הרודהמתא םיקה םש ,Applitools-ל ףרטצה רשאכ 2014 תנשב עציב דנאטנורפה םלועל רבעמה תא.התוא ליבומ אוה םויכו