عرض مصدر React/add react to a website

<noinclude>{{DISPLAYTITLE:إضافة React إلى موقع ويب}}</noinclude>
''استخدم القليل من React أو بقدر ما تحتاج إليه.'' 

صُمِّمت [[React]] من البداية مع أخذ الاعتماد التدريجي عليها بالحسبان، لذا تستطيع الاعتماد على [[React]] الشيء البسيط أو بقدر ما تحتاج إليه. ربما أنت بحاجة إلى إضافة بعض التفاعل (interactivity) أو أشياء أخرى بسيطة (sprinkles) إلى صفحة موجودة. [[React/components and props|مكونات React]] هي أفضل وسيلة للقيام بذلك.

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

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

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

تستطيع تنزيل [https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip المثال التالي كاملًا (بحجم 2 كيلوبايت)] ولكن الأمر عائد إليك.

=== الخطوة 1: أضف حاوية DOM إلى صفحة HTML ===
أولًا، افتح صفحة [[HTML]] التي تريد تعديلها ثم أضف وسم <code>[[HTML/div|<nowiki><div></nowiki>]]</code> فارغ لتحديد الجزء حيث تريد إظهار شيء فيه باستعمال [[React]]:<syntaxhighlight lang="html">
<!-- ... HTML محتويات صفحة ... -->

<div id="like_button_container"></div>

<!-- ... HTML محتويات صفحة ... -->
</syntaxhighlight>أعطينا الوسم <code>[[HTML/div|<nowiki><div></nowiki>]]</code> معرِّفًا فريدًا عبر الخاصية <code>id</code>. سيسمح لنا هذا بالعثور عليه بسهولة عبر شيفرة [[JavaScript]] لاحقًا وإضافة مكون [[React]] داخله.

'''نصيحة''': تستطيع وضع الحاوية <code>[[HTML/div|<nowiki><div></nowiki>]]</code> في أي مكان ضمن الوسم <code>[[HTML/body|<body>]]</code>، إذ يمكنك استعمال عدد غير محدود من حاويات DOM المستقلة في صفحة واحدة. ستكون هذه الحاويات فارغةً عادةً، لأنَّ [[React]] ستستبدل أي محتوى موجود داخل حاويات DOM.

=== الخطوة 2: أضف الوسوم <code>[[HTML/script|<script>]]</code> ===
ثانيًا، أضف ثلاثة وسوم <code>[[HTML/script|<script>]]</code> إلى صفحة [[HTML]] قبل وسم الإغلاق <code>[[HTML/body|<‎/body>]]</code> بالشكل التالي:<syntaxhighlight lang="html">
  <!-- ... HTML محتوى ... -->

  <!-- React تحميل -->
  <!-- "development.js" مكان "production.min.js" ملاحظة: عند النشر، بدل -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

  <!-- الخاص بنا React تحميل مكون. -->
  <script src="like_button.js"></script>
</body>
</syntaxhighlight>يحمِّل أول وسمين [[React]]، ويحمِّل الوسم الثالث شيفرة المكون الذي ستنشئه.

=== الخطوة 3: أنشئ مكون React ===
أنشئ ملفًا باسم like_button.js بجانب صفحة [[HTML]] التي عدلناها للتو.

افتح [https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js هذه الشيفرة المساعدة] ثم انسخها والصقها في الملف الذي أنشأته قبل قليل.

'''فائدة''': تعرِّف هذه الشيفرة مكون [[React]] يدعى <code>LikeButton</code>. لا تقلق إن لم تفهم شيئًا منها، إذ سنغطي كل شيء مذكور فيها لاحقًا في [[React/tutorial|الدليل التطبيقي]] ودليل [[React/hello world|المفاهيم الأساسية]]. في الوقت الحالي، لندع هذه الشيفرة تُظهِر شيئًا على الشاشة.

بعد الشيفرة [https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js الشيفرة المساعدة]، أضف السطرين التاليين في نهاية الملف like_button.js:<syntaxhighlight lang="javascript">
// ... الشيفرة المساعدة التي لصقتها ...

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
</syntaxhighlight>مهمة هذين السطرين هي العثور على العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> الذي أضفناه إلى صفحة [[HTML]] في الخطوة الأولى ثم إظهار الزر "Like" - الذي يمثِّل أحد مكونات [[React]] - داخله.

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

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

[https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605 اطلع على كامل شيفرة المثال]، أو [https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)].

=== إضافة: إعادة استعمال مكون ===
عادةً، قد تحتاج إلى إظهار مكونات [[React]] في مواضع عدة في صفحة [[HTML]]. إليك مثال يُظهِر الزر "Like" في ثلاثة أماكن ويمرر بعض البيانات إليه:
* [https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda اطلع على الشيفرة الكاملة للمثال.]
* [https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip نزل المثال كاملًا (ملف مضغوط بحجم 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|تركيب المكونات]] عوض ذلك.

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

إن صغَّرت شيفرات التطبيق مسبقًا، فسيكون موقعك جاهزًا للنشر على البيئة الإنتاجية بعد التأكد من أن شيفرة [[HTML]] التي يراد نشرها تُحمِّل إصدار [[React]] الإنتاجي (أي الذي ينتهي بـ production.min.js):<syntaxhighlight lang="html">
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
</syntaxhighlight>إن لم تعرف كيفية تنفيذ خطوة التصغير، [https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3 يمكنك اتباع هذه الطريقة].

== اختياري: جرب React مع JSX ==
في المثال السابق، اعتمدنا على ميزات مدعومة من طرف المتصفحات فقط. هذا هو سبب استعمال استدعاء إحدى دوال [[JavaScript]] لاخبار [[React]] بالشيء الذي نريد عرضه:<syntaxhighlight lang="javascript">
const e = React.createElement;

// "Like" ذي الاسم <button> عرض
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);
</syntaxhighlight>على أي حال، توفر [[React]] خيارًا بديلًا عبر استعمال [[React/introducing jsx|JSX]]:<syntaxhighlight lang="javascript">
// "Like" ذي الاسم <button> عرض الزر
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);
</syntaxhighlight>هذه الشيفرة مكافئة للشيفرة التي قبلها تمامًا. لمَّا كان JSX اختياري بشكل كامل، يرى الكثير من الأشخاص أنَّه مفيد لكتابة شيفرة واجهة المستخدم (UI code) في [[React]] وفي مكتبات أخرى.

يمكنك تجريب JSX باستعمال [http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2C محول بابل المباشر].

==== جرب JSX بسرعة ====
أسرع طريقة لتجريب JSX في مشروعك هي إضافة الوسم <code>[[HTML/script|<scrtip>]]</code> التالي لمشروعك:<syntaxhighlight lang="html">
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

</syntaxhighlight>الآن، يمكنك استعمال JSX في أي وسم <code>[[HTML/script|<script>]]</code> عبر إضافة الخاصية <code>type="text/babel"</code>‎ إليه. ستجد [https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html هنا] ملف [[HTML]] مع JSX يمكنك تنزيله والتجريب به.

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

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

اذهب إلى مجلد مشروعك من الطرفية والصق الأمرين التاليين:
# نفِّذ الأمر <code>npm init -y</code> (عند الفشل، اطلع على [https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d هذا الحل])
# نفذ الأمر <code>npm install babel-cli@6 babel-preset-react-app@3</code>
'''نصيحة''': نحن نستعمل <code>npm</code> هنا لتثبيت معالج JSX الأولي؛ لن تحتاج إليه للقيام بأي شيء آخر. يمكن بقاء [[React]] وشيفرة التطبيق على شكل وسوم <code>[[HTML/script|<script>]]</code> دون أي تغيير.

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

==== تشغيل معالج JSX الأولي ====
أنشئ مجلدًا باسم src ثم نفذ الأمر التالي في الطرفية:<syntaxhighlight lang="shell">
npx babel --watch src --out-dir . --presets react-app/prod 

</syntaxhighlight>'''ملاحظة''': الأمر <code>npx</code> ليس فيه أي خطأ كتابي، إذ هو أداة تشغيل للحزم تأتي مع [https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b الإصدار 5.2 وما بعده من npm]. إن حصلت على رسالة خطأ تقول: "You have mistakenly installed the babel package" (أي أنك ثبَّت الحزمة babel بشكل خطأ)، ربما لم تُنفِّذ الخطوة السابقة "[[React/add react to a website#.D8.A5.D8.B6.D8.A7.D9.81.D8.A9 JSX .D8.A5.D9.84.D9.89 .D8.A7.D9.84.D9.85.D8.B4.D8.B1.D9.88.D8.B9|إضافة JSX إلى المشروع]]". نفذ الأمرين في تلك الخطوة في نفس مجلد المشروع ثم أعد تنفيذ الأمر السابق.

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

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

إضافة لذلك، هذا يمكِّنك أيضًا من استعمال ميزات صياغة [[JavaScript]] الحديثة مثل الأصناف دون القلق حيال دعم المتصفحات القديمة. الأداة التي استعملناها للتو تدعى "بابل" (Babel)، ويمكنك تعلم المزيد عنها من [https://babeljs.io/docs/en/babel-cli/ توثيقها الرسمي].

إن شعرت بالراحة مع أدوات البناء وأردت الاستزادة منها لأداء مزيد من الأمور، يشرح [[React/create a new react app|هذا القسم]] أشهر أدوات البناء (toolchains) وأكثرها فاعلية. إن لم تشعر كذلك، الخطوات السابقة مع الوسوم <code>[[HTML/script|<script>]]</code> كافية إلى حد ما.

== انظر أيضًا ==
*[[React/try react|تجربة React]]
* [[React/create a new react app|إنشاء تطبيق React جديد]]
* [[React/cdn links|روابط شبكة توزيع المحتوى CDN]]

== مصادر ==
* [https://reactjs.org/docs/add-react-to-a-website.html صفحة إضافة React إلى موقع ويب في توثيق React الرسمي].
[[تصنيف:React]]
[[تصنيف:React Installation]]