כיצד ליצור אפליקציית React עם Vite: מדריך שלב אחר שלב

יצירת אפליקציית React הפכה לקלה ומהירה עוד יותר הודות ל-Vite, כלי מודרני לבניית חזיתות שהוצג על ידי יוצר Vue.js, Evan You, בשנת 2020. Vite מוכר בזכות המהירות והיעילות שלו, מה שהופך אותו לחלופה מצוינת ליצירת אפליקציית React (CRA) על ידי הפחתה משמעותית של הזמן הדרוש להפעלת שרתי פיתוח ויישום עדכוני קוד. במדריך זה, נעבור על כל שלב כדי לעזור לכם להגדיר אפליקציית React באמצעות Vite, החל מהכנת הסביבה ועד להשקת הפרויקט הראשון שלכם.

 

למה להשתמש ב-Vite לפיתוח React?

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

מה זה ויט?

Vite, שפותח על ידי Evan You (יוצר Vue.js), הוא כלי בנייה מודרני שנועד לייעל את פיתוח הקצה הקדמי. השם "Vite" נגזר מהמילה הצרפתית שמשמעותה "מהיר", דבר התואם את מטרתו העיקרית להאיץ את תהליך הפיתוח והבנייה. Vite ממנף מודולי ES מקוריים בדפדפן במהלך הפיתוח, מה שמאפשר בניות מהירות יותר וזמני רענון מהירים יותר בהשוואה לתוכנות חבילות מסורתיות. יעילות זו הופכת את Vite לבחירה מצוינת עבור מפתחים המעוניינים לייעל את חוויית הפיתוח במסגרות JavaScript כמו React.

 

דרישות מוקדמות להגדרת Vite

לפני התקנת Vite, ודא שהמערכת שלך עומדת בדרישות הבאות. דרישות מוקדמות אלו חיוניות להתקנה ופיתוח חלקים.

 

Node.js ו-npm

Vite תלוי ב-Node.js וב-npm (Node Package Manager) להתקנת חבילות והפעלת סקריפטים של פיתוח. כדי להשתמש ב-Vite, תזדקק ל-Node.js גרסה 18.x ואילך וגרסת npm תואמת. כך תבדוק אם הגרסאות הנכונות מותקנות אצלך:

בדוק את גרסת Node.js

פתח את הטרמינל שלך והקלד את הפקודה הבאה:
לַחֲבוֹט
צומת -v

פקודה זו מחזירה את הגרסה המותקנת של Node.js, אשר צריכה להיות 18.x ומעלה.

בדוק את גרסת npm

לאחר מכן, בדוק את גרסת ה-npm על ידי הפעלת:
לַחֲבוֹט
npm -v

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

אם Node.js ו-npm אינם מותקנים, או אם עליך לעדכן אותם, תוכל להתקין או לשדרג אותם דרך מאגר NodeSource (עבור לינוקס) או על ידי הורדת המתקין ישירות מהאתר הרשמי.

 

ידע בסיסי בשורת הפקודה

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

• ניווט בין ספריותפקודות כמו CD כדי לשנות ספריות ו לס כדי לרשום קבצים.
• הפעלת פקודותתצטרך להריץ פקודות npm כמו התקנת npm ו מפתח הפעלה של npm.

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

 

עורך קוד

מומלץ מאוד להשתמש בעורך קוד, כגון Visual Studio Code (VS Code), לניהול ועריכה של קבצי הפרויקט שלך. VS Code מספק מספר תכונות שימושיות:

• הדגשת תחביר: עוזר להפוך את הקוד שלך לקריא יותר.
• מסוף משולבמאפשר לך להפעיל פקודות מסוף ישירות בתוך העורך.
• הרחבותל-VS Code יש הרחבות עבור JavaScript, React ו-Vite המספקות הצעות קוד, בדיקת שגיאות וכלים נוספים.

עורכים פופולריים אחרים כוללים את Sublime Text, Atom ו-WebStorm, אך VS Code מתאים במיוחד לפרויקטים של JavaScript ו-React. ניתן להוריד אותו מאתר האינטרנט של VS Code.

 

הגדרת Vite עבור פרויקט React שלך: דרישות מוקדמות והכנה

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

 

שלב 1: התקנת Node.js ו-npm (אם לא מותקנים)

כדי להשתמש ב-Vite, תזדקק ל-Node.js גרסה 18.x ואילך יחד עם npm. אם Node.js כבר מותקן אצלך אך הוא מיושן, בצע את השלבים הבאים כדי להסיר את הגרסה הישנה ולהתקין את הגרסה העדכנית ביותר.

הסרת גרסאות Node.js קיימות (אופציונלי)

אם גרסה מיושנת של Node.js או npm כבר מותקנת, הסר אותה כדי למנוע בעיות תאימות.
לַחֲבוֹט
sudo apt להסיר nodejs npm

הסרה אוטומטית של sudo apt

שלב זה מנקה את כל ההתקנות הישנות של Node.js או npm, ומבטיח התקנה נקייה עבור Vite.

הוסף את מאגר NodeSource

מאגר זה מספק את הגרסאות העדכניות ביותר של Node.js ו-npm להתקנה.
לַחֲבוֹט
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash –

התקנת Node.js ו-npm

לַחֲבוֹט
sudo apt install -y nodejs npm

פעולה זו מתקינה את הגרסה הנוכחית של Node.js (18.x) ו-npm, מה שמבטיח תאימות עם Vite.

אימות התקנה

לאחר ההתקנה, ודאו שגם Node.js וגם npm מותקנים כהלכה על ידי הפעלת:
לַחֲבוֹט
צומת -v

npm -v

אתה אמור לראות מספרי גרסה המאשרים ש-Node.js ו-npm מוכנים לשימוש.

 

שלב 2: התקנת Vite ברחבי העולם

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

הפעל את פקודת ההתקנה הגלובלית

לַחֲבוֹט
sudo npm install -g create-vite

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

 

שלב 3: צור פרויקט React חדש עם Vite

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

הפעל את הפקודה Vite Create

לַחֲבוֹט
npm צור vite@האפליקציה האחרונה שלי

לְהַחלִיף האפליקציה שלי עם שם הפרויקט הרצוי. פקודה זו מאתחלת פרויקט Vite, ו-Vite ידריך אותך דרך מספר הנחיות התקנה.

פעל לפי הנחיות ההתקנה:

• שם הפרויקטבחר שם לספריית הפרויקט שלך (למשל, "my-app").
• בחירת מסגרתבחר "React" מרשימת המסגרות.
• גִרְסָה אַחֶרֶתבחר בין JavaScript ל-TypeScript בהתאם להעדפתך.

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

 

שלב 4: נווט לתיקיית הפרויקט שלך

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

שינוי בספריית הפרויקטים

לַחֲבוֹט
cd האפליקציה שלי

פקודה זו מעבירה את ספריית העבודה שלך ל האפליקציה שלי, מה שמקל על ניהול ועבודה בתוך קבצי הפרויקט של Vite.

 

שלב 5: התקנת תלויות פרויקט

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

הפעל את פקודת ההתקנה

לַחֲבוֹט
התקנת npm

פקודה זו מורידה ומתקינה את כל התלויות שצוינו ב- package.json קובץ. תלויות אלו מפעילות את רכיבי React, את פונקציונליות Vite וכל כלי או ספרייה נוספים המשמשים בפרויקט שלך.

 

שלב 6: הפעל את שרת הפיתוח

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

הפעל את שרת הפיתוח

לַחֲבוֹט
מפתח הפעלה של npm

פקודה זו מפעילה את שרת הפיתוח, ו-Vite יציג כתובת URL מקומית שבה האפליקציה שלך נגישה. כברירת מחדל, כתובת URL זו היא:
ארדואינו
http://localhost:5173/

ייתכן שתראה גם אפשרויות רשת ומידע נוסף, בהתאם לגרסת ה-Vite שלך.

 

שלב 7: צפה באפליקציית React שלך בדפדפן

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

פתח את כתובת ה-URL המקומית בדפדפן שלך:

• פתח את דפדפן האינטרנט המועדף עליך.
• נווט לכתובת ה-URL המוצגת בטרמינל, בדרך כלל http://localhost:5173/.

אפליקציית React החדשה שלך אמורה להיטען בדפדפן. כל שינוי שתעשה בעורך הקוד שלך יתעדכן אוטומטית בדפדפן, הודות לתכונת החלפת המודולים החמים (HMR) של Vite, המאפשרת עדכונים מהירים מבלי שיהיה צורך לטעון מחדש את כל הדף.

 

סקירת מבנה פרויקט Vite

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

 

index.html

• קובץ זה הוא קובץ ה-HTML הראשי עבור האפליקציה שלך. הוא משמש כנקודת כניסה עבור הדפדפן לטעינת אפליקציית React.
• Vite מזריק כאן את מודולי ה-JavaScript, כך שלאפליקציה שלך תהיה גישה לסקריפטים ולנכסים הדרושים.
• שלא כמו מערכות מסורתיות, של Vite index.html ממוקם בשורש הפרויקט, מה שמפשט את טעינת המודולים ושומר על ניקיון ההתקנה.

 

src/main.jsx

• זוהי נקודת הכניסה עבור אפליקציית React שלך, שם האפליקציה מאותחלת.
• בתוך קובץ זה, תמצאו קוד שמציג את עץ הרכיבים של React ל-DOM, בדרך כלל מקשר את האפליקציה שלכם לקובץ root. דיו ב index.html.
• זהו קובץ ה-JavaScript הראשון שעובר תהליך וחבילות של Vite, מה שהופך אותו לחיוני למבנה ולרצף הטעינה של האפליקציה שלך.

 

src/App.jsx

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

 

vite.config.js

• קובץ התצורה עבור Vite, הממוקם בקובץ השורש של הפרויקט.
• קובץ זה מאפשר לך להתאים אישית את ההתנהגות וההגדרות של Vite, כגון הגדרת אפשרויות בנייה, הוספת תוספים או הגדרת תצורות פרוקסי.
• בעוד ש-Vite נועד לעבוד ללא תצורה כבדה, vite.config.js נותן לך גמישות להתאים הגדרות ככל שהפרויקט שלך גדל.

 

קבצים וספריות נוספים

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

• פּוּמְבֵּי/תיקייה לאחסון נכסים סטטיים כמו תמונות, גופנים או אייקונים. קבצים אלה מוגשים ישירות ללא צורך בייבוא מיוחד.
• מקור/: התיקייה הראשית עבור כל קוד המקור של האפליקציות. יחד עם main.jsx ו אפליקציה.jsx, תיקייה זו מכילה רכיבי React אחרים, פונקציות עזר או ספקי הקשר ככל שהאפליקציה שלך מתרחבת.

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

 

יתרונות השימוש ב-Vite על פני אפליקציית Create React

מעבר מ-Create React App (CRA) ל-Vite יכול להביא מספר יתרונות בביצועים ובפרודוקטיביות. Vite בנוי למהירות ויעילות, ומעניק למפתחים חוויית פיתוח רספונסיבית יותר. הנה מבט מעמיק יותר על היתרונות של שימוש ב-Vite על פני CRA:

 

בניות מהירות יותר

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

• חבילת מודולים מראשVite מבצע חבילות מראש של תלויות באמצעות esbuild, חבילת נתונים מהירה המותאמת ל-JavaScript. חבילת נתונים מוקדמת זו מאיץ את זמן הטעינה הראשוני על ידי ארגון וקיבוץ תלויות בצורה יעילה יותר.
• תחביר מודול ESVite משתמש בייבוא מודולי ES בדפדפן במהלך הפיתוח, כך שרק הקבצים הנדרשים לתצוגה הנוכחית נטענים. הגדרה זו עוקפת את הצורך לאגד את כל האפליקציה בכל שינוי, וכתוצאה מכך זמני התחלה מהירים יותר.
• טעינה עצלה לפיתוחVite טוען מודולים רק כאשר הם נדרשים, מה שממזער את עומס העבודה על שרת הפיתוח שלך ומוביל לטעינות מחדש מהירות יותר. בניגוד ל-CRA, Vite אינו מבצע קומפילציה מחדש של כל בסיס הקוד לאחר כל שינוי, מה שמקצר את זמן ההמתנה.

אופטימיזציות אלו הופכות את Vite לבחירה מצוינת עבור פרויקטים שבהם לולאות משוב מהירות ומהירויות בנייה הן חיוניות.

 

החלפת מודול חם יעילה (HMR)

החלפת מודולים חמים (HMR) היא תכונה שמעדכנת מודולים בזמן אמת בזמן עריכתם, מבלי שיהיה צורך לטעון מחדש את הדף במלואו. מערכת ה-HMR של Vite יעילה יותר מזו של CRA, מה שמביא מספר יתרונות:

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

עם HMR של Vite, הפיתוח יעיל יותר מכיוון ששינויים משתקפים באופן מיידי, מה שמשפר את חוויית הקידוד.

 

חוויית פיתוח קלת משקל

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

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

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

 

שתפו פעולה עם Mobian לבניית פתרון אפליקציית מובייל מותאמת אישית

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

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

לְהִתְקַשֵׁר עם Mobian כדי לדון בפרויקט שלכם ולבחון כיצד נוכל להפוך את רעיון האפליקציה שלכם למציאות. יחד נוכל לבנות אפליקציה שתכין את העסק שלכם לעתיד.

צרו את העתיד יחד עם Mobian - מפתח אפליקציות המובייל המהימן שלכם.

 

מַסְקָנָה

על ידי ביצוע מדריך זה, הגדרת כעת סביבת Vite עבור פרויקט React שלך. תהליך הבנייה הקל והמהיר של Vite והחלפת המודולים החמים (HMR) הופכים אותו לבחירה מצוינת לפיתוח React מודרני, ומציע חוויה יעילה יותר בהשוואה לכלים מסורתיים כמו Create React App. עם הארכיטקטורה המותאמת של Vite, כעת אתה מוכן ליצור יישומים דינמיים ורספונסיביים ולהתמקד בבניית תכונות במקום להמתין לזמני בנייה. המשך לחקור את אפשרויות התצורה של Vite ותוספים נוספים כדי להתאים אישית את סביבת הפיתוח שלך עוד יותר. קידוד מהנה!