---
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 (
);
};
const Component3 = () => {
return (
);
};
const Component1 = () => {
return (
);
};
ReactDOM.render(
,
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
`
سيؤدي هذا إلى التعليمة البرمجية التالية:
`
Document
`
يمكننا ملء عنوان "وقت الرد!"
لن يظهر هذا المحتوى في صفحة الويب الخاصة بك. سيكون أي شيء في قسم الرأس في ملف HTML عبارة عن بيانات تعريفية سيستخدمها متصفحنا لتفسير الشفرة في قسم النص الأساسي. سيكون هذا العنوان هو ما يظهر في علامة التبويب لصفحتنا ، وليس في الواقع على الصفحة.
### 2 - احصل على علامات Script لتسخير قوة مكتبات React و Babel
حسنًا ، يتم فحص العنصر الأول من قائمتنا. دعونا ننظر في البند الثاني. سنقوم بإعداد بيئة مطورنا عن طريق استخدام علامات النص لجلب React و Babel. هذه ليست بيئة مطور الحياة الحقيقية. من شأنه أن يكون تماما الإعداد معقدة. كما أنه سيترك لنا الكثير من رمز لوحة المرجل والمكتبات التي ستخرجنا عن موضوع تعلم أساسيات React. الهدف من هذه السلسلة هو الذهاب إلى بناء الجملة الأساسي لـ React والحصول على الحق في الترميز. سنستخدم علامات `
...
Time to React!
`
أنت حر في استخدام إصدارات أكثر محدثة من هذه المكتبات لأنها تخرج. يجب ألا ينشئوا أي تغييرات مفاجئة للمحتوى الذي نغطيه.
ماذا نفعل هنا؟ يتم استخدام عنصر HTML `
React has not rendered yet
React has not rendered yet
React has not rendered yet