Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

Reactنظرة عامة

  • ما هي React؟
  • مميزات React
  • لمن تم إعداد هذا المرجع؟
  • هل أنا جاهز لتعلم React؟

ما هي React؟

ReactJs أو React كما هو متعارف عليها هي مكتبة ( Library ) مبنية بلغة جافاسكربت و تستخدم في بناء واجهة المستخدم ( User Interface ) للمواقع الإلكترونية التي هي بمثابة تطبيقات ويب ( Web Applications ) دينامكية و تفاعلية مثل شبكات التواصل الإجتماعي، مواقع العمل الحر، مواقع الشراء و البيع و غيرها.

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

الموقع الذي يتم بناؤه بواسطة React يسمى تطبيق من صفحة واحدة Single Page Application و التي يمكن اختصارها بالكلمة SPA.

مميزات React

فيما يلي الأسباب التي قد تجعلك تتعلمها و تعتمد استخدامها في بناء واجهة مشاريعك.


1- تستعمل Virtual DOM

عند استعراض أي صفحة ويب في المتصفح فإنه يقوم ببناء كائن يسمى DOM ليمثل كل عناصر الصفحة و هو بدوره يحتوي على دوال جاهزة يمكن استخدامها للوصول لأي عنصر فيها.

عند بناء تطبيق ويب بواسطة React فإنه ينشئ كائن DOM وهمي يسمى Virtual DOM ليمثل كل عناصر الصفحة و عندما يقوم المستخدم بإجراء أي تفاعل مع عناصر الصفحة فإنها تقوم أولاً بتحديث الكائن Virtual DOM و من ثم تقوم بشكل تلقائي بتطبيق التحديثات على الكائن DOM الخاص بالصفحة نفسها.

أي تغيير يحصل في الكائن Virtual DOM يتم تطبيقه بشكل تلقائي في الكائن DOM الخاص بالصفحة.


2- مبنية على المكونات

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


3- مكتبة و ليست فريموورك

React عبارة عن مكتبة فيها الوظائف الأساسية التي تحتاجها لبناء تطبيق الويب و يمكنك استخدام أي مكتبة من مكتبات جافاسكربت معها بالتوازي لإضافة المزيد من الوظائف. بينما لو كانت عبارة عن فريموورك ( Framework ) لكان عليك اتباع طرق محددة في فعل الأمور التي تحتاجها.


4- تطوير تطيبقات للمواقع و الهاتف

الشركة المطورة لمكتبة React قامت بتطوير فريموورك ReactNative و الذي يسمح بسهولة بإنشاء نسخة من مواقع الويب المبنية بواسطة React لتطبيقات للهاتف تعمل على نظامي Android و IOS.


5- الشعبية الهائلة

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


6- فرص العمل

عليها طلب كبير جداً في سوق العمل مقارنةً بغيرها مما يعني أن تعلمها سيزيد فرصك في الحصول على وظيفة بها.

لمن تم إعداد هذا المرجع؟

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

في الدرس التالي سنرشدك كيف تحمل الأدوات اللازمة لتبدأ بإنشاء مشروعك الأول بواسطة React.

هذا المرجع سيساعدك كثيراً في دراسة أي فريمووك مبني على React مثل الفريموورك Next و الفريموورك ReactNative.

هل أنا جاهز لتعلم React؟

قبل البدء بهذه الدورة يجب أن تكون متقن لأساسيات البرمجة و لغات الويب الأساسية HTML و CSS و JavaScript لأن هذه المكتبة تستخدم لتصميم الواجهات بهذه اللغات الثلاثة معاً. إن لم يسبق لك دراستهم فلا تقلق أبداً لأننا أعددنا مراجع شاملة لها يمكنك تعلمها تباعاً و من ثم العودة لهذه الدورة.

تعلم أساسيات البرمجة تعلم لغة HTML تعلم لغة CSS تعلم لغة JavaScript