מה זה בכלל React.js?

על רגל אחת - מה זה בכלל React.js ולמה זה טוב?

 

configurar-react

מאת יקי רפאל, מפתח Front-end ב-Payoneer

הקדמה קצרה.

React.js היא ספרית JavaScript מבית היוצר של פייסבוק ואינסטגרם, שמאפשרת לבנות ממשקי משתמש ואפליקציות (single page application) בצורה נוחה עם ביצועים מעולים בסיום.

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

ReactIntro2

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

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

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

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

מה זה Components?

React מחלקת את האפליקציה למספר חלקים שנקראים קומפוננטות.

ReactIntro1

כל קומפוננטה היא יחידה עצמאית. יש לה את התכונות שלה ואת ה”מצב” (State) שלה שהיא מנהלת בתוך עצמה. קיימת גם היררכיה ויחסים בין קומפוננטות: קומפוננטות יכולות להכיל קומפוננטות אחרות וכמובן לתקשר איתן. בתרשים מעלה למשל, אנחנו יכולים לראות קומפוננטה בשם Form שמכילה קומפוננטה בשם Switch.

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

איך כותבים קומפוננטה

הקומפוננטה היא בעצם סוג של מיקס של Java-Script עם Html ולפעמים גם css. היא נשמרת כקובץ Js עצמאי.

חשוב להגיד שיש מספר דרכים לכתוב קומפוננטות, ובכלל איך לכתוב את האפליקציה הריאקטית (Class-Components, Stateless-Components… עם JSX או בלי…). המון בלגאן ולא איזשהי שיטה אחת. וזה עוד מבלי שהכנסתי את Web-Pack לתמונה.

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

Screen Shot 2016-09-04 at 16.07.34

אז מה אנחנו רואים פה? קובץ js שמכיל איזשהי פונקציה שיוצרת קומפוננטה. ובתוך הקומפוננטה אנחנו יכולים גם לזהות תגיות html שמכילות בתוכם איזשהו מידע בתוך סוגריים מסולסלים.. ובקיצור, יצא לנו – שקשוקה. לפורמט הזה שמאפשר לנו לכתוב html בתוך ה js קוראים JSX.

לקומפוננטה הזו (HelloWorld) אנחנו יכולים כמובן להגדיר מאפיינים שמשתנים, כמו למשל: name, date או צבע.

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

ערימה של קומפוננטות

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

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

לסיכום

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

לקריאה נוספת: צעדים ראשונים ב-Angular.JS

הפוסט פורסם לראשונה בבלוג אמנות המסך

כתב אורח

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

הגב

3 Comments on "מה זה בכלל React.js?"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
Sort by:   newest | oldest | most voted
יאיר
Guest

מאמר מועיל! תודה :)

ניב אסרף
Guest

כל הכבוד יקי. מחכים למאמרים הבאים…

גלעד
Guest

אהלן, רציתי לשאול – איפה React עומד ביחס ל-Angular? האם מדובר ב-2 ספריות פרונט עם אותה תכלית בדיוק, או ש-React נועדה עבור אפליקציות פשוטות יותר?
תודה :)

wpDiscuz

תגיות לכתבה: