מה זה React ולמה זה טוב?

תקראו בבלוג ישירות:https://react2wp.com/

אם מה שמעניין אתכם זה איפה כדאי ללמוד ריאקט, המלצה חמה על Modern React & Redux - מדריך שגם אני למדתי ממנו.

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

מה זה React?

בשפה הפשוטה, React זוהי ספרייה קטנה ליצירת ווב-אפליקציות מתקדמות, במהירות ובקלות.

הרבה משווים את React לאנגולר, אך זאתי השוואה מוטעת ולא נכונה. React, בניגוד לאנגולר, סה"כ ספריית View ולא כוללת בתוכה את כל שאר האפשרויות, כמו אנגולר( MV*).

יוצר React, הינו אדם בשם Jordan Walke, מהנדס תוכנה בפייסבוק שרצה לפתח בצורה קלה ופשוטה יותר, מערכות ואפליקציות ווב - והכי חשוב, שמהירות האפליקצייה, תהיה מהירה פי כמה ממה שאחרים רגילים בתחום. ספריית React תופסת חלק בהמון שירותים שאנחנו משתמשים בהם. כמו הFacebook Feed וInstagram. כיום, התחזוק, הפיתוח והקידום של React הוא ע"י פייסבוק עצמם.

p.s. על פי שReact זאת טכנלוגייה, אנחנו נתייחס אליה כ-זכר למען הפשטות של הכתיבה.

למה React יותר טוב?

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

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

בנוסף, בניגוד לאנגולר, שעובד בצורה דומה לjQuery אשר משנה את הDOM הקיים - זאת אומרת שהוא בהתחלה טוען את כל הHTML ולאחר מכן מבצע בו שינויים, React עובד על Virtual Dom (הסבר מצויין אפשר לראות בקורס: team treehouse - react basic) שזה גם נותן לו את הכוח והמהירות המטורפת.

מה זה Virtual Dom?

הדום הוירטואלי של React, הדבר הראשון החשוב ביותר בדום של React הוא שכל הקוד HTML נכתב מתוך הJavascript. אין יותר הפרדה בין html css, הכל משתלב לנו לקובץ Javascript אחד(או במקרה של React להמון קבצי js/jsx) המכיל גם את הHTML וגם את הJS.

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

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

הVirtual Dom מעבר שנותן לנו אפשרות של עריכת HTML בתוך הJavascript עצמו, הוא גם עושה את זה בצורה חכמה, ומהירה הרבה יותר. אך כמובן, ליצור כל פעם פונקציה על מנת ליצור אלמנט HTML חדש, זה לא פשוט, אך don't fear, young one - החבר'ה בפייסבוק, דאגו לנו מכף רגל ועד ראש, הם החליטו ליצור את JSX. שפת כתיבת הHTML בJavascript.

P.S. בנוסף למהירות, מכיוון שהVirtaul Dom לא קשור לחלון ווב - כמו הDom הרגיל, זה נתן לפייסבוק את האופצייה ליצור את React Native. מה זה React Native? זאת טכנלוגייה דומה לReact, אך מכוונת יותר לאפליקציות מובייל. מהיום אנחנו יכולים ליצור אפליקציות Native לכל פלאטפורמה אפשרית, בלי לדעת Objective C, Swift או Java. כן - אפליקציית Native כמפתחי Web Front End, כמה זה מדהים?

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

מה זה JSX?

JSX זאת טכנולוגיה חדשה שנוצרה ע"י פייסבוק, לכתיבה פשוטה של HTML בתוך Javascript, וספיציפית יותר - בתוך קוד של React.

במקום להשתמש בפונקציות React.createElement(element, props, children) ליצירת אלמנט HTML לדוגמה:

React.createElement("ul", null,
          React.createElement("li", null, 'option 1'),
          React.createElement("li", null, 'option 2'),
          React.createElement("li", null, 'option 3'),
          React.createElement("li", null, 'option 4'),
          React.createElement("li", null, 'option 5')
        )

שכאן אנחנו בעצם יוצרים ul ובתוכו 5 li עם התוכן option X.

אנחנו נוכל לשכתב את הקוד הנ"ל, בJSX בצורה הבאה:

 <ul>
          <li>option 1</li>
          <li>option 2</li>
          <li>option 3</li>
          <li>option 4</li>
          <li>option 5</li>
        </ul>

וכן חברים, זהו קוד שנמצא בתוך Javascript שנכתב ב JSX, ממש HTML, לא?

מכיוון שהדפדפנים שלנו אינם יודעים לקרוא JSX, לפני הרצת הקוד, אנחנו נהיה חייבים להפוך(לקמפל) את הקוד הזה לJS תקין, ובדר"כ עושים את זה בעזרת כלי כמו Babel. כמובן, לא נצטרך לעשות את זה בצורה ידנית, אפשר יהיה להשתמש בטכנלוגיות אוטומזציה כמו Grunt, Gulp או Webpack + כמה NPM Scripts, אבל על זה, צריך עוד לדבר ולדבר :)

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

הקומפוננטות בReact

בReact, אנחנו עובדים בצורה של separation of concerns. כל אזור באפליקציה, כל קומפוננטה, נוצרה על מנת לדאוג לדבר אחד בלבד - לconcern אחד. מעבר לזה, אנחנו יכולים ליצור קומפוננטה אחת בלבד וליישם אותה במגוון רחב של אפליקציות React. מחשבה מאוד OOP.

כל אפליקציית React, תהיה מחולקת לכמה שיותר קופנוננטות נפרדות(Components) שלכל אחת מהם תהיה פעולה משלה, אלו יהיו תחומות בתוך קומפננט אב, האב בתוך הסבא, הסבא בתוך הסבא-רבא, עד שמגיעים למקור ליבה של האפליקציה - הקומפוננטה הראשית שהתחילה את הכל, לרוב תקרא Index או App.

ולמה זה כל כך טוב? אני יכול לחשוב על  לפחות 2 סיבות:

1. אם יש לכם תקלה באיזשהי קומפוננטה, קל מאוד להגיע לתקלה ולתקן את הבעיה. אתם לא צריכים לעבור על אלפי שורות של קוד, על מנת להגיע לתקלה שצצה, אלא מספיק לעבודר על אותה קומפוננטה אחת אשר אחראית לתקלה הספיציפית שנוצרה. ככה תוכלו לעבור על קובץ של קומפוננטה שאולי כולל סה"כ 100 שורות של ולפתור בזריזות את התקלה.
2. קל להעביר קומפוננטות מסויימות שיצרתם, למערכות אחרות שאתם מפתחים - או אפילו לשתף את הקומפוננטות עם שאר המפתחים בעולם של React. כמו שאתם תוכלו לשתמש בקומפוננטות שאחרים יצרו, כך גם הם יוכלו להשתמש בקומפונטטות שלכם. עולם מושלם, לא?

לסיכום

זהו לא פוסט הדרכה בReact, אלא אינטרו מצומצם, על מה ולמה.

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

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

לינקים:
הדוקומינצטיה של React
מדריך וידיאו מאוד מומלץ ללמידת הבסיס של React

בקרוב אפרסם פוסט הכולל בתוכו את הדרך הנכונה ללמוד React, Redux ושאר הטכנלוגיות הקשורות.