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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (نقل جميل-بيلوني صفحة React/add react to an existing app إلى React/add react to a website: تحديث محتوى الصفحة وتغيير العنوان بما يوافق المحتوى الجديد)
(تحديث)
 
(مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة)
سطر 1: سطر 1:
−
<noinclude>{{DISPLAYTITLE:إضافة React إلى تطبيق موجود}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:إضافة React إلى موقع ويب}}</noinclude>
 
''استخدم القليل من React أو بقدر ما تحتاج إليه.''  
 
''استخدم القليل من React أو بقدر ما تحتاج إليه.''  
  
−
صُمِّمت [[React]] من البداية مع أخذ الاعتماد التدريجي عليها بالحسبان، لذا تستطيع الاعتماد على [[React]] الشيء البسيط أو بقدر ما تحتاج إليه. ربما أنت بحاجة إلى إضافة بعض التفاعل (interactivity) أو أشياء أخرى بسيطة (sprinkles) إلى صفحة موجودة. مكونات [[React]] هي أفضل وسيلة للقيام بذلك.
+
صُمِّمت [[React]] من البداية مع أخذ الاعتماد التدريجي عليها بالحسبان، لذا تستطيع الاعتماد على [[React]] الشيء البسيط أو بقدر ما تحتاج إليه. ربما أنت بحاجة إلى إضافة بعض التفاعل (interactivity) أو أشياء أخرى بسيطة (sprinkles) إلى صفحة موجودة. [[React/components and props|مكونات React]] هي أفضل وسيلة للقيام بذلك.
  
−
أغلبية مواقع الويب ليست تطبيقات من صفحة واحدة، ولا تحتاج إلى أن تكون كذلك. ببضعة أسطر برمجية وبدون أدوات بناء، حاول تجريب [[React]] في أجزاء صغيرة من موقعك؛ يمكنك بعدئذٍ إمَّا أن توسِّع استعمال [[React]] تدريجيًّا، أو تقتصر باستعمالها على بضعة أدوات ذكية ديناميكية (dynamic widgets).
+
أغلبية مواقع الويب ليست تطبيقات ذات صفحة وحيدة، ولا تحتاج إلى أن تكون كذلك. ببضعة أسطر برمجية وبدون أدوات بناء، حاول تجريب [[React]] في أجزاء صغيرة من موقعك؛ يمكنك بعدئذٍ إمَّا أن توسِّع استعمال [[React]] تدريجيًّا، أو تقتصر باستعمالها على بضعة أدوات ذكية ديناميكية (dynamic widgets).
  
 
== أضف React بدقيقة واحدة! ==
 
== أضف React بدقيقة واحدة! ==
سطر 22: سطر 22:
 
</syntaxhighlight>أعطينا الوسم <code>[[HTML/div|<nowiki><div></nowiki>]]</code> معرِّفًا فريدًا عبر الخاصية <code>id</code>. سيسمح لنا هذا بالعثور عليه بسهولة عبر شيفرة [[JavaScript]] لاحقًا وإضافة مكون [[React]] داخله.
 
</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.
+
'''نصيحة''': تستطيع وضع الحاوية <code>[[HTML/div|<nowiki><div></nowiki>]]</code> في أي مكان ضمن الوسم <code>[[HTML/body|<body>]]</code>، إذ يمكنك استعمال عدد غير محدود من حاويات DOM المستقلة في صفحة واحدة. ستكون هذه الحاويات فارغةً عادةً، لأنَّ [[React]] ستستبدل أي محتوى موجود داخل حاويات DOM.
  
−
=== الخطوة 2: إضافة الوسوم <code>[[HTML/script|<script>]]</code> ===
+
=== الخطوة 2: أضف الوسوم <code>[[HTML/script|<script>]]</code> ===
 
ثانيًا، أضف ثلاثة وسوم <code>[[HTML/script|<script>]]</code> إلى صفحة [[HTML]] قبل وسم الإغلاق <code>[[HTML/body|<‎/body>]]</code> بالشكل التالي:<syntaxhighlight lang="html">
 
ثانيًا، أضف ثلاثة وسوم <code>[[HTML/script|<script>]]</code> إلى صفحة [[HTML]] قبل وسم الإغلاق <code>[[HTML/body|<‎/body>]]</code> بالشكل التالي:<syntaxhighlight lang="html">
 
   <!-- ... HTML محتوى ... -->
 
   <!-- ... HTML محتوى ... -->
سطر 30: سطر 30:
 
   <!-- React تحميل -->
 
   <!-- React تحميل -->
 
   <!-- "development.js" مكان "production.min.js" ملاحظة: عند النشر، بدل -->
 
   <!-- "development.js" مكان "production.min.js" ملاحظة: عند النشر، بدل -->
−
   <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
+
   <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
−
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
+
   <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  
 
   <!-- الخاص بنا React تحميل مكون. -->
 
   <!-- الخاص بنا React تحميل مكون. -->
 
   <script src="like_button.js"></script>
 
   <script src="like_button.js"></script>
−
 
 
</body>
 
</body>
 
</syntaxhighlight>يحمِّل أول وسمين [[React]]، ويحمِّل الوسم الثالث شيفرة المكون الذي ستنشئه.
 
</syntaxhighlight>يحمِّل أول وسمين [[React]]، ويحمِّل الوسم الثالث شيفرة المكون الذي ستنشئه.
  
−
=== الخطوة 3: إنشاء مكون React ===
+
=== الخطوة 3: أنشئ مكون React ===
 
أنشئ ملفًا باسم like_button.js بجانب صفحة [[HTML]] التي عدلناها للتو.
 
أنشئ ملفًا باسم like_button.js بجانب صفحة [[HTML]] التي عدلناها للتو.
  
−
افتح [https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js هذه الشيفرة المساعدة] ثم انسخها والصقها في الملف الذي أنشأته قبل قليل.
+
افتح [https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js هذه الشيفرة المساعدة] ثم انسخها والصقها في الملف الذي أنشأته قبل قليل.
  
−
'''فائدة''': تعرِّف هذه الشيفرة مكون [[React]] يدعى LikeButton. لا تقلق إن لم تفهم شيئًا منها، إذ سنغطي كل شيء مذكور فيها لاحقًا في [[React/tutorial|الدليل التطبيقي]] ودليل [[React/hello world|المفاهيم الأساسية]]. في الوقت الحالي، لندع هذه الشيفرة تظهر شيئًا على الشاشة.
+
'''فائدة''': تعرِّف هذه الشيفرة مكون [[React]] يدعى <code>LikeButton</code>. لا تقلق إن لم تفهم شيئًا منها، إذ سنغطي كل شيء مذكور فيها لاحقًا في [[React/tutorial|الدليل التطبيقي]] ودليل [[React/hello world|المفاهيم الأساسية]]. في الوقت الحالي، لندع هذه الشيفرة تُظهِر شيئًا على الشاشة.
  
−
بعد الشيفرة [https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js الشيفرة المساعدة]، أضف السطرين التاليين في نهاية الملف like_button.js:<syntaxhighlight lang="javascript">
+
بعد الشيفرة [https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js الشيفرة المساعدة]، أضف السطرين التاليين في نهاية الملف like_button.js:<syntaxhighlight lang="javascript">
 
// ... الشيفرة المساعدة التي لصقتها ...
 
// ... الشيفرة المساعدة التي لصقتها ...
  
سطر 54: سطر 53:
  
 
=== انتهينا! ===
 
=== انتهينا! ===
−
لا يوجد أية خطوات إضافية. لقد أضفت للتو أول مكون من مكونات [[React]] إلى موقعك.
+
لا توجد أية خطوات إضافية. لقد أضفت للتو أول مكون من مكونات [[React]] إلى موقعك.
  
 
انتقل إلى الأقسام التالية للمزيد حول دمج [[React]].
 
انتقل إلى الأقسام التالية للمزيد حول دمج [[React]].
سطر 62: سطر 61:
 
=== إضافة: إعادة استعمال مكون ===
 
=== إضافة: إعادة استعمال مكون ===
 
عادةً، قد تحتاج إلى إظهار مكونات [[React]] في مواضع عدة في صفحة [[HTML]]. إليك مثال يُظهِر الزر "Like" في ثلاثة أماكن ويمرر بعض البيانات إليه:
 
عادةً، قد تحتاج إلى إظهار مكونات [[React]] في مواضع عدة في صفحة [[HTML]]. إليك مثال يُظهِر الزر "Like" في ثلاثة أماكن ويمرر بعض البيانات إليه:
−
* اطلع على الشيفرة الكاملة للمثال.
+
* [https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda اطلع على الشيفرة الكاملة للمثال.]
−
* نزل المثال كاملًا (ملف مضغوط بحجم 2 كيلوبايت)
+
* [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|تركيب المكونات]] عوض ذلك.
+
'''نصيحة''': هذا الأسلوب مفيد جدًا في أثناء كون الأجزاء التي تعمل باستعمال [[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 للنشر ===
 
=== إضافة: تصغير شيفرة JavaScritp للنشر ===
سطر 70: سطر 69:
  
 
إن صغَّرت شيفرات التطبيق مسبقًا، فسيكون موقعك جاهزًا للنشر على البيئة الإنتاجية بعد التأكد من أن شيفرة [[HTML]] التي يراد نشرها تُحمِّل إصدار [[React]] الإنتاجي (أي الذي ينتهي بـ production.min.js):<syntaxhighlight lang="html">
 
إن صغَّرت شيفرات التطبيق مسبقًا، فسيكون موقعك جاهزًا للنشر على البيئة الإنتاجية بعد التأكد من أن شيفرة [[HTML]] التي يراد نشرها تُحمِّل إصدار [[React]] الإنتاجي (أي الذي ينتهي بـ production.min.js):<syntaxhighlight lang="html">
−
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
+
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
−
<script src="https://unpkg.com/react-dom@16/umd/react-dom.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 يمكنك اتباع هذه الطريقة].
 
</syntaxhighlight>إن لم تعرف كيفية تنفيذ خطوة التصغير، [https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3 يمكنك اتباع هذه الطريقة].
  
سطر 91: سطر 90:
 
   </button>
 
   </button>
 
);
 
);
−
</syntaxhighlight>هذه الشيفرة مكافئ للشيفرة التي قبلها تمامًا. لمَّا كان JSX اختياري بشكل كامل، يرى الكثير من الأشخاص أنه مفيد لكتابة شيفرة واجهة المستخدم (UI code) في [[React]] وفي مكتبات أخرى.
+
</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 باستعمال [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 محول بابل المباشر].
سطر 99: سطر 98:
 
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  
−
</syntaxhighlight>الآن، يمكنك استعمال JSX في أي وسم <code>[[HTML/script|<script>]]</code> عبر إضافة الخاصية <code>type="text/babel"</code>‎ إليه. ستجد هنا ملف [[HTML]] مع JSX يمكنك تنزيله والتجريب به.
+
</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> تلقائيًّا.
+
هذا الأسلوب لا بأس به للتعلم وإنشاء نماذج تجريبية، ولكنه غير مناسب للإنتاج إذ سيجعل موقعك بطيئًا. عندما تكون مستعدًا للبدء بجدية، احذف الوسم <code>[[HTML/script|<script>]]</code> السابق والخاصية <code>type="text/babel"‎</code> التي أضفتها، لأنَّك ستتعلم في القسم التالي كيفية ضبط معالج JSX الأولي (JSX preprocessor) لتحويل جميع الوسوم <code>[[HTML/script|<script>]]</code> تلقائيًّا.
  
 
==== إضافة JSX إلى المشروع ====
 
==== إضافة JSX إلى المشروع ====
−
لا يتطلب إضافة JSX إلى مشروعٍ ما أية أدوات معقدة مثل مُحزِّم أو خادم تطويري. بشكل أساسي، إضافة JSX يشبه إلى حد ما إضافة معالج CSS أولي. الشيء المطلوب هو تثبيت [[Node.js]] على حاسوبك.
+
لا يتطلب إضافة JSX إلى مشروعٍ ما أية أدوات معقدة مثل مُحزِّم أو خادم تطويري. بشكل أساسي، إضافة JSX يشبه إلى حد ما إضافة معالج [[CSS]] أولي. الشيء المطلوب هو تثبيت [[Node.js]] على حاسوبك.
  
 
اذهب إلى مجلد مشروعك من الطرفية والصق الأمرين التاليين:
 
اذهب إلى مجلد مشروعك من الطرفية والصق الأمرين التاليين:
سطر 117: سطر 116:
 
npx babel --watch src --out-dir . --presets react-app/prod  
 
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 بشكل خطأ)، ربما لم تُنفِّذ الخطوة السابقة "إضافة JSX إلى المشروع". نفذ الأمرين في تلك الخطوة في نفس مجلد المشروع ثم أعد تنفيذ الأمر السابق.
+
</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.
+
لا تنتظر انتهاء هذا الأمر لأنَّه لن ينتهي. يبدأ هذا الأمر تشغيل مراقب آلي من أجل JSX.
  
−
إن أنشأت الآن مجلدًا باسم src/like_button.js مع هذه الشيفرة المساعدة، فسينشئ المراقب الملف like_button.js بعد معالجته مع شيفرة JavaScript صرفة تناسب المتصفح. في كل مرة تعدل فيها الملف المصدري مع JSX، ستجرى عملية التحويل تلقائيًّا.
+
إن أنشأت الآن مجلدًا باسم src/like_button.js مع هذه الشيفرة المساعدة، فسينشئ المراقب الملف like_button.js بعد معالجته مع شيفرة [[JavaScript]] صرفة تناسب المتصفح. في كل مرة تعدل فيها الملف المصدري مع JSX، ستُجرَى عملية التحويل تلقائيًّا.
  
 
إضافة لذلك، هذا يمكِّنك أيضًا من استعمال ميزات صياغة [[JavaScript]] الحديثة مثل الأصناف دون القلق حيال دعم المتصفحات القديمة. الأداة التي استعملناها للتو تدعى "بابل" (Babel)، ويمكنك تعلم المزيد عنها من [https://babeljs.io/docs/en/babel-cli/ توثيقها الرسمي].
 
إضافة لذلك، هذا يمكِّنك أيضًا من استعمال ميزات صياغة [[JavaScript]] الحديثة مثل الأصناف دون القلق حيال دعم المتصفحات القديمة. الأداة التي استعملناها للتو تدعى "بابل" (Babel)، ويمكنك تعلم المزيد عنها من [https://babeljs.io/docs/en/babel-cli/ توثيقها الرسمي].
  
−
إن شعرت بالراحة مع أدوات البناء وأردت الاستزادة منها لأداء مزيد من الأمور، يشرح القسم التالي أشهر أدوات البناء (toolchains) وأكثرها فاعلية. إن لم تشعر كذلك، الخطوات السابقة مع الوسوم <code>[[HTML/script|<script>]]</code> كافية إلى حد ما.
+
إن شعرت بالراحة مع أدوات البناء وأردت الاستزادة منها لأداء مزيد من الأمور، يشرح [[React/create a new react app|هذا القسم]] أشهر أدوات البناء (toolchains) وأكثرها فاعلية. إن لم تشعر كذلك، الخطوات السابقة مع الوسوم <code>[[HTML/script|<script>]]</code> كافية إلى حد ما.
  
 
== انظر أيضًا ==
 
== انظر أيضًا ==
 
*[[React/try react|تجربة React]]
 
*[[React/try react|تجربة React]]
−
* [[React/add react to a new app|إنشاء تطبيق React جديد]]
+
* [[React/create a new react app|إنشاء تطبيق React جديد]]
 
* [[React/cdn links|روابط شبكة توزيع المحتوى CDN]]
 
* [[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]]
 +
[[تصنيف:React Installation]]

المراجعة الحالية بتاريخ 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 على حاسوبك.

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

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

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

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

انظر أيضًا

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=React/add_react_to_a_website&oldid=29794"