الفرق بين المراجعتين لصفحة: «React/add react to a website»

مراجعة 12:27، 19 فبراير 2019

استخدم القليل من 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

مصادر

صفحة إضافة React إلى تطبيق موجود في توثيق React الرسمي.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:إضافة React إلى تطبيق موجود}}</noinclude>
-لن تحتاج إلى إعادة كتابة تطبيقك للبدء باستخدام React.
+''استخدم القليل من React أو بقدر ما تحتاج إليه.''
-من المُفضّل إضافة React إلى جزء صغير من تطبيقك، مثل الأدوات الذكية (widgets) بحيث ترى إن كانت تعمل بشكل جيّد لحالتك.
+صُمِّمت React من البداية مع أخذ الاعتماد التدريجي عليها بالحسبان، لذا تستطيع الاعتماد على React الشيء البسيط أو بقدر ما تحتاج إليه. ربما أنت بحاجة إلى إضافة بعض التفاعل (interactivity) أو إضافات أخرى بسيطة (sprinkles) إلى صفحة موجودة. مكونات React هي أفضل وسيلة للقيام بذلك.
-وفي حين أنّه من الممكن استخدام React بدون إعداد خط بناء التطبيقات، فمن الأفضل إعداده لكي تكون أكثر إنتاجيّة. يتكوّن خط بناء التطبيقات الحديث بشكل نموذجي من:
+أغلبية مواقع الويب ليس تطبيقات من صفحة واحدة، ولا تحتاج إلى أن تكون كذلك. ببضعة أسطر برمجية وبدون أدوات بناء، حاول تجريب React في أجزاء صغيرة من موقعك؛ يمكنك بعدئذٍ إمَّا أن توسِّع استعمال React تدريجيًّا، أو تقتصر باستعمالها على بضعة أدوات ذكية ديناميكية (dynamic widgets).
-* مدير الحِزَم (package manager) مثل <code>[https://yarnpkg.com/ Yarn]</code> أو <code>[https://www.npmjs.com/ npm]</code>. ويسمح لنا بالاستفادة من نظام حِزَم واسع جدًّا مُقدَّم من قبل طرف ثالث (third-party)، وتثبيت هذه الحِزَم أو تحديثها بسهولة.
-* مُحزِّم (bundler) مثل [http://browserify.org/ webpack] أو [http://browserify.org/ Browserify]، ويُتيح لنا أن نكتب شيفرة مؤلفة من واحدات ثمّ يُجمِّعها معًا في حِزَم صغيرة لتحسين زمن التحميل.
-* مُترجِم (Compiler) مثل [http://babeljs.io/ Babel]، ويُتيح لنا كتابة الشيفرة بأحدث إصدار من JavaScript والتي تعمل رغم ذلك على المتصفّحات القديمة.
-== تثبيت React ==
+== أضف React بدقيقة واحدة ==
-'''ملاحظة:''' حالما تنتهي من تثبيت React من المفضّل إعداد عمليّة بناء للإنتاج لضمان استخدامك للإصدار السّريع من React في الإنتاج.
+في هذا القسم، سنعلمك كيفية إضافة مكون واحد من مكونات React إلى صفحة HTML موجودة مسبقًا. يمكنك إمَّا استعمال إحدى صفحات موقعك وإمَّا إنشاء صفحة HTML جديدة للتدريب عليها.
-نوصي باستخدام <code>[https://yarnpkg.com/ Yarn]</code> أو <code>[https://www.npmjs.com/ npm]</code> لإدارة اعتماديّات الواجهة الأماميّة (front-end dependencies). إن كنت جديدًا على استخدام مدير الحِزَم فالمكان الأنسب لكي تبدأ هو توثيق <code>[https://yarnpkg.com/ Yarn]</code>.
+لن تحتاج إلى أية أدوات معقدة أو تثبيت أي شيء. كل ما تحتاج إليه لإكمال هذا القسم هو اتصال بالإنترنت ودقيقة مستقطعة من وقتك.
-لتثبيت React باستخدام <code>[https://yarnpkg.com/ Yarn]</code> نفّذ الأمر التالي:<syntaxhighlight lang="text">
+تستطيع تنزيل [https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip المثال كاملًا (بحجم 2 كيلوبايت)] ولكن الأمر عائد إليك.
-yarn init
-yarn add react react-dom
-</syntaxhighlight>لتثبيت React باستخدام <code>[https://www.npmjs.com/ npm]</code> نفّذ الأمر التالي:<syntaxhighlight lang="text">
-npm init
-npm install --save react react-dom
-</syntaxhighlight>يُحمِّل كل من <code>Yarn</code> و <code>npm</code> الحِزَم من [http://npmjs.com/ سجلّات npm].
-'''ملاحظة:''' لمنع احتماليّة حدوث عدم التوافقيّة يجب أن تستخدم كافّة حِزَم React نفس الإصدار. (يتضمّن هذا <code>react</code>، و <code>react-dom</code>، و <code>react-test-renderer</code>، ...إلخ.).
+=== الخطوة 1: أضف حاوية DOM إلى صفحة HTML ===
+أولًا، افتح صفحة HTML التي تريد تعديلها ثم أضف وسم <nowiki><div> فارغ لتحديد الجزء حيث تريد إظهار شيء فيه باستعمال React:</nowiki><syntaxhighlight lang="html">
+<!-- ... HTML محتويات صفحة ... -->
-== تمكين ES6 و JSX ==
+<div id="like_button_container"></div>
-من المفضّل استخدام React مع [http://babeljs.io/ Babel] والذي يسمح لنا باستخدام ES6 و JSX ضمن شيفرة JavaScript. إنّ ES6 هو عبارة عن ميّزات حديثة في JavaScript تجعل التطوير أسهل، و JSX هي عبارة عن امتداد للغة JavaScript تعمل بشكل رائع مع React.
-تشرح [https://babeljs.io/docs/setup/ صفحة تعليمات إعداد Babel] كيفيّة إعداد Babel في بيئات مختلفة لبناء التطبيقات. تأكّد من تثبيت <code>[http://babeljs.io/docs/plugins/preset-react/#basic-setup-with-the-cli- babel-preset-react]</code> و <code>[http://babeljs.io/docs/plugins/preset-env/ babel-preset-env]</code> وتمكينها في ملف الإعدادات <code>[http://babeljs.io/docs/usage/babelrc/ ‎.babelrc]</code> وستكون حينها جاهزًا للبدء.
+<!-- ... HTML محتويات صفحة ... -->
+</syntaxhighlight>أعطينا الوسم <nowiki><div> معرِّفًا فريدًا عبر الخاصية id. سيسمح لنا هذا بالعثور عليه بسهولة عبر شيفرة JavaScript لاحقًا وإضافة مكون React داخله.</nowiki>
-== مثال "أهلًا بالعالم" باستخدام ES6 و JSX ==
+نصيحة: تستطيع وضع الحاوية <nowiki><div> في أي مكان ضمن الوسم <body>، إذ يمكنك استعمال عدد غير محدود من حاويات DOM المستقلة في صفحة واحدة. ستكون هذه الحاويات فارغةً عادةً، لأن React ستستبدل أي محتوى موجود داخل حاويات DOM.</nowiki>
-نوصي باستخدام مُحزِّم (bundler) مثل [https://webpack.js.org/ webpack] أو [http://browserify.org/ Browserify] لكي تتمكّن من كتابة شيفرة مؤلفة من واحدات ثمّ حزمها معًا في حِزَم صغيرة لتحسين زمن التحميل.
-يبدو أبسط مثال في React كما يلي:<syntaxhighlight lang="javascript">
+=== الخطوة 2: إضافة الوسوم <script> ===
-import React from 'react';
+ثانيًا، أضف ثلاثة وسوم <script> إلى صفحة HTML قبل وسم الإغلاق </body> بالشكل التالي:<syntaxhighlight lang="html">
-import ReactDOM from 'react-dom';
+  <!-- ... HTML محتوى ... -->
-ReactDOM.render(
+   <!-- React تحميل -->
-   <h1>أهلًا بالعالم</h1>,
+  <!-- "development.js" مكان "production.min.js" ملاحظة: عند النشر، بدل -->
-   document.getElementById('root')
+   <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>
-</syntaxhighlight>تُصيِّر هذه الشيفرة المحتوى المذكور ضمن عنصر DOM الذي يمتلك المُعرِّف (id) ذو القيمة <code>root</code>، لذلك نحتاج لوجود الشيفرة ‎<code><nowiki><div id="root"></div></nowiki></code>‎ في مكان ما من ملف HTML.
-بإمكاننا بشكل مماثل تصيير عنصر React بداخل عنصر DOM في مكان ما من تطبيقنا الحالي والمكتوب باستخدام أي مكتبة واجهات JavaScript أخرى.
+  <!-- الخاص بنا React تحميل مكون. -->
+  <script src="like_button.js"></script>
-[[React/integrating with other libraries|تعلّم أكثر حول تضمين React مع شيفرة موجودة سابقًا.]]
+</body>
+</syntaxhighlight>يحمِّل أول وسمين React، ويحمِّل الوسم الثالث شيفرة المكون الذي ستنشئه.
-== مثال كامل ==
+=== الخطوة 3: إنشاء مكون React ===
-بإمكانك إيجاد تعليمات مُفصَّلة خطوة بخطوة تشرح بناء تطبيق react بسيط من الصّفر مع إعداد Babel و Webpack من [https://medium.com/@JedaiSaboteur/creating-a-react-app-from-scratch-f3c693b84658 هنا].
+أنشئ ملفًا باسم like_button.js بجانب صفحة HTML التي عدلناها للتو.
-== إصدارات التطوير والإنتاج ==
+افتح [https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js هذه الشيفرة المساعدة] ثم انسخها والصقها في الملف الذي أنشأته قبل قليل.
-تتضمّن React افتراضيًّا العديد من رسائل التحذير المُساعِدة، وهي مفيدة جدًّا في التطوير، ولكنّها على الرغم من ذلك تجعل من إصدار تطوير React أكبر وأبطأ لذلك يجب أن تستخدم إصدار الإنتاج عند توزيع التطبيق.
-[[React/optimizing performance|تعلّم كيفيّة معرفة ما إذا كان الموقع يستخدم الإصدار الصّحيح من React]]، وكيفيّة إعداد عمليّة بناء نسخة الإنتاج بشكل فعّال:
+فائدة: تعرِّف هذه الشيفرة مكون React يدعى LikeButton. لا تقلق إن لم تفهم شيئًا منها، إذ سنغطي كل شيء مذكور فيها لاحقًا في [[React/tutorial|الدليل التطبيقي]] ودليل [[React/hello world|المفاهيم الأساسية]]. في الوقت الحالي، لندع هذه الشيفرة تظهر شيئًا على الشاشة.
-* [[React/optimizing performance|إنشاء نسخة للإنتاج باستخدام الأمر <code>create-react-app</code>]].
-* [[React/optimizing performance|إنشاء نسخة للإنتاج باستخدام إصدار react الجاهز للإنتاج والموجود على شكل ملف وحيد.]]
+بعد الشيفرة [https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js الشيفرة المساعدة]، أضف السطرين التاليين في نهاية الملف like_button.js:<syntaxhighlight lang="javascript">
-* [[React/optimizing performance|إنشاء نسخة للإنتاج باستخدام Brunch.]]
+// ... الشيفرة المساعدة التي لصقتها ...
-* [[React/optimizing performance|إنشاء نسخة للإنتاج باستخدام Browserify.]]
-* [[React/optimizing performance|إنشاء نسخة للإنتاج باستخدام Rollup.]]
+const domContainer = document.querySelector('#like_button_container');
-* [[React/optimizing performance|إنشاء نسخة للإنتاج باستخدام webpack.]]
+ReactDOM.render(e(LikeButton), domContainer);
+</syntaxhighlight>مهمة هذين السطرين هي العثور على العنصر <nowiki><div> الذي أضفناه إلى صفحة HTML في الخطوة الأولى ثم إظهار الزر "Like" - الذي يمثِّل أحد مكونات React - داخله.</nowiki>
+=== انتهينا! ===
+لا يوجد أية خطوات إضافية. لقد أضفت للتو أول مكون من مكونات React إلى موقعك.
+انتقل إلى الأقسام التالية للمزيد حول دمج React.
+[https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605 اطلع على كامل شيفرة المثال]، أو [https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)].
+=== إضافة: إعادة استعمال مكون ===
+عادةً، قد تحتاج إلى إظهار مكونات React في مواضع عدة في صفحة HTML. إليك مثال يُظهِر الزر "Like" في ثلاثة أماكن ويمرر بعض البيانات إليه:
+* اطلع على الشيفرة الكاملة للمثال.
+* نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)
+نصيحة: هذا الأسلوب مفيد جدًا في أثناء أن الأجزاء التي تعمل باستعمال React هي أجزاء معزولة عن بعضها بعضًا. داخل شيفرة React، من الأسهل استعمال [[React/components and props#.D8.AA.D8.B1.D9.83.D9.8A.D8.A8 .D8.A7.D9.84.D9.85.D9.83.D9.88.D9.86.D8.A7.D8.AA|تركيب المكونات]] عوض ذلك.
-== استخدام شبكة توزيع المحتوى (CDN) ==
-إن لم تكن ترغب باستخدام <code>npm</code> لإدارة حِزَم العميل، تزوّدك حِزَم <code>react</code> و <code>react-dom</code> بتوزيع لملف وحيد في مجلّد <code>umd</code>. انظر إلى صفحة [[react/cdn_links|روابط CDN]] للحصول على الروابط.
 == انظر أيضًا ==
 *[[React/try react|تجربة React]]