מה זה ריאקט - React ?

תמלול ההרצאה: מה זה ריאקט - React ?

הטקסט המלא של הדקות הראשונות בהרצאה «מה זה ריאקט - React ?» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   מה זה React? React זה ספרייה שהינה Open Source לבניית אפליקציות מבוססות קפוננטים ב-JavaScript או ב-TypeScript. נוצרה על ידי פייסבוק ב-2013 וכאשר אנחנו עובדים עם React אז פרויקט React משתמש ב-HTML, ב-CSS וב-JavaScript או ב-HTML,

2. 00:31

   CSS ו-TypeScript. לא עובדים גם Javascript, גם TypeScript או זה או זה. בקורס הזה אנחנו נעבוד TypeScript, העתיד עובר לקראת TypeScript ולכן נכון יותר לבנות פרויקט React בטייפסקריפט היום ולא בג'אבאסקריפט וזה גם מה שהולך להיות בעתיד, זה הכיוון של התעשייה.

3. 00:54

   React משתמש במשהו שנקרא Virtual DOM, תכף אנחנו נבין מה זה, בכדי לבצע אופטימיזציה לבראוזר. האתר הרשמי של ריאקט זה reactjs.org אז בואו נבין מה זה בעצם virtual DOM, מה זה בעצם DOM אז אם אנחנו יודעים JavaScript אנחנו יודעים שיש משהו שנקרא DOM Document Object Model זה בעצם עץ אובייקטים שהדפדפן יוצר מהתגיות

4. 01:23

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

5. 01:46

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

6. 01:55

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

7. 02:20

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

8. 02:38

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

9. 02:52

   מה קורה כאשר אנחנו עובדים עם React? יש לנו את ה-real dome של הדפדפן, עץ האובייקטים שהדפדפן יוצר, אבל ריאקט עושה בעצם איזשהו קופי של הדום האמיתי וקוראת לזה וירצ'ואל דום.

10. 03:08

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

11. 03:28

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