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

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

חוסיין ג'ירד

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

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

למה זה שימושי?

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

מה נלמד?

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

  • איך משתמשים ב-React
  • איך React פועל מאחורי הקלעים

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

יצירת אפליקציית תגובה

יצירת אפליקציית תגובה (CRA) היא הדרך הקלה ביותר להתחיל ליצור אפליקציות ל-React. היא כוללת הגדרת ברירת מחדל שכוללת כמה תכונות ליבה מוטמעות בהן, כולל מערכת build שכוללת Bundler של מודול (Webpack) וטרנספילר (Babel).

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

npx create-react-app app-name

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

cd new-app
npm start

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

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

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

מה השלב הבא?

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