إضافة React إلى مشروع موجود

إذا كنت ترغب في إضافة بعض التفاعلية إلى مشروعك الحالي، ليس عليك إعادة كتابته باستخدام React. أضف React إلى مكدسك الحالي، وعرض مكونات React التفاعلية في أي مكان.

استخدام React لمسار فرعي كامل من موقعك الإلكتروني الحالي

لنفترض أن لديك تطبيق ويب موجود علىexample.comمبني بتقنية خادم أخرى (مثل Rails)، وتريد تنفيذ جميع المسارات التي تبدأ بـexample.com/some-app/بالكامل باستخدام React.

إليك الطريقة التي نوصي بإعدادها:

1. قم ببناء الجزء الخاص بـ React من تطبيقكباستخدام أحدأطر العمل القائمة على React.
2. حدد/some-app كـ المسار الأساسيفي تكوين إطار العمل الخاص بك (إليك الطريقة:Next.js،Gatsby).
3. قم بتكوين خادمك أو وكيلكبحيث تتم معالجة جميع الطلبات تحت/some-app/بواسطة تطبيق React الخاص بك.

يضمن هذا أن الجزء الخاص بـ React من تطبيقك يمكنهالاستفادة من أفضل الممارساتالمضمنة في تلك الأطر.

العديد من أطر العمل القائمة على React هي كاملة المكدس وتسمح لتطبيق React الخاص بك بالاستفادة من الخادم. ومع ذلك، يمكنك استخدام نفس النهج حتى إذا لم تتمكن أو لا ترغب في تشغيل JavaScript على الخادم. في هذه الحالة، قم بتقديم تصدير HTML/CSS/JS (مخرجات next exportلـ Next.js، الافتراضي لـ Gatsby) على/some-app/بدلاً من ذلك.

استخدام React لجزء من صفحتك الحالية

لنفترض أن لديك صفحة موجودة مبنية بتقنية أخرى (سواء كانت تقنية خادم مثل Rails، أو تقنية عميل مثل Backbone)، وتريد عرض مكونات React تفاعلية في مكان ما على تلك الصفحة. هذه طريقة شائعة لدمج React—في الواقع، هكذا بدا معظم استخدام React في Meta لسنوات عديدة!

يمكنك القيام بذلك في خطوتين:

1. قم بإعداد بيئة JavaScriptتتيح لك استخدامبناء جملة JSX، وتقسيم الكود الخاص بك إلى وحدات باستخدام بناء جملةimport/export، واستخدام الحزم (على سبيل المثال، React) من سجل الحزمnpm.
2. اعرض مكونات React الخاصة بكحيث تريد رؤيتها على الصفحة.

تعتمد الطريقة الدقيقة على إعداد صفحتك الحالية، لذا دعنا نستعرض بعض التفاصيل.

الخطوة 1: إعداد بيئة JavaScript معيارية

تتيح لك بيئة JavaScript المعيارية كتابة مكونات React الخاصة بك في ملفات فردية، بدلاً من كتابة كل الكود الخاص بك في ملف واحد. كما تتيح لك استخدام جميع الحزم الرائعة التي ينشرها المطورون الآخرون على سجل الحزمnpm—بما في ذلك React نفسه! كيفية القيام بذلك تعتمد على إعدادك الحالي:

• إذا كان تطبيقك مقسمًا بالفعل إلى ملفات تستخدم عباراتimport،حاول استخدام الإعداد الذي لديك بالفعل. تحقق مما إذا كان كتابة<div />في كود JavaScript الخاص بك يسبب خطأ في بناء الجملة. إذا تسبب في خطأ في بناء الجملة، فقد تحتاج إلىتحويل كود JavaScript الخاص بك باستخدام Babel، وتمكينإعداد Babel المسبق لـ Reactلاستخدام JSX.
• إذا لم يكن لتطبيقك إعداد موجود لتجميع وحدات JavaScript،قم بإعداده باستخدامVite. تحافظ مجتمع Vite علىالعديد من التكاملات مع أطر عمل الخلفية، بما في ذلك Rails و Django و Laravel. إذا لم يكن إطار عمل الخلفية الخاص بك مدرجًا،اتبع هذا الدليللدمج بناءات Vite يدويًا مع خلفيتك.

للتحقق مما إذا كان إعدادك يعمل، قم بتشغيل هذا الأمر في مجلد مشروعك:

npm install react react-dom

ثم أضف هذه الأسطر من الكود في أعلى ملف JavaScript الرئيسي الخاص بك (قد يُسمىindex.jsأوmain.js):

إذا تم استبدال المحتوى الكامل لصفحتك بـ "Hello, world!"، فقد نجح كل شيء! تابع القراءة.

الخطوة 2: عرض مكونات React في أي مكان على الصفحة

في الخطوة السابقة، وضعت هذا الكود في أعلى ملفك الرئيسي:

بالطبع، أنت لا تريد فعليًا مسح محتوى HTML الموجود!

احذف هذا الكود.

بدلاً من ذلك، ربما تريد عرض مكونات React الخاصة بك في أماكن محددة في HTML الخاص بك. افتح صفحة HTML الخاصة بك (أو قوالب الخادم التي تولدها) وأضف سمةidفريدة إلى أي علامة، على سبيل المثال:

يتيح لك هذا العثور على عنصر HTML هذا باستخدامdocument.getElementByIdوتمريره إلىcreateRootبحيث يمكنك عرض مكون React الخاص بك بداخله:

لاحظ كيف تم الحفاظ على محتوى HTML الأصلي منindex.html، لكن مكون React الخاص بكNavigationBarيظهر الآن داخل<nav id="navigation">من HTML الخاص بك. اقرأوثائق استخدام createRootلمعرفة المزيد حول عرض مكونات React داخل صفحة HTML موجودة.

عند اعتماد React في مشروع موجود، من الشائع البدء بمكونات تفاعلية صغيرة (مثل الأزرار)، ثم الاستمرار في "التحرك لأعلى" تدريجيًا حتى يتم بناء صفحتك بالكامل باستخدام React في النهاية. إذا وصلت إلى هذه النقطة، نوصي بالانتقال إلىإطار عمل Reactمباشرة بعد ذلك للاستفادة القصوى من React.

استخدام React Native في تطبيق جوال أصلي موجود

React Nativeيمكن أيضًا دمجه في التطبيقات الأصلية الموجودة بشكل تدريجي. إذا كان لديك تطبيق أصلي موجود لنظام Android (Java أو Kotlin) أو iOS (Objective-C أو Swift)،اتبع هذا الدليللإضافة شاشة React Native إليه.