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

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

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

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

למה המידע הזה מועיל?

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

מה תלמדו?

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

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

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

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

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

במעטפת שורת הפקודה צריך רק להריץ את הפקודה הבאה כדי ליצור אפליקציה חדשה:

npx create-react-app app-name

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

cd new-app
npm start

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

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

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

מה השלב הבא?

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