רוצים שהאתר שלכם ב-React יהיה מהיר ונגיש ככל האפשר? הגעת למקום הנכון.
React היא ספריית קוד פתוח שמאפשרת ליצור ממשקי משתמש בקלות. בתוכנית הלימודים הזו נסקור ממשקי API וכלים שונים בסביבה העסקית שכדאי להשתמש בהם כדי לשפר את הביצועים ואת נוחות השימוש באפליקציה.
במדריך הזה נסביר איך להתחיל לעבוד עם אפליקציית React. כל מדריך אחר בקטע הזה יעסוק בנושאים שקשורים לאופטימיזציה של המהירות או הנגישות של אפליקציית React.
למה זה שימושי?
יש הרבה תוכן שמסביר איך לפתח אפליקציות מהירות ואמינות, אבל לא הרבה תוכן שמסביר איך לפתח אפליקציות React מהירות ואמינות. המדריכים האלה עוסקים בכל הנושאים האלה מנקודת המבט של אפליקציית React, שבה מוזכרות רק ספריות, ממשקי API ותכונות שספציפיים לסביבה העסקית של React.
מה תלמדו?
המדריכים בתוכנית הלימודים הזו לא מתמקדים בנושאים הבאים:
- איך משתמשים ב-React
- איך React פועל מאחורי הקלעים
למרות ששני המושגים האלה יוזכרו כשצריך, כל המדריכים ושיעורי ה-Codelab בקטע הזה יתמקדו במקום זאת באופן שבו אפשר ליצור אתרי React מהירים ונגישים. לכן, נדרש ידע בסיסי ב-React.
יצירת אפליקציית React
Create React App (CRA) היא הדרך הקלה ביותר להתחיל ליצור אפליקציות React. הוא מספק הגדרת ברירת מחדל עם מספר התכונות העיקריות מובנות, כולל מערכת build שמכילה כלי לאיסוף מודולים (webpack) וכלי טרנספילציה (Babel).
במעטפת של שורת הפקודה, צריך רק להריץ את הפקודה הבאה כדי ליצור אפליקציה חדשה:
npx create-react-app app-name
בסיום הרצת הפקודה, אפשר לעבור לאפליקציה ולהריץ אותה באמצעות הפקודות הבאות:
cd new-app
npm start
ההטמעה הבאה מציגה את מבנה הספרייה ואת דף האינטרנט בפועל של אפליקציית CRA חדשה.
יש כמה קובצי תצורה וסקריפטים של build שמשמשים את CRA כדי להגדיר תהליך build של webpack ו-Babel, שכולל הגדרה בסיסית של Jest לבדיקה. כדי לפשט את הדברים למשתמש, הקבצים האלה מוסתרים ואי אפשר לגשת אליהם עד שמוציאים אותם מ-CRA. תמיד עדיף להימנע מהוצאה, כי זה אומר שכל קובצי התצורה האלה הופכים לקוד המקור שלכם, וזה יכול להיות קשה לניהול.
מבנה הספרייה של אפליקציית CRA חדשה מכיל רק את הקבצים שצריך לשנות כדי לעבוד על האפליקציה. ההסבר המפורט מופיע במסמכי התיעוד של CRA.
מה השלב הבא?
עכשיו, אחרי שלמדתם איך להתחיל ליצור אפליקציית React, אתם יכולים ללמוד איך לשפר את הביצועים ואת הנגישות של האפליקציה בעזרת כל המדריכים בתוכנית הלימודים הזו: