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

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

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

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

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

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

מה תלמדו?

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

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

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

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

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

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

npx create-react-app app-name

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

cd new-app
npm start

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

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

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

מה השלב הבא?

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