يعد كل من 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 ، فيمكنك القيام بذلك دون التأثير على بقية قاعدة الكود.
- React أكثر قابلية للتوسع: أخيرًا ، تعد React أكثر قابلية للتوسع من jQuery. يستخدم بنية قائمة على المكونات ، والتي تكون أكثر قابلية للتوسع من نهج jQuery الأحادي. هذا يعني أنه يمكنك بسهولة توسيع تطبيق React وتعديله حسب الضرورة.
- تتمتع React بدعم أفضل لاختبار الوحدة: عندما يتعلق الأمر باختبار الوحدة ، فإن React تتمتع بدعم أفضل من jQuery. نظرًا لأنه يمكنك بسهولة عزل مكونات React ، فمن الأسهل كتابة اختبارات الوحدة لها.
كيف تنقل تطبيقك من jQuery إلى React
إذا كنت تخطط لترحيل تطبيقك من jQuery إلى React ، فهناك بعض الأشياء التي تحتاج إلى وضعها في الاعتبار. من المهم أن تعرف ما تحتاجه للبدء وأن تحصل على فكرة جيدة عن كيفية ترحيل أجزاء فردية من تطبيقك.
المتطلبات الأساسية
قبل أن تبدأ عملية الترحيل ، هناك بعض الأشياء التي تحتاج إلى القيام بها لإعداد الأشياء. أولا ، أنت بحاجة إلى إنشاء تطبيق React باستخدام تطبيق create-react-app.
بعد تثبيت هذه التبعيات ، تحتاج إلى إنشاء ملف يسمى index.js في الخاص بك src الدليل. سيكون هذا الملف هو نقطة الدخول لتطبيق React الخاص بك.
أخيرًا ، يمكنك الانتقال إلى أجزاء فردية من قاعدة التعليمات البرمجية الخاصة بك وتحديثها وفقًا لذلك.
1. معالجة الأحداث
في jQuery ، يمكنك إرفاق أحداث بالعناصر. على سبيل المثال ، إذا كان لديك زر ، فيمكنك إرفاق حدث نقرة به. عندما ينقر شخص ما على الزر ، سيتم تشغيل معالج الأحداث.
$ ("زر"). انقر (وظيفة() {
// قم بعمل ما
});تتعامل React مع الأحداث بشكل مختلف. بدلاً من إرفاق الأحداث بالعناصر ، يمكنك تحديدها في المكونات. على سبيل المثال ، إذا كان لديك زر ، فيمكنك تحديد حدث النقر في المكون:
فصلزريمتدتتفاعل.عنصر{
handleClick () {
// قم بعمل ما
}
يجعل() {
يعود (
<زر onClick = {this.handleClick}>
انقر فوق لي!
</button>
);
}
}هنا ، يحتوي مكون الزر على تعريف طريقة handleClick (). عندما ينقر شخص ما على الزر ، سيتم تشغيل هذه الطريقة.
كل طريقة لها مزاياها وعيوبها. في jQuery ، من السهل إرفاق الأحداث وإزالتها. ومع ذلك ، قد يكون من الصعب تتبعها إذا كان لديك الكثير من الأحداث. في React ، تقوم بتعريف الأحداث في المكونات ، مما يسهل تتبعها. لكن ليس من السهل إرفاقها وإزالتها.
إذا كنت تستخدم React ، فستحتاج إلى تحديث التعليمات البرمجية الخاصة بك لاستخدام طريقة معالجة الحدث الجديدة. لكل حدث تريد التعامل معه ، ستحتاج إلى تحديد طريقة في المكون. سيتم تشغيل هذه الطريقة عند بدء الحدث.
2. تأثيرات
في jQuery ، يمكنك استخدام التابعين .show () أو .hide () لإظهار عنصر أو إخفائه. على سبيل المثال:
$("#عنصر").يعرض()؛في React ، يمكنك استخدام الخطاف useState () لإدارة الحالة. على سبيل المثال ، إذا كنت تريد إظهار عنصر أو إخفائه ، يمكنك تحديد الحالة في المكون:
يستورد {useState} من "تتفاعل"؛
وظيفةعنصر() {
مقدار ثابت [isShown، setIsShown] = useState (خطأ شنيع);
يعود (
<شعبة>
{معروض &&<شعبة>مرحبًا!</div>}
<زر onClick = {() => setIsShown (! isShown)}>
تبديل
</button>
</div>
);
}يعرّف هذا الرمز متغير حالة isShown ووظيفة setIsShown (). رد فعل أنواع مختلفة من الخطافات التي يمكنك استخدامها في تطبيقك ، ومن بينها useState. عندما ينقر المستخدم على الزر ، يتم تحديث متغير حالة isShown ويتم عرض العنصر فقط عندما يكون ذلك مناسبًا.
في jQuery ، تكون التأثيرات سهلة الاستخدام وتعمل بشكل جيد. ومع ذلك ، قد يكون من الصعب إدارتها إذا كان لديك الكثير منها. في React ، تعيش التأثيرات داخل المكونات مما يسهل إدارتها ، إن لم تكن سهلة الاستخدام.
3. جلب البيانات
في jQuery ، يمكنك استخدام طريقة $ .ajax () لجلب البيانات. على سبيل المثال ، إذا كنت تريد جلب بعض بيانات JSON ، فيمكنك القيام بذلك على النحو التالي:
.ajax $ ({
عنوان url: "https://example.com/data.json",
نوع البيانات: "json",
نجاح: وظيفة(بيانات) {
// يفعل شئ ما مع ال بيانات
}
});في React ، يمكنك استخدام طريقة fetch () لجلب البيانات. إليك كيفية جلب بيانات JSON باستخدام هذه الطريقة:
أحضر("https://example.com/data.json")
ثم (استجابة => response.json ())
ثم (البيانات => {
// يفعل شئ ما مع ال بيانات
});
في jQuery ، طريقة $ .ajax () سهلة الاستخدام. ومع ذلك ، قد يكون من الصعب معالجة الأخطاء. في React ، تكون طريقة fetch () أكثر تفصيلاً ، ولكن من الأسهل معالجة الأخطاء.
4. CSS
في jQuery ، يمكنك تحديد CSS حسب الصفحة. على سبيل المثال ، إذا كنت تريد تصميم جميع الأزرار في الصفحة ، فيمكنك القيام بذلك عن طريق استهداف عنصر الزر:
زر {
لون الخلفية: أحمر ؛
اللون الابيض؛
}في React ، يمكنك استخدام CSS بطرق مختلفة. طريقة واحدة هي استخدام الأنماط المضمنة. على سبيل المثال ، إذا كنت تريد تصميم زر ، فيمكنك القيام بذلك عن طريق إضافة سمة النمط إلى العنصر:
<نمط الزر = {{لون الخلفية: 'أحمر'، لون: 'أبيض'}}>
انقر فوق لي!
</button>هناك طريقة أخرى لتصميم مكونات React وهي استخدام الأنماط العامة. الأنماط العامة هي قواعد CSS تحددها خارج المكون وتطبق على جميع المكونات في التطبيق. للقيام بذلك ، يمكنك استخدام مكتبة CSS-in-JS مثل مكوّنات الأنماط:
يستورد على غرار من "مكونات على غرار" ؛
مقدار ثابت زر = زر على غرار`
لون الخلفية: أحمر ؛
اللون الابيض؛
`;لا يوجد خيار صحيح أو خاطئ بين الأنماط المضمنة والأنماط العامة. انها حقا تعتمد على الاحتياجات الخاصة بك. بشكل عام ، تعتبر الأنماط المضمنة أسهل في الاستخدام للمشاريع الصغيرة. بالنسبة للمشاريع الكبيرة ، تعد الأنماط العالمية خيارًا أفضل.
انشر تطبيق React بسهولة
من أهم مزايا React أنه من السهل جدًا نشر تطبيق React الخاص بك. يمكنك نشر React على أي خادم ويب ثابت. تحتاج فقط إلى تجميع التعليمات البرمجية الخاصة بك باستخدام أداة مثل Webpack ، ثم وضع ملف bundle.js الناتج على خادم الويب الخاص بك.
يمكنك أيضًا استضافة تطبيق React مجانًا على صفحات GitHub.
