jQuery ו-React הן ספריות JavaScript פופולריות לפיתוח חזיתי. בעוד jQuery היא ספריית מניפולציה של DOM, React היא ספריית JavaScript לבניית ממשקי משתמש.

גלה כיצד להעביר אפליקציה קיימת מ-jQuery ל-React.

jQuery לעומת לְהָגִיב?

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

למה לעבור מ-jQuery ל-React?

ישנן מספר סיבות שבגללן אולי תרצה להעביר את האפליקציה שלך מ-jQuery ל-React.

  • React מהיר יותר מ-jQuery: אם אנחנו מדברים על ביצועים גולמיים, React מהיר יותר מ-jQuery. הסיבה לכך היא ש-React משתמש ב-DOM וירטואלי, שהוא ייצוג JavaScript של ה-DOM בפועל. המשמעות היא שכאשר משתמש מקיים אינטראקציה עם אפליקציית React, רק החלקים של ה-DOM שישתנו יתעדכנו. זה יעיל יותר ממניפולציית ה-DOM המלאה של jQuery.
  • React ניתנת לתחזוקה יותר: סיבה נוספת לעבור ל-React היא שהוא ניתן לתחזוקה יותר מאשר jQuery. הסיבה לכך היא שרכיבי React הם עצמאיים כך שתוכל לעשות בהם שימוש חוזר בקלות. זה אומר שאם אתה צריך לבצע שינוי ברכיב React, אתה יכול לעשות זאת מבלי להשפיע על שאר בסיס הקוד.
    instagram viewer
  • React ניתן להרחבה יותר: לבסוף, React ניתן להרחבה יותר מ-jQuery. הוא משתמש בארכיטקטורה מבוססת רכיבים, שהיא ניתנת להרחבה יותר מהגישה המונוליטית של jQuery. זה אומר שאתה יכול בקלות להרחיב ולשנות יישום React לפי הצורך.
  • ל-React יש תמיכה טובה יותר לבדיקת יחידות: כשזה מגיע לבדיקת יחידות, ל-React יש תמיכה טובה יותר מ-jQuery. מכיוון שאתה יכול לבודד בקלות את רכיבי React, קל יותר לכתוב עבורם בדיקות יחידה.

כיצד להעביר את האפליקציה שלך מ-jQuery ל-React

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

דרישות מוקדמות

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

לאחר התקנת התלות הללו, עליך ליצור קובץ בשם index.js אצלך src מַדרִיך. קובץ זה יהיה נקודת הכניסה לאפליקציית React שלך.

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

1. טיפול באירועים

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

$("button").click(פוּנקצִיָה() {
// עשה משהו
});

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

מעמדלַחְצָןמשתרעלְהָגִיב.רְכִיב{
 handleClick() {
// עשה משהו
 }
 render() {
לַחֲזוֹר (
<button onClick={this.handleClick}>
 לחץ עלי!
</button>
 );
 }
}

כאן, הרכיב Button מכיל את ההגדרה של שיטת handleClick()‎. כאשר מישהו לוחץ על הכפתור, השיטה הזו תפעל.

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

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

2. אפקטים

ב-jQuery, תוכל להשתמש בשיטות .show() או .hide() כדי להציג או להסתיר אלמנט. לדוגמה:

$("#אֵלֵמֶנט").הופעה();

ב-React, אתה יכול להשתמש בהוק useState() כדי לנהל מצב. לדוגמה, אם ברצונך להציג או להסתיר אלמנט, תגדיר את המצב ברכיב:

יְבוּא { useState } מ "לְהָגִיב";
פוּנקצִיָהרְכִיב() {
const [isShown, setIsShown] = useState(שֶׁקֶר);
לַחֲזוֹר (
<div>
 {מוצג &&<div>שלום!</div>}
<לחצן onClick={() => setIsShown(!isShown)}>
 לְמַתֵג
</button>
</div>
 );
}

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

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

3. אחזור נתונים

ב-jQuery, אתה יכול להשתמש בשיטת $.ajax() כדי להביא נתונים. לדוגמה, אם אתה רוצה להביא כמה נתוני JSON, אתה יכול לעשות זאת כך:

$.ajax({
 כתובת אתר: "https://example.com/data.json",
 סוג מידע: "json",
 הַצלָחָה: פוּנקצִיָה(נתונים) {
 // לַעֲשׂוֹת משהו עם ה נתונים
 }
});

ב-React, אתה יכול להשתמש בשיטת fetch() כדי להביא נתונים. כך תוכל להביא נתוני JSON בשיטה זו:

לְהָבִיא("https://example.com/data.json")
 .then (תגובה => response.json())
 .then (נתונים => {
 // לַעֲשׂוֹת משהו עם ה נתונים
 });

ב-jQuery, שיטת $.ajax() קלה לשימוש. עם זאת, יכול להיות קשה לטפל בשגיאות. ב-React, שיטת fetch() היא יותר מילולית, אבל קל יותר לטפל בשגיאות.

4. CSS

ב-jQuery, אתה יכול לציין CSS לפי עמוד. לדוגמה, אם ברצונך לעצב את כל הכפתורים בדף, תוכל לעשות זאת על ידי מיקוד לרכיב הכפתור:

כפתור {
 צבע רקע: אדום;
 צבע לבן;
}

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

<button style={{backgroundColor: 'אָדוֹם', צבע: 'לבן'}}>
 לחץ עלי!
</button>

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

יְבוּא מְנוּסָח מ 'רכיבי-סגנון';
const כפתור = styled.button`
 צבע רקע: אדום;
 צבע לבן;
`;

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

פרוס בקלות את אפליקציית React שלך

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

אתה יכול גם לארח את אפליקציית React שלך בחינם בדפי GitHub.