إضافة React إلى تطبيق موجود
استخدم القليل من React أو بقدر ما تحتاج إليه.
صُمِّمت React من البداية مع أخذ الاعتماد التدريجي عليها بالحسبان، لذا تستطيع الاعتماد على React الشيء البسيط أو بقدر ما تحتاج إليه. ربما أنت بحاجة إلى إضافة بعض التفاعل (interactivity) أو إضافات أخرى بسيطة (sprinkles) إلى صفحة موجودة. مكونات React هي أفضل وسيلة للقيام بذلك.
أغلبية مواقع الويب ليس تطبيقات من صفحة واحدة، ولا تحتاج إلى أن تكون كذلك. ببضعة أسطر برمجية وبدون أدوات بناء، حاول تجريب React في أجزاء صغيرة من موقعك؛ يمكنك بعدئذٍ إمَّا أن توسِّع استعمال React تدريجيًّا، أو تقتصر باستعمالها على بضعة أدوات ذكية ديناميكية (dynamic widgets).
أضف React بدقيقة واحدة
في هذا القسم، سنعلمك كيفية إضافة مكون واحد من مكونات React إلى صفحة HTML موجودة مسبقًا. يمكنك إمَّا استعمال إحدى صفحات موقعك وإمَّا إنشاء صفحة HTML جديدة للتدريب عليها.
لن تحتاج إلى أية أدوات معقدة أو تثبيت أي شيء. كل ما تحتاج إليه لإكمال هذا القسم هو اتصال بالإنترنت ودقيقة مستقطعة من وقتك.
تستطيع تنزيل المثال كاملًا (بحجم 2 كيلوبايت) ولكن الأمر عائد إليك.
الخطوة 1: أضف حاوية DOM إلى صفحة HTML
أولًا، افتح صفحة HTML التي تريد تعديلها ثم أضف وسم <div> فارغ لتحديد الجزء حيث تريد إظهار شيء فيه باستعمال React:
<!-- ... HTML محتويات صفحة ... -->
<div id="like_button_container"></div>
<!-- ... HTML محتويات صفحة ... -->
أعطينا الوسم <div> معرِّفًا فريدًا عبر الخاصية id. سيسمح لنا هذا بالعثور عليه بسهولة عبر شيفرة JavaScript لاحقًا وإضافة مكون React داخله.
نصيحة: تستطيع وضع الحاوية <div> في أي مكان ضمن الوسم <body>، إذ يمكنك استعمال عدد غير محدود من حاويات DOM المستقلة في صفحة واحدة. ستكون هذه الحاويات فارغةً عادةً، لأن React ستستبدل أي محتوى موجود داخل حاويات DOM.
الخطوة 2: إضافة الوسوم <script>
ثانيًا، أضف ثلاثة وسوم <script> إلى صفحة HTML قبل وسم الإغلاق </body> بالشكل التالي:
<!-- ... HTML محتوى ... -->
<!-- React تحميل -->
<!-- "development.js" مكان "production.min.js" ملاحظة: عند النشر، بدل -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- الخاص بنا React تحميل مكون. -->
<script src="like_button.js"></script>
</body>
يحمِّل أول وسمين React، ويحمِّل الوسم الثالث شيفرة المكون الذي ستنشئه.
الخطوة 3: إنشاء مكون React
أنشئ ملفًا باسم like_button.js بجانب صفحة HTML التي عدلناها للتو.
افتح هذه الشيفرة المساعدة ثم انسخها والصقها في الملف الذي أنشأته قبل قليل.
فائدة: تعرِّف هذه الشيفرة مكون React يدعى LikeButton. لا تقلق إن لم تفهم شيئًا منها، إذ سنغطي كل شيء مذكور فيها لاحقًا في الدليل التطبيقي ودليل المفاهيم الأساسية. في الوقت الحالي، لندع هذه الشيفرة تظهر شيئًا على الشاشة.
بعد الشيفرة الشيفرة المساعدة، أضف السطرين التاليين في نهاية الملف like_button.js:
// ... الشيفرة المساعدة التي لصقتها ...
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
مهمة هذين السطرين هي العثور على العنصر <div> الذي أضفناه إلى صفحة HTML في الخطوة الأولى ثم إظهار الزر "Like" - الذي يمثِّل أحد مكونات React - داخله.
انتهينا!
لا يوجد أية خطوات إضافية. لقد أضفت للتو أول مكون من مكونات React إلى موقعك.
انتقل إلى الأقسام التالية للمزيد حول دمج React.
اطلع على كامل شيفرة المثال، أو نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت).
إضافة: إعادة استعمال مكون
عادةً، قد تحتاج إلى إظهار مكونات React في مواضع عدة في صفحة HTML. إليك مثال يُظهِر الزر "Like" في ثلاثة أماكن ويمرر بعض البيانات إليه:
- اطلع على الشيفرة الكاملة للمثال.
- نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)
نصيحة: هذا الأسلوب مفيد جدًا في أثناء أن الأجزاء التي تعمل باستعمال React هي أجزاء معزولة عن بعضها بعضًا. داخل شيفرة React، من الأسهل استعمال تركيب المكونات عوض ذلك.
انظر أيضًا
- تجربة React
- إضافة React إلى تطبيق جديد
- إضافة React إلى تطبيق موجود (الصفحة الحالية)
- روابط شبكة توزيع المحتوى CDN