איך מתחילים: מבצעים אופטימיזציה של אפליקציית React

רוצים להפוך את האתר שלכם ב-React למהיר ונגיש ככל האפשר? הגעת למקום הנכון.

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

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

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

מה תלמדו

המדריכים במסלול הלמידה הזה לא מתמקדים בנושאים הבאים:

  • איך משתמשים ב-React
  • איך פועלת React בפנים

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

Create React App

Create React App‏ (CRA) היא הדרך הקלה ביותר להתחיל לפתח אפליקציות React. הוא מספק הגדרת ברירת מחדל עם מספר תכונות ליבה מובנות, כולל מערכת build שמכילה חבילה של מודולים (webpack) ו-transpiler (Babel).

כדי ליצור אפליקציה חדשה, צריך להריץ את הפקודה הבאה במסוף שורת הפקודה:

npx create-react-app app-name

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

cd new-app
npm start

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

יש כמה קובצי תצורה וסקריפטים ל-build שבהם CRA משתמש כדי להגדיר תהליך build של webpack ו-Babel שכולל הגדרה בסיסית של Jest לבדיקה. כדי לפשט את התהליך למשתמש, הקבצים האלה מוסתרים ואי אפשר לגשת אליהם עד שמוציאים את ה-CRA. מומלץ להימנע מהוצאה של כונן USB ככל האפשר, כי המשמעות היא שתצטרכו לנהל את כל קובצי התצורה האלה כקוד המקור שלכם, ויכול להיות שיהיה קשה לנהל אותם.

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

מה השלב הבא?

עכשיו, אחרי שלמדתם איך מתחילים ליצור אפליקציה ב-Create React App, תוכלו להיעזר בכל המדריכים במסלול הלמידה הזה כדי לשפר את הביצועים והנגישות של האפליקציה: