freeCodeCamp/guide/arabic/react/index.md

---
title: React
localeTitle: تتفاعل
---
# تتفاعل

React هي مكتبة جافا سكريبت لإنشاء واجهات المستخدم. وقد تم التصويت عليها على أنها الأكثر شعبية في فئة "الأطر والمكتبات والتقنيات الأخرى" لمسح مطوري Stack Overflow لعام 2017. 1

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

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

*   إنه إعلاني: يستخدم React نموذجًا تفسيريًا يجعل من الأسهل التفكير في طلبك.
*   إنه فعال: يقوم React بحساب الحد الأدنى من التغييرات الضرورية للحفاظ على تحديث DOM الخاص بك.
*   وهي مرنة: التفاعل يعمل مع المكتبات وأطر العمل التي تعرفها بالفعل.

## لماذا نتعلم رد الفعل؟

1.  React يشمل التركيب الذي هو الكثير من المكونات لف الوظائف في وعاء مغلف. تستخدم العديد من مواقع الويب الشائعة React لتنفيذ النمط المعماري MVC. Facebook (جزئيًا) ، Instagram (تمامًا) ، Khan Academy (جزئيًا) ، Codecademy (جزئيًا) ، New York Times (جزئيًا) ، Yahoo Mail (تمامًا) ، التطبيق الجديد للصور والفيديو لمنتدى Dropbox Carousel (تمامًا) هي المواقع الشهيرة المعروفة ليتم استخدام React. كيف يتم بناء هذه التطبيقات الكبيرة باستخدام React؟ الإجابة البسيطة هي عن طريق بناء تطبيقات أو مكونات صغيرة. مثال:

 `const Component2 = () => { 
  return ( 
    <div></div> 
  ); 
 }; 
 const Component3 = () => { 
  return ( 
    <div></div> 
  ); 
 }; 
 const Component1 = () => { 
  return ( 
    <div> 
      <Component2 /> 
      <Component3 /> 
    </div> 
  ); 
 }; 
 
 ReactDOM.render( 
  <Component1 />, 
  document.getElementById("app") 
 ); 
` 

2.  رد الفعل هو التصريح بالنسبة للجزء الأكبر الذي نشعر بالقلق أكثر مع ما يجب القيام به بدلا من كيفية القيام بمهمة محددة. البرمجة التعميمية هي نموذج برمجي يعبر عن منطق الحساب دون وصف تدفق التحكم الخاص به. تأتي البرمجة التعويضية بمزايا معينة مثل الآثار الجانبية المخفضة (تحدث عندما نقوم بتعديل أي حالة أو تحوير شيء ما أو تقديم طلب API) ، وتقليل التحلل (كما هو مستخلص من الكثير) ، والقابلية المحسنة ، وأخطاء أقل.
    
3.  تدفق البيانات أحادي الاتجاه. واجهة المستخدم في React هي في الواقع وظيفة الحالة التي تعني أن الدولة تقوم بتحديثها تقوم بتحديث واجهة المستخدم أيضًا. لذلك تقدم واجهة المستخدم مع تغير الدولة.
    

## مزايا رد الفعل

بعض الأسباب لاستخدام React هي:

1.  بسرعة. يمكن للتطبيقات التي يتم إجراؤها في React معالجة التحديثات المعقدة ولا تزال تشعر بالسرعة والاستجابة.
2.  وحدات. بدلاً من كتابة ملفات كبيرة وكثيفة من التعليمات البرمجية ، يمكنك كتابة العديد من الملفات الصغيرة القابلة لإعادة الاستخدام. يمكن أن تكون الطريقة التفاعلية هي الحل الجميل لمشاكل [صيانة](https://en.wikipedia.org/wiki/Spaghetti_code) جافا سكريبت.
3.  القابلة للتطوير. البرامج الكبيرة التي تعرض الكثير من البيانات المتغيرة هي حيث تقوم React بأفضل أداء.
4.  مرونة. يمكنك استخدام React لمشاريع مثيرة للاهتمام لا علاقة لها بتنفيذ تطبيق ويب. ما زال الناس يفكرون في قدرة React. [هناك مجال للاستكشاف](https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f) .

### DOM الظاهري

يأتي سحر React من تفسيره لـ DOM واستراتيجيته لإنشاء واجهات مستخدم.

يستخدم React DOM الافتراضي لعرض شجرة HTML فعليًا أولاً ، وبعد ذلك ، في كل مرة تتغير حالة ما ونحصل على شجرة HTML جديدة يجب نقلها إلى DOM الخاص بالمتصفح ، بدلاً من كتابة الشجرة الجديدة بأكملها سيكتب React فقط الفرق بين الشجرة الجديدة والشجرة السابقة (حيث يحتوي React على كلتا الأشجار في الذاكرة). تُعرف هذه العملية باسم "تسوية الشجرة".

### تصالح

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

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

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

## رد فعل من سكراتش

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

سننظر في هذه المقالة في كيفية بدء استخدام React باستخدام محرر نصوص ومُتصفح فقط ولا شيء آخر.

[!["شاهد](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)

[### 1 - إعداد رمز لوحة المرجل مع Emmet

لنبدأ بالخطوة 1. سنبدأ بملف في متصفحنا يسمى "index.html". سنبدأ برمز HTML لرمز المرجل. لبداية سريعة ، أوصي باستخدام Emmet مع أي محرر نصوص لديك وعلى السطر الأول كتابة في `html:5` ثم الضغط على مفتاح shift للحصول على الكود أدناه. أو يمكنك المضي قدمًا ونسخ الشفرة من الأسفل والصقها.

 `html:5 
` 

سيؤدي هذا إلى التعليمة البرمجية التالية:

 `<!DOCTYPE html> 
 <html lang="en"> 
 <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>Document</title> 
 </head> 
 <body> 
 
 </body> 
 </html> 
` 

يمكننا ملء عنوان "وقت الرد!"

لن يظهر هذا المحتوى في صفحة الويب الخاصة بك. سيكون أي شيء في قسم الرأس في ملف HTML عبارة عن بيانات تعريفية سيستخدمها متصفحنا لتفسير الشفرة في قسم النص الأساسي. سيكون هذا العنوان هو ما يظهر في علامة التبويب لصفحتنا ، وليس في الواقع على الصفحة.

### 2 - احصل على علامات Script لتسخير قوة مكتبات React و Babel

حسنًا ، يتم فحص العنصر الأول من قائمتنا. دعونا ننظر في البند الثاني. سنقوم بإعداد بيئة مطورنا عن طريق استخدام علامات النص لجلب React و Babel. هذه ليست بيئة مطور الحياة الحقيقية. من شأنه أن يكون تماما الإعداد معقدة. كما أنه سيترك لنا الكثير من رمز لوحة المرجل والمكتبات التي ستخرجنا عن موضوع تعلم أساسيات React. الهدف من هذه السلسلة هو الذهاب إلى بناء الجملة الأساسي لـ React والحصول على الحق في الترميز. سنستخدم علامات `<script>` لإدخال مكتبة React ومكتبة React DOM (لماذا) ومكتبة بابل.

 `<head> 
  ... 
  <!-- REACT LIBRARY --> 
  <script src="https://unpkg.com/react@15.5.4/dist/react.js"></script> 
  <!-- REACT DOM LIBRARY --> 
  <script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script> 
  <!-- BABEL LIBRARY --> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> 
  ... 
  <title>Time to React!</title> 
 </head> 
` 

أنت حر في استخدام إصدارات أكثر محدثة من هذه المكتبات لأنها تخرج. يجب ألا ينشئوا أي تغييرات مفاجئة للمحتوى الذي نغطيه.

ماذا نفعل هنا؟ يتم استخدام عنصر HTML `<script>` لتضمين أو كتابة برنامج نصي قابل للتنفيذ. تشير السمة "src" إلى ملفات البرامج النصية الخارجية لمكتبة React ومكتبة Reactdom ومكتبة Babel. هذا مثل إذا كان لديك ماكينة حلاقة كهربائية. إنه حرفياً ليس جيدًا لك بغض النظر عن مدى حبك الحلاقة الكهربائية ما لم تتمكن من توصيله بالحائط والحصول على الكهرباء. لن يكون رد فعلنا الذي سنكتبه جيدًا إذا لم يتمكن متصفحنا من توصيل هذه المكتبات لفهم وتفسير ما نحن بصدده. هذه هي الطريقة التي سيحصل بها تطبيقنا على قوة React ، سيكون كيف ندخل React into the Dom. السبب في أن لدينا React و ReactDOM كمكتبتين مختلفتين هو أن هناك حالات استخدام مثل React Native حيث أن العرض إلى DOM غير مطلوب لتطوير الجوال ، لذلك تم تقسيم المكتبة إلى أشخاص لاتخاذ القرار بما يحتاجون إليه اعتمادًا على على المشروع الذي يعملون عليه. نظرًا لأننا سنحتاج إلى رد الفعل الخاص بنا لجعله في DOM ، فسنستخدم كلا النصبين. إن Babel هي الطريقة التي نستفيد بها من برنامج ECMA النصي إلى ما وراء ES5 ونتعامل مع أمر يسمى JSX (جافا سكريبت بلغة XML) والذي سنستخدمه في React. سنلقي نظرة أعمق على سحر بابل في درس قادم :) حسنًا ، لقد أكملنا الخطوتين 1 و 2. لقد أعددنا شفرة لوحة الغلاية وننشئ بيئة مطورنا.

### 3 - تتفاعل مع DOM

ستتمثل خطوتنا التالية في اختيار موقعنا ضمن DOM الذي نرغب في عرض محتوى التفاعل فيه. واستخدام علامة نصية أخرى لمحتوى React الخاص بنا داخل الجسم. بشكل عام ، كعمل فصل جيد للمخاوف ، سيكون هذا في ملفه الخاص ثم يرتبط بوثيقة html هذه. سنفعل ذلك لاحقًا في الدروس القادمة. في الوقت الحالي ، سنترك هذا يسكن داخل نص مستند html الذي نحن فيه حاليا. الآن سننظر في مدى سهولة اختيار مكان على DOM لتقديم محتوى React. سنذهب داخل الجسم. وأفضل الممارسات ليست مجرد إلقاء ردود الفعل في علامة النص التي سيتم عرضها ولكن لإنشاء عنصر منفصل ، غالباً ما يكون div ، يمكنك التعامل معه كعنصر جذر لإدخال محتوى React الخاص بك.

 `<body> 
  <div id="app">React has not rendered yet</div> 
 </body> 
` 

`<div>` عنصر `<div>` بسيطًا `<div>` معرفًا بـ "التطبيق". سنتمكن من استهداف هذا الموقع لإدراج محتوى React بطريقة تشبه إلى حد كبير الطريقة التي تستخدم بها CSS لاستهداف معرف لتصميم من اختيارك. سيتم عرض أي محتوى متفاعل ضمن علامات div مع معرف التطبيق. في هذه الأثناء ، سنترك بعض النصوص ونقول "لم يظهر رد الفعل بعد" إذا رأينا ذلك عندما نعاين صفحتنا ، فهذا يعني أنه في مكان نفتقد فيه رد الفعل. الآن ، دعونا نمضي قدمًا وننشئ علامة نصيّة داخل جسمنا حيث سننشئها برد فعل لأول مرة. الصيغة التي نحتاج إليها لعلامة النص البرمجي هي إضافة سمة "type". هذا يحدد نوع الوسائط للبرنامج النصي. في رأينا استخدمنا خاصية src التي تشير إلى ملفات البرامج النصية الخارجية لمكتبة React ومكتبة Reactdom ومكتبة بابل.

 `<body> 
  <div id="app">React has not rendered yet</div> 
  <script type="text/babel"> 
  </script> 
 </body> 
` 

"نوع" البرنامج النصي الذي نستخدمه سنقوم بلفه بين علامتي اقتباس وضبطه على `"text/babel"` . سنحتاج إلى هذه القدرة لاستخدام babel على الفور ونحن نعمل مع JSX. أولاً ، سوف نعرض React على DOM. `ReactDOM.render()` الأسلوب `ReactDOM.render()` للقيام بذلك. ستكون هذه طريقة ، وتذكر أن الطريقة هي مجرد وظيفة مرتبطة بجسم ما. هذه الطريقة سوف تأخذ اثنين من الحجج.

 `<body> 
  <div id="app">React has not rendered yet</div> 
  <script type="text/babel"> 
  ReactDOM.render(React What, React Where); 
 </script> 
 </body> 
` 

الحجة الأولى هي "ماذا" من رد الفعل. الوسيطة الثانية هي "المكان" للموقع الذي تريد وضعه في DOM. لنبدأ من خلال استدعاء طريقة ReactDOM.render () الخاصة بنا. أول حجة لدينا ستكون JSX لدينا.

 `<body> 
  <div id="app">React has not rendered yet</div> 
  <script type="text/babel"> 
  ReactDOM.render( 
    <h1>Hello World</h1>, 
    React Where 
  ); 
 </script> 
 </body> 
`](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) 

[](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)[حالة رد فعل المستندات الرسمية](https://reactjs.org/docs/introducing-jsx.html) : "بنية صيغة مضحكة هذه ليست سلسلة ولا HTML. يطلق عليه JSX ، وهو امتداد لغوي ل JavaScript. نوصي باستخدامها مع React لوصف ما ينبغي أن تبدو عليه واجهة المستخدم. قد تذكرك JSX بلغة القالب ، ولكنها تأتي مع القوة الكاملة لجافا سكريبت. JSX تنتج React "elements". "

في كثير من الأحيان ، JSX يخاف الناس من المطورين لفترة من الوقت لأنه يبدو مثل HTML. في سن مبكرة جدا يتم تدريس المطورين فصل المخاوف. HTML لها مكانها ، CSS لها مكان وجافا سكريبت لديها المكان. يبدو JSX لطمس الخطوط. إنك تستخدم ما يشبه HTML ولكن كما يقول Facebook يأتي بكامل قوة JavaScript.

هذا يمكن أن يثير غضب من قدامى المحاربين الكثير من الدروس المستفادة تبدأ دون JSX التي يمكن أن تكون معقدة للغاية. لن نفعل ذلك. نظرًا لأن هذه الدورة موجهة نحو من هم صغارًا جدًا في حياتهم المهنية ، فقد لا تجلب هذه العلامات الحمراء عندما ترى هذه الجملة.

و JSX هو مجرد حقا بديهية. ربما يمكنك قراءة هذا الرمز بسهولة تامة ورؤية أن هذه العلامة ستكون أكبر علامة نصية تعرض النص "Hello World". لا غموض وجميل وواضح. الآن ، دعونا نلقي نظرة على ما ستكون عليه حجتنا الثانية.

 `<body> 
  <div id="app">React has not rendered yet</div> 
  <script type="text/babel"> 
    ReactDOM.render( 
      <h1>Hello World</h1>, 
      document.getElementById("app") 
    ); 
  </script> 
 </body> 
` 

هذا هو المكان الذي نريد تقديم محتوى رد فعلنا إلى dom. من المحتمل أنك فعلت هذا عدة مرات في الماضي. سنكتب فقط في `document.getElementById()` . وسننتقل إلى حجة معرف التطبيق. وهذا هو عليه. سنستهدف الآن div بمعرّف التطبيق لإدخال محتوى رد فعلنا.

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

المضي قدما وفتح وحدة التحكم وإلقاء نظرة على "عناصر". يمكنك إجراء ذلك على جهاز Mac باستخدام الأمر + shift + j أو في نظامي التشغيل On Windows و Linux: Ctrl + Shift + J

إذا قمت بالنقر فوق علامة الرأس ، فيمكننا الاطلاع على مكتبات البرامج النصية التي قمنا بتضمينها. ثم يمكننا أن نحضر إلى جسد مستندنا. دعونا نضغط على div لدينا مع معرف "التطبيق". وعندما نفعل ، نرى علامة `<h1>` مع محتوى "Hello World".

[عرض قانون كامل هنا](https://github.com/robgmerrill/hello-react/blob/master/section-one/index.html)

أو

[!["شاهد](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)

[

### خلاصة

لذلك دعونا نفعل ملخص سريع. في علامة رأسنا أمسك علامات النصي ل Reactdom و Reactdom و Babel. هذه هي الأدوات التي يحتاجها متصفحنا في بيانات التعريف الخاصة به لقراءة الكود الخاص بنا و JSX بشكل خاص. بعد ذلك حددنا الموضع ضمن DOM الذي أردنا إدخال رد فعلنا من خلال إنشاء عنصر div مع معرف "التطبيق". بعد ذلك ، أنشأنا علامة نصي لإدخال شفرة React. استخدمنا الأسلوب ReactDOM.render () الذي يأخذ وسيطتين. إن "ما" محتوى React ، في هذه الحالة JSX ، والوسيطة الثانية هي "المكان" الذي تريد إدخال محتوى React فيه في DOM. في هذه الحالة هو الموقع مع معرف "التطبيق".

](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)

[كبديل لـ JSX ، يمكنك استخدام ES6 ومجمّع Javascript مثل Babel.](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) [https://babeljs.io/](https://babeljs.io/)

### معلومات اكثر:

*   [رد فعل الصفحة الرئيسية](https://reactjs.org/)
*   [دان أبراموف على تويتر](https://twitter.com/dan_abramov)
*   [رد فعل دروس في Egghead.io](https://egghead.io/browse/frameworks/react)

### مصادر

1.  ["نتائج استطلاع رأي المطور 2017".](https://insights.stackoverflow.com/survey/2017#technology-most-loved-dreaded-and-wanted-frameworks-libraries-and-other-technologies) _Stack Overflow._ Accessed: 28 أكتوبر ، 2017.