الفرق بين المراجعتين ل"React/add react to a website"

المراجعة الحالية بتاريخ 17:07، 29 أكتوبر 2020

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

يحمِّل أول وسمين 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" في ثلاثة أماكن ويمرر بعض البيانات إليه:

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

إضافة: تصغير شيفرة JavaScritp للنشر

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

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

<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>

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

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

في المثال السابق، اعتمدنا على ميزات مدعومة من طرف المتصفحات فقط. هذا هو سبب استعمال استدعاء إحدى دوال JavaScript لاخبار 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 باستعمال محول بابل المباشر.

جرب JSX بسرعة

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

<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 على حاسوبك.

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

نفِّذ الأمر npm init -y (عند الفشل، اطلع على هذا الحل)
نفذ الأمر 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 بعد معالجته مع شيفرة JavaScript صرفة تناسب المتصفح. في كل مرة تعدل فيها الملف المصدري مع JSX، ستُجرَى عملية التحويل تلقائيًّا.

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

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

انظر أيضًا

مصادر

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

@@ سطر 1: / سطر 1: @@
-<noinclude>{{DISPLAYTITLE:إضافة React إلى تطبيق موجود}}</noinclude>
+<noinclude>{{DISPLAYTITLE:إضافة React إلى موقع ويب}}</noinclude>
-لن تحتاج إلى إعادة كتابة تطبيقك للبدء باستخدام React.
+''استخدم القليل من React أو بقدر ما تحتاج إليه.''
-من المُفضّل إضافة React إلى جزء صغير من تطبيقك، مثل الأدوات الذكية (widgets) بحيث ترى إن كانت تعمل بشكل جيّد لحالتك.
+صُمِّمت [[React]] من البداية مع أخذ الاعتماد التدريجي عليها بالحسبان، لذا تستطيع الاعتماد على [[React]] الشيء البسيط أو بقدر ما تحتاج إليه. ربما أنت بحاجة إلى إضافة بعض التفاعل (interactivity) أو أشياء أخرى بسيطة (sprinkles) إلى صفحة موجودة. [[React/components and props|مكونات 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]] التي تريد تعديلها ثم أضف وسم <code>[[HTML/div|<nowiki><div></nowiki>]]</code> فارغ لتحديد الجزء حيث تريد إظهار شيء فيه باستعمال [[React]]:<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>أعطينا الوسم <code>[[HTML/div|<nowiki><div></nowiki>]]</code> معرِّفًا فريدًا عبر الخاصية <code>id</code>. سيسمح لنا هذا بالعثور عليه بسهولة عبر شيفرة [[JavaScript]] لاحقًا وإضافة مكون [[React]] داخله.
-== مثال "أهلًا بالعالم" باستخدام ES6 و JSX ==
+'''نصيحة''': تستطيع وضع الحاوية <code>[[HTML/div|<nowiki><div></nowiki>]]</code> في أي مكان ضمن الوسم <code>[[HTML/body|<body>]]</code>، إذ يمكنك استعمال عدد غير محدود من حاويات DOM المستقلة في صفحة واحدة. ستكون هذه الحاويات فارغةً عادةً، لأنَّ [[React]] ستستبدل أي محتوى موجود داخل حاويات DOM.
-نوصي باستخدام مُحزِّم (bundler) مثل [https://webpack.js.org/ webpack] أو [http://browserify.org/ Browserify] لكي تتمكّن من كتابة شيفرة مؤلفة من واحدات ثمّ حزمها معًا في حِزَم صغيرة لتحسين زمن التحميل.
-يبدو أبسط مثال في React كما يلي:<syntaxhighlight lang="javascript">
+=== الخطوة 2: أضف الوسوم <code>[[HTML/script|<script>]]</code> ===
-import React from 'react';
+ثانيًا، أضف ثلاثة وسوم <code>[[HTML/script|<script>]]</code> إلى صفحة [[HTML]] قبل وسم الإغلاق <code>[[HTML/body|<‎/body>]]</code> بالشكل التالي:<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@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>تُصيِّر هذه الشيفرة المحتوى المذكور ضمن عنصر DOM الذي يمتلك المُعرِّف (id) ذو القيمة <code>root</code>، لذلك نحتاج لوجود الشيفرة ‎<code><nowiki><div id="root"></div></nowiki></code>‎ في مكان ما من ملف HTML.
+</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
-بإمكاننا بشكل مماثل تصيير عنصر React بداخل عنصر DOM في مكان ما من تطبيقنا الحالي والمكتوب باستخدام أي مكتبة واجهات JavaScript أخرى.
+</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 إلى المشروع]]". نفذ الأمرين في تلك الخطوة في نفس مجلد المشروع ثم أعد تنفيذ الأمر السابق.
-[[React/integrating with other libraries|تعلّم أكثر حول تضمين React مع شيفرة موجودة سابقًا.]]
+لا تنتظر انتهاء هذا الأمر لأنَّه لن ينتهي. يبدأ هذا الأمر تشغيل مراقب آلي من أجل JSX.
-== مثال كامل ==
+إن أنشأت الآن مجلدًا باسم src/like_button.js مع هذه الشيفرة المساعدة، فسينشئ المراقب الملف like_button.js بعد معالجته مع شيفرة [[JavaScript]] صرفة تناسب المتصفح. في كل مرة تعدل فيها الملف المصدري مع JSX، ستُجرَى عملية التحويل تلقائيًّا.
-بإمكانك إيجاد تعليمات مُفصَّلة خطوة بخطوة تشرح بناء تطبيق react بسيط من الصّفر مع إعداد Babel و Webpack من [https://medium.com/@JedaiSaboteur/creating-a-react-app-from-scratch-f3c693b84658 هنا].
-== إصدارات التطوير والإنتاج ==
+إضافة لذلك، هذا يمكِّنك أيضًا من استعمال ميزات صياغة [[JavaScript]] الحديثة مثل الأصناف دون القلق حيال دعم المتصفحات القديمة. الأداة التي استعملناها للتو تدعى "بابل" (Babel)، ويمكنك تعلم المزيد عنها من [https://babeljs.io/docs/en/babel-cli/ توثيقها الرسمي].
-تتضمّن React افتراضيًّا العديد من رسائل التحذير المُساعِدة، وهي مفيدة جدًّا في التطوير، ولكنّها على الرغم من ذلك تجعل من إصدار تطوير React أكبر وأبطأ لذلك يجب أن تستخدم إصدار الإنتاج عند توزيع التطبيق.
-[[React/optimizing performance|تعلّم كيفيّة معرفة ما إذا كان الموقع يستخدم الإصدار الصّحيح من React]]، وكيفيّة إعداد عمليّة بناء نسخة الإنتاج بشكل فعّال:
+إن شعرت بالراحة مع أدوات البناء وأردت الاستزادة منها لأداء مزيد من الأمور، يشرح [[React/create a new react app|هذا القسم]] أشهر أدوات البناء (toolchains) وأكثرها فاعلية. إن لم تشعر كذلك، الخطوات السابقة مع الوسوم <code>[[HTML/script|<script>]]</code> كافية إلى حد ما.
-* [[React/optimizing performance|إنشاء نسخة للإنتاج باستخدام الأمر <code>create-react-app</code>]].
-* [[React/optimizing performance|إنشاء نسخة للإنتاج باستخدام إصدار react الجاهز للإنتاج والموجود على شكل ملف وحيد.]]
-* [[React/optimizing performance|إنشاء نسخة للإنتاج باستخدام Brunch.]]
-* [[React/optimizing performance|إنشاء نسخة للإنتاج باستخدام Browserify.]]
-* [[React/optimizing performance|إنشاء نسخة للإنتاج باستخدام Rollup.]]
-* [[React/optimizing performance|إنشاء نسخة للإنتاج باستخدام webpack.]]
-== استخدام شبكة توزيع المحتوى (CDN) ==
-إن لم تكن ترغب باستخدام <code>npm</code> لإدارة حِزَم العميل، تزوّدك حِزَم <code>react</code> و <code>react-dom</code> بتوزيع لملف وحيد في مجلّد <code>umd</code>. انظر إلى صفحة [[react/cdn_links|روابط CDN]] للحصول على الروابط.
 == انظر أيضًا ==
 *[[React/try react|تجربة React]]
-* [[React/add react to a new app|إضافة React إلى تطبيق جديد]]
+* [[React/create a new react app|إنشاء تطبيق React جديد]]
-* إضافة React إلى تطبيق موجود (الصفحة الحالية)
 * [[React/cdn links|روابط شبكة توزيع المحتوى CDN]]
 == مصادر ==
-* [https://reactjs.org/docs/add-react-to-an-existing-app.html صفحة إضافة React إلى تطبيق موجود في توثيق React الرسمي].
+* [https://reactjs.org/docs/add-react-to-a-website.html صفحة إضافة React إلى موقع ويب في توثيق React الرسمي].
 [[تصنيف:React]]
+[[تصنيف:React Installation]]

الفرق بين المراجعتين ل"React/add react to a website"

المراجعة الحالية بتاريخ 17:07، 29 أكتوبر 2020

محتويات

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

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

الخطوة 2: أضف الوسوم `<script>`

الخطوة 3: أنشئ مكون React

انتهينا!

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

إضافة: تصغير شيفرة JavaScritp للنشر

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

جرب JSX بسرعة

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

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

انظر أيضًا

مصادر

قائمة التصفح

بحث

الفرق بين المراجعتين ل"React/add react to a website"

المراجعة الحالية بتاريخ 17:07، 29 أكتوبر 2020

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

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

الخطوة 2: أضف الوسوم <script>

الخطوة 3: أنشئ مكون React

انتهينا!

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

إضافة: تصغير شيفرة JavaScritp للنشر

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

جرب JSX بسرعة

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

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

انظر أيضًا

مصادر

قائمة التصفح

بحث

الخطوة 2: أضف الوسوم `<script>`