مقدمة في مكتبة React JSReact Introduction

• React هي احد مكتاب لغة javascript واسعة الانتشار تستخدم لبناء واجهات مستخدم تفاعلية وسريعة لمواقع الويب وفي حالة استخدام react native فيمكنك ايضا بناء تطبيقات الهاتف.
• React هي مكتبة مفتوحة المصدر اي انها تستخدم بشكل مجاني.
• تساعد React على بناء واجهات مستخدم تصريحية من components قابلة للتركيب وإعادة الاستخدام؛ ولا يعني استخدامها اختفاء الأخطاء البرمجية.
• عند بناء التطبيقات باستخدام مكتبة react نقوم بعمل مجموعة من المكونات قابلة لإعادة الاستخدام ويمكن أن تتواصل عبر props والحالة المشتركة ثم نقوم بجمع كل هذه المكونات سويا لخلق واجهة مستخدم معقدة.
• كل تطبيق باستخدام مكتبة React يحتوي على الاقل على مكون واحد يطلق عليه  root component المكون الجذري وهذا المكون يمثل التطبيق بالكامل ويحتوي بداخله على child components مكونات الفرعية .
• تركّز React على بناء واجهات المستخدم. التوجيه routing يحتاج حلًا مناسبًا ضمن التطبيق أو إطار العمل، بينما يمكن إرسال طلبات HTTP بواجهة fetch الأصلية دون اشتراط مكتبة إضافية.
• بدلا من استخدام javascript native لعمل تطيبق يمكنك استخدام مكتبة react لعمل نفس التطبيق بطريقة اكفأ واسهل.
• طوّر Jordan Walke مكتبة React داخل Facebook، وأُتيحت كمكتبة مفتوحة المصدر في عام 2013.

• Virtual DOM
  تعمل مكتبة react js مع ميزة تسمى Virtual DOM وهي تمثيل افتراضي لشجرة DOM الحقيقية. عندما يتم تشغيل تطبيق react الخاص بك ، تقوم مكتبة react بإنشاء نسخة افتراضية من شجرة DOM. اذا حدث اي تغيير في state الحالة في أي جزء من التطبيق ، بدلاً من إعادة عرض شجرة DOM الحقيقية بأكملها ، تقوم react أولاً بتحديث النسخة الافتراضية من DOM. بعد ذلك تقارن ناتج التصيير الجديد بالناتج السابق لتحدد التغييرات المطلوبة قبل تطبيقها على DOM. ثم تقوم مكتبة  react js بتغيير العناصر التي تحتاج الى التغيير فقط في شجرة ال DOM الحقيقة. تعد Virtual DOM من الميزات التي تجعل مكتبة react سريعة ويمكن الاعتماد عليها بشكل كبير.

DOM هي إختصار إلي document object model لمزيد من المعلومات حول DOM قم بزيارة هذا الدرس.

• JSX  
  JSX هي اختصار لكلمة javaScript XML وهي طريقة تمكنك من كتابة اكواد شبيه باكواد لغة HTML باستخدم الجافا سكريبت وتسهّل قراءة بنية الواجهة. JSX امتداد لصياغة JavaScript يحتاج التحويل في أدوات البناء، ولا يضمن بحد ذاته تنفيذًا أسرع.
  
  
• React Native
  باستخدام react native عوضا عن components المكونات التي توفرها مكتبة react js يمكن بناء تطبيقات متوافقة مع انظمة التشغيل المختلقة مثل android – IOS.
  
  
• One Way Data Binding
  تنتقل props من المكوّن الأب إلى الأبناء. يحدّث المكوّن حالته عبر واجهات React، ويمكن رفع الحالة المشتركة إلى أقرب أب مشترك وتمرير معالج أحداث للأبناء. Flux نمط معماري اختياري، وليس مكوّنًا إلزاميًا في React ولا يشترط جمع حالة التطبيق كلها في نقطة واحدة.
  
  
• Declarative UI واجهة مستخدم تصريحية
  اي انها تجعل إنشاء واجهات المستخدم التفاعلية سهلا للغاية كما تجعل الكود اكثر قابلية للقراءة واسهل في اصلاح bugs الاخطاء البرمجية.
  

اليوم ، تتوفر العديد من أطر عمل ومكتبات JavaScript لبناء الواجهات (مثل Angular وReact) ، ولكن مع ذلك ، ظهرت react في السوق واكتسبت شعبية كبيرة.

 الاسباب التي تجعل من مكتبة react js شيئا لا غنى عنه في تعلم برمجة الويب:

• popularity: مكتبة react js من اشهر اطارات العمل المنتشرة بين المطورين ومن اكثرها طلبا في سوق العمل.

• enables building rich UI: تمكنك من بناء واجهة مستخدمة قوية وهذه ميزة في غاية الاهمية فكلما كانت واجهت المستخدم جيدة كلما كانت تجربة المستخدم في التصفح اكثر قابلية للنجاح.
• SEO-friendly: التطبيق الجيد هو التطبيق الذي تحبه محركات البحث ويسهل عليها ايجاده لكن React لا تضمن الفهرسة أو ترتيب البحث أو سرعة التحميل وحدها؛ يلزم محتوى وروابط قابلة للوصول، وتصييـر مناسب وبيانات وصفية وأداء جيد.
• productivity enhancement: تحسين الانتاجية هو احد الاسباب الرئيسية لتعلم مكتبة react js فهي توفر عليك الكثي من الوقت وذلك عن طريق الخصائص التي توفرلها لك مثل Virtual DOM التي سبق وتحدثنا عنها في هذا الدرس والتي بدورها تعمل على جعل موقعك اسرع في التصفح والتحميل.
• code stability : تعمل مكتبة react على جعل الكود الخاص بك اكثر استقرار وذلك بسبب اعتمادها على one-way data blinding تدفق بيانات احادي الاتجاه.
• multi-platforms: تجعلك react قادرا على بناء تطبيقات لمظم انظمة التشغيل مثل websites- android - IOS - VR.

تعتبر مكتبة react هي الاختيار المثالي في حال كنت تريد عمل واحد من هذه التطبيقات:

• code stability: تنظيم تدفق البيانات لتسهيل فهم الكود واختباره، دون ضمان خلوه من الأخطاء.
• single page application: انشاء تطبيقات مكونة من صفحة واحدة.
• interactive components: انشاء عناصر تفاعلية داخل اي واجهة مستخدم.
• SEO-Friendly web applications: بناء واجهات مع اختيار طريقة تصيير وروابط وبيانات وصفية مناسبة لمحركات البحث.
• Process of developing: إنشاء تطبيقات قابلة للتطوير في حال احتجت ان تضيف ميزات جديدة بشكل متكرر.
• responsive web pages: تُبنى الاستجابة لأحجام الشاشات باستخدام CSS مثل media queries؛ ويمكن الاستعانة بـBootstrap، ولا تنشئ React التجاوب تلقائيًا.
• social media apps: تستخدم react في التطبيقات التي تتطلب تفاعل كبيرا مع المستخدم مثل مواقع التواصل الاجتماعي.
• performance: باستخدام مكتبة react يمكن انشاء تطبيقات باداء سريع جدا تؤدي الى تحميل الصفحات بسرعة للمستخدمين.
  

angular هو احد اطارات عمل لغة javascript تم إنشاؤه باستخدام لغة Typescript ، بينما React مكتبة لبناء واجهات المستخدم؛ ويمكن كتابة مكوّناتها باستخدام JSX، وهو امتداد صياغة منفصل وليس اللغة التي تعرّف المكتبة نفسها.

يستخدم angular في الغالب لإنشاء تطبيقات معقدة على مستوى المؤسسات مثل التطبيقات المكونة من صفحة واحدة ، بينما يتم استخدام react لبناء مكونات واجهة المستخدم في أي تطبيق يتعامل مع بيانات متغيرة بشكل متكرر.

 الاختلافات والاشياء المتشابهة بين الاثنين:

• virtual DOM: يحدّث Angular قيم DOM المرتبطة ببيانات القالب عند تغيرها. أما React فتحسب الفرق بين ناتج التصيير الجديد والسابق، ثم تطبّق التغييرات اللازمة على DOM. لا تتطلب هذه العملية مقارنة شجرتين فعليتين كاملتين من DOM.  
• big apps: يمكن استخدام الاثنين في تطبيقات صغيرة أو كبيرة؛ وحجم الحزمة الفعلي يعتمد على الشفرة والاعتماديات وطريقة البناء.
• data binding: تدعم react تدفق بيانات احادي الاتجاه One-Way Data Binding فقط اما angular فتدعم تدفق بيانات احادي وثنائي الاتجاه Two-Way Data Binding.

اليك بعض اشهر المواقع المطورة باستخدام React Js

• Facebook.com
• Instagram.com
• Netflix.com
• Twitter.com
• Khanacademy.org
• Dropbox.com
• Cloudflare.com
• Reddit.com
• BBC.com
• Flipboard.com
• Postmates.com
• Airbnb.com
• Immugr.com

للبدء في تعلم مكتبة react js عليك اولا ان تدرس كلا من اللغات الآتية:

• HTML
• CSS
• JavaScript

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

React تعتمد على component المكونات وهنا أهم ما يجب معرفته حول المكونات Components بصفتها العنصر الأهم في react:

• البساطة: تتميز المكونات ضمن الرياكت ببساطة تكوينها، يُعرّف المكوّن عادةً كدالة مستقلة تعيد وصف الواجهة من props وstate. تجنّب تعريف مكوّن داخل تصيير مكوّن آخر لأن هويته ستتغير بين التصييرات.
  
  
• سهولة التحكم: تعتمد المكونات على الخصائص والحالات، أي أنه إذا كان العنصر زرًا مثلًا ونود استخدامه في مكان آخر؛ فعلينا فقط استدعاؤه بكتابة اسمه في المكان الواجب ظهوره فيه مع تمرير خاصية الاسم له دون الحاجة إلى أي كود إضافي، ولتغيير نص الزر يكتب المطوّر منطق تحديث الحالة ويربط النص بها؛ تغيّر الحالة لا يغيّر اسم المكوّن تلقائيًا.
  
  
• بناء تطبيقات كاملة من المكونات: يمكن فقط بالاعتماد على المكونات وتغيير حالتها وخصائصها بناء تطبيقات كاملة ومرنة، حيث يمكن إضافة أي كود JavaScript إلى الواجهة بمرونة وبرمجة ما يلزم من المكونات وهذا كل شيء.