مقدمة عن React الجزء 1

تعلم رياكت

مقدمة عن المفاهيم الاساسية في رياكت.

1- معنى React؟

React هي مكتبة JavaScript افتراضية وقوية ومرنة ومفتوحة المصدر تم تطويرها بواسطة Facebook في عام 2011. يأخذ نهجًا قائمًا على المكونات لبناء مكونات واجهة مستخدم قابلة لإعادة الاستخدام خصيصًا لتطبيقات الصفحة الواحدة. يتم استخدامه لتطوير طبقات العرض التفاعلية لتطبيقات الويب والجوال. تم إنشاؤه بواسطة Jordan Walke ، مهندس برمجيات في Facebook. تم نشره في الأصل في قسم موجز الأخبار على Facebook في عام 2011 ومنذ ذلك الحين تم استخدامه في منتجات WhatsApp و Instagram ، من بين أمور أخرى.

مقدمة عن React الجزء 1

2-ما هي خصائص React؟

أصبح إطار عمل React سريعًا أفضل إطار عمل بين مطوري الويب. الخصائص الرئيسية لـ React هي:

JSX
عناصر
ربط البيانات أحادي الاتجاه
DOM الظاهري
بساطة
أداء

3- ما هي مزايا React؟

مزايا React هي:

سهل التعلم والاستخدام
سهل في بناء تطبيقات الويب الديناميكية
مكونات قابلة لإعادة الاستخدام
تحسين الأداء
دعم الأدوات اليدوية
معروف بكونه صديقًا لكبار المسئولين الاقتصاديين
فائدة وجود مكتبة جافا سكريبت
نطاق اختبار الرموز

4- ما هي حدود React؟

حدود React هي:

الوتيرة العالية للتنمية
ضعف التوثيق
مشاهدة الجزء
JSX كحاجز

5- ما هو JSX؟

JSX لتقف على JavaScript XML. إنه امتداد React الذي يسمح لكتابة كود JavaScript يشبه HTML. يجعل ملف HTML سهل الفهم. يجعل ملف JSX تطبيق React قويًا ويعزز أدائه. يوفر لك JSX كتابة صيغة تشبه XML في نفس الملف حيث تكتب كود JavaScript ، ثم يقوم المعالج المسبق (على سبيل المثال ، transpilers مثل Babel) بتحويل هذه التعبيرات إلى كود JavaScript فعلي. تمامًا مثل XML / HTML ، تحتوي علامات JSX على اسم علامة وسمات وأطفال.

مثال

الكود

class App extends React.Component {
render() {
return(
<div>
<h1>Hello World</h1>
</div>
)
}
}

في المثال أعلاه ، يعود النص الموجود داخل علامة <h1> كوظيفة JavaScript إلى وظيفة العرض. بعد التحويل البرمجي ، يصبح تعبير JSX دالة JavaScript عادية ، كما هو موضح أدناه.

الكود

React.createElement("h1", null, "Hello World");

6- لماذا لا تستطيع المتصفحات قراءة JSX؟

لا تستطيع المتصفحات قراءة JSX مباشرة لأنها تستطيع فقط فهم كائنات JavaScript ، و JSX ليس كائن JavaScript عادي. وبالتالي ، نحتاج إلى تحويل ملف JSX إلى كائن JavaScript باستخدام transpilers مثل Babel ثم تمريره إلى المتصفح.

7- لماذا نستخدم JSX؟

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

8- ماذا تفهم من خلال Virtual DOM؟

يعد DOM الظاهري كائن JavaScript خفيف الوزن وهو تمثيل في الذاكرة لـ DOM حقيقي. إنها خطوة وسيطة بين استدعاء وظيفة التجسيد وعرض العناصر على الشاشة. إنه مشابه لشجرة العقدة التي تسرد العناصر وخصائصها والمحتوى ككائنات وخصائصها. تُنشئ وظيفة التقديم شجرة عُقَد لمكونات React ثم تُحدِّث شجرة العقد هذه استجابةً للطفرات في نموذج البيانات الناتجة عن الإجراءات المختلفة التي يقوم بها المستخدم أو النظام.

9- شرح طريقة عمل Virtual DOM.

يعمل Virtual DOM في ثلاث خطوات:

عندما تتغير أي بيانات في تطبيق React ، تتم إعادة عرض واجهة المستخدم بالكامل في تمثيل Virtual DOM.

عرض واجهة المستخدم

الآن ، يتم حساب الفرق بين تمثيل DOM السابق و DOM الجديد.

حساب الفرق

3. بمجرد اكتمال العمليات الحسابية ، يتم تحديث DOM الحقيقي بالأشياء التي تم تغييرها فقط.

العمليات الحسابية

التالي