إضافة React للموقع

These docs are old and won’t be updated. Go to react.dev for the new React docs.

See Add React to an Existing Project for the recommended ways to add React.

استخدم القليل من React أو بقدر ما تحتاج إليه.

React صممت ابتداء بأخذ الاعتماد التدريجي في الحسبان، لذا تستطيع الاعتماد على القليل من React أو بقدر ما تحتاج إليها. ربما أنت بحاجة إلى اضافة القليل من التفاعل أو بقدر الحاجة إلى صفحة موجودة. مكونات React هي أفضل وسيلة للقيام بذلك.

أغلبية مواقع الويب ليست تطبيقات ذات صفحة وحيدة، ولا تحتاج إلى أن تكون كذلك. ببضعة أسطر برمجية ودون أدوات بناء، حاول تجريب React في أجزاء صغيرة من موقعك؛ يمكنك بعدئذٍ إمَّا أن توسِّع استعمال React تدريجيًّا، أو تَقْصُـر استعمالها على بضعة أدوات ذكية ديناميكية (dynamic widgets).

اضف React في دقيقة واحدة!
اختياري: جرب React مع JSX (لا حاجة لاي bundler!)

اضف React بدقيقة واحدة!

في هذا القسم، سنعلمك كيفية إضافة مكون واحد من مكونات React إلى صفحة HTML موجودة مسبقًا. يمكنك إمَّا استعمال إحدى صفحات موقعك وإمَّا إنشاء صفحة HTML جديدة للتدرُّب عليها.

لن تحتاج إلى أية أدوات معقدة أو تثبيت أي شيء. كل ما تحتاج إليه لإكمال هذا القسم هو اتصال بالإنترنت ودقيقة مستقطعة من وقتك.

تستطيع تنزيل المثال التالي كاملًا (بحجم 2 كيلوبايت) ولكن الأمر عائد إليك.

الخطوة 1: أضف حاوية DOM إلى صفحة HTM

أولًا، افتح صفحة HTML التي تريد تعديلها ثم أضف وسم <div> فارغ لتحديد الجزء حيث تريد إظهار شيء فيه باستعمال React:

<!-- ... HTML محتويات صفحة ... -->

<div id="like_button_container"></div>
<!-- ... HTML محتويات صفحة ... -->

أعطينا الوسم <div> معرِّفًا فريدًا عبر الخاصية id . سيسمح لنا هذا بالعثور عليه بسهولة عبر شيفرة جافاسكريبت لاحقًا وإضافة مكون React داخله.

نصيحة

تستطيع وضع “الحاوية” <div> في أي مكان ضمن الوسم <body>. إذ يمكنك استعمال عدد غير محدود من حاويات DOM المستقلة في صفحة واحدة. ستكون هذه الحاويات فارغةً عادةً، لأنَّ React ستستبدل أي محتوى موجود داخل حاويات DOM.

الخطوة 2: إضافة وسوم Script

ثانيًا، أضف ثلاثة وسوم <script> إلى صفحة HTML قبل وسم الإغلاق </body> بالشكل التالي:

  <!-- ... HTML محتوى ... -->

  <!-- React تحميل -->
  <!-- "development.js" مكان "production.min.js" ملاحظة: عند النشر، بدل -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/react-dom@18/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');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

مهمة هذين السطرين هي العثور على العنصر <div> الذي أضفناه إلى صفحة HTML في الخطوة الأولى ثم إظهار الزر “Like” - الذي يمثِّل أحد مكونات React - داخله.

انتهينا!

لا توجد أية خطوات إضافية. لقد أضفت للتو أول مكون من مكونات React إلى موقعك.

انتقل إلى الأقسام التالية للمزيد حول دمج React.

اطلع على كامل شيفرة المثال أو نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)

إضافة: إعادة استعمال مكون

عادةً، قد تحتاج إلى إظهار مكونات React في مواضع عدة في صفحة HTML. إليك مثال يُظهِر الزر “Like” في ثلاثة أماكن ويمرر بعض البيانات إليه:

اطلع على الشيفرة الكاملة للمثال.

نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)

نصيحة

هذا الأسلوب مفيد جدًا في أثناء كون الأجزاء التي تعمل باستعمال React هي أجزاء معزولة عن بعضها بعضًا. داخل شيفرة React، من الأسهل استعمال تركيب المكونات عوض ذلك.

إضافة: تصغير شيفرة الجافاسكريبت للنشر

قبل نشر موقعك على خادم إنتاجي، ضع في بالك أن عدم تصغير شيفرة JavaScript يمكن أن يبطِّئ الصفحة عندما يحملها المستخدم النهائي.

إن صغَّرت شيفرات التطبيق مسبقًا، فسيكون موقعك جاهزًا للنشر على البيئة الإنتاجية بعد التأكد من أن شيفرة HTML التي يراد نشرها تُحمِّل إصدار React الإنتاجي (أي الذي ينتهي بـ production.min.js:

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

إن لم تعرف كيفية تنفيذ خطوة التصغير، يمكنك اتباع هذه الطريقة.

إختياري: جرب React مع JSX

في المثال السابق، اعتمدنا على ميزات مدعومة من طرف المتصفحات فقط. هذا هو سبب استعمال استدعاء إحدى دوال جافسكريبت لاخبار React بالشيء الذي نريد عرضه:

const e = React.createElement;

// "Like" ذي الاسم <button> عرض
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

على أي حال، توفر React خيارًا بديلًا عبر استعمال JSX:

// "Like" ذي الاسم <button> عرض الزر
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

هذه الشيفرة مكافئة للشيفرة التي قبلها تمامًا. لمَّا كان JSX اختياري بشكل كامل، يرى الكثير من الأشخاص أنَّه مفيد لكتابة شيفرة واجهة المستخدم (UI code) في React وفي مكتبات أخرى.

يمكنك تجريب JSX باستعمال محول Babel المباشر.

جرب JSX بسرعة

أسرع طريقة لتجريب JSX في مشروعك هي إضافة الوسم <script> التالي لمشروعك:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

الآن، يمكنك استعمال JSX في أي وسم <script> عبر إضافة الخاصية type="text/babel" إليه. ستجد هنا ملف HTML مع JSX يمكنك تنزيله والتجريب به.

هذا الأسلوب لا بأس به للتعلم وإنشاء نماذج تجريبية، ولكنه غير مناسب للإنتاج إذ سيجعل موقعك بطيئًا. عندما تكون مستعدًا للبدء بجدية، احذف الوسم <script> السابق والخاصية type="text/babel"، لأنَّك ستتعلم في القسم التالي كيفية ضبط معالج JSX الأولي (JSX preprocessor) لتحويل جميع الوسوم <script> تلقائيًّا.

إضافة JSX إلى المشروع

لا يتطلب إضافة JSX إلى مشروعٍ ما أية أدوات معقدة مثل مُحزِّم أو خادم تطويري. بشكل أساسي، إضافة JSX يشبه إلى حد ما إضافة معالج CSS أولي. الشيء المطلوب هو تثبيت Node.js على حاسوبك.

اذهب إلى مجلد مشروعك من الطرفية والصق الأمرين التاليين:

الخطوة 1: نفِّذ الأمر npm init -y (عند الفشل، اطلع على هذا الحل)
الخطوة 2: نفذ الأمر npm install babel-cli@6 babel-preset-react-app@3

نصيحة

نحن نستعمل npm هنا لتثبيت معالج JSX الأولي؛ لن تحتاج إليه للقيام بأي شيء آخر. يمكن بقاء React وشيفرة التطبيق على شكل وسوم <script> دون أي تغيير.

تهانينا لك! لقد أضفت للتو تهيئة JSX اللازمة لتجهيز البيئة الانتاجية.

تشغيل معالج JSX الأولي

أنشئ مجلدًا باسم src ثم نفذ الأمر التالي في الطرفية:

npx babel --watch src --out-dir . --presets react-app/prod

ملاحظة

الأمر npx ليس فيه أي خطأ كتابي، إذ هو أداة تشغيل للحزم تأتي مع الإصدار 5.2 وما بعده من npm.

إن حصلت على رسالة خطأ تقول: “You have mistakenly installed the babel package” (أي أنك ثبَّت الحزمة babel بشكل خطأ)، ربما لم تُنفِّذ الخطوة السابقة إضافة JSX إلى المشروع. نفذ الأمرين في تلك الخطوة في نفس مجلد المشروع ثم أعد تنفيذ الأمر السابق.

لا تنتظر انتهاء هذا الأمر لأنَّه لن ينتهي. يبدأ هذا الأمر تشغيل مراقب آلي من أجل JSX.

إن أنشأت الآن مجلدًا باسم src/like_button.js مع هذه الشيفرة المساعدة، فسينشئ المراقب الملف like_button.js بعد معالجته مع شيفرة جافاسكريبت صرفة تناسب المتصفح. في كل مرة تعدل فيها الملف المصدري مع JSX، ستُجرَى عملية التحويل تلقائيًّا.

إضافة لذلك، هذا يمكِّنك أيضًا من استعمال ميزات صياغة JavaScript الحديثة مثل الأصناف دون القلق حيال دعم المتصفحات القديمة. الأداة التي استعملناها للتو تدعى Babel، ويمكنك تعلم المزيد عنها من توثيقها الرسمي.

إن شعرت بالراحة مع أدوات البناء وأردت الاستزادة منها لأداء مزيد من الأمور، يشرح القسم التالي أشهر أدوات البناء (toolchains) وأكثرها فاعلية. إن لم تشعر كذلك، الخطوات السابقة مع الوسوم <script> كافية إلى حد ما.

Is this page useful?تحرير هذه الصفحة