مقدمة
React JS هي مكتبة مفتوحة المصدر للواجهات الأمامية. هدفها الرئيسي هو إنشاء واجهات مستخدم سريعة وجذابة لتطبيقات الويب والهواتف المحمولة.
طورت فيسبوك ReactJS، وهي تُضفي على مواقع الويب مظهرًا جذابًا، وينجذب إليها معظم المطورين. ومع ذلك، يرتكب العديد من المطورين خطأً بالتوجه مباشرةً إلى ReactJS (أو أي مكتبة أو إطار عمل آخر) دون فهم المتطلبات الأساسية لـ React JS. قد يُسبب لك التوجه مباشرةً إلى React العديد من المشاكل أثناء تعلم المكتبة وفي المقابلات.
المتطلبات الأساسية لتعلم ReactJS
HTML و CSS
هما لغتا HTML وCSS اللتان تُشكلان أساس الويب. تُسمى لغة HTML، أو لغة ترميز النص التشعبي، اللغة المستخدمة لوصف كل مكون من مكونات موقع الويب في متصفح الويب. ونتيجةً لذلك، يمكنك تحديد العناوين والفقرات والروابط والتضمينات وغيرها باستخدام HTML، مما يُساعد متصفحك على فهم كيفية تنظيم صفحة الويب التي تشاهدها.
لغة CSS، أو أوراق الأنماط المتتالية، هي ما يُعطي صفحات الويب مظهرها وتخطيطها. بمعنى آخر، تُستخدم CSS لإنشاء مواقع ويب جذابة بخطوط جميلة وألوان نابضة بالحياة وخلفيات خلابة، وحتى انتقالات وتأثيرات ثلاثية الأبعاد رائعة.
يبدأ كل مطور واجهة أمامية بـ HTML وCSS. لذا، بحلول الوقت الذي تتعلم فيه كيفية استخدام React، ستكون متمكنًا من البرمجة بـ HTML وCSS.
الشرط الأساسي الأول لتعلم Reactjs هو البدء بتعلم HTML وCSS. عليك معرفة كيفية إنشاء وسوم HTML الدلالية، وكتابة محددات CSS، واستخدام الأصناف، وتجاوزات CSS، وتنفيذ نموذج الصندوق، والانتقال إلى Border-Box وFlexBox، بالإضافة إلى HTML وCSS لتطبيقات الواجهة الأمامية وتطبيقات الويب المتجاوبة. .
أساسيات JavaScript وES6
يأتي الإصدار القادم من جافا سكريبت، ECMAScript 6، أو ES6، بالعديد من التغييرات والميزات الجديدة. سيصبح كودك أكثر حداثة وسهولة في القراءة بفضل الميزات الجديدة المذهلة وبنية جافا سكريبت الجديدة في ES6. يمكنك إنجاز المزيد بجهد أقل. سنتعرف على بعض الميزات الجديدة الرائعة في ES6، مثل الوحدات النمطية، وسلاسل القوالب، ومدمرات الفئات، ووظائف الفلاش.
قبل تعلم React، يجب عليك إتقان ES6، لأن الخطافات حلت محل المكونات القائمة على الفئات. ستلاحظ أن الخطافات تستخدم ميزات ES6 بشكل مكثف.
سيكون استخدام React أمرًا صعبًا بالنسبة لك إذا كنت لا تشعر بالراحة في كتابة وظائف الأسهم لأن العديد من الخطافات تتطلب منك تعشيش وظائف الأسهم داخل بعضها البعض، وهو ما قد يكون مربكًا.
نظرًا لأن React JS يدعم ES6 بشكل كامل، فإن تعلم وفهم ES6 سيحسن حياتك كمطور React JS وJavascript لأنه يجعل قراءة وكتابة كود React JS أسهل كثيرًا.
Git وCLI (واجهة سطر الأوامر)
عندما يتعلق الأمر بعملية تطوير البرمجيات، فإن Git يعد أداة مهمة وفعالة للغاية.
Git هو في الأساس نظام تحكم في الإصدارات موزع لتتبع تغييرات الكود المصدري أثناء تطوير التطبيقات. يمكن استخدامه لمراقبة تقدم أي نظام ملفات، حتى لو كان مصممًا لتسهيل التعاون بين المطورين.
تعلّم كيفية استخدام جميع الأوامر مثل push وpull وappend وcommit، إلخ، لأنك ستحتاجها لتتبع إصدار ملفاتك. بالإضافة إلى ذلك، تعلّم كيفية الدمج والتفرّع وإدارة تعارضات الدمج.
ستُستخدم واجهة سطر الأوامر (CLI) لمساعدتك في تنفيذ جميع الإجراءات في React. يُفترض أن تعتاد على استخدامها، إذ يُمكن استخدامها للعديد من المهام المختلفة، مثل تثبيت الحزم، واستخدام NPM، وبناء وتشغيل تطبيقات React، وغيرها.
مدير الحزم (Node + Npm)
عند استخدام ReactJS، من الضروري تثبيت عدة حزم برمجية أصغر حجمًا. حزم Node هي مكتبات JavaScript تحتوي على جميع الملفات الضرورية. الوحدات النمطية هي مكتبات JavaScript مُضمنة في مشاريع Node. تحتوي الحزم على عنصرين: ملفات JavaScript وملفات package.json. ستحتاج إلى مُثبّت جيد جدًا لإعداد هذه الحزم، إذ يُسهّل عليك تنزيل التطبيق وإعداده دون القلق بشأن التبعيات.
هنا يأتي دور مدير حزم Node (NPM) الذي يساعدك على تثبيت تطبيقات JavaScript وإدارتها. يمكنك تثبيت NPM بتثبيت Node.js أولاً. يتم إعداد NPM تلقائيًا عند تثبيت Node.js.
يمكنك تنزيل Nodejs من الموقع الرسمي. انقر هنا
أفضل طريقة لبدء إنشاء تطبيق جديد من صفحة واحدة في React هي استخدام Create React App، وهي بيئة ملائمة لتعلم React.
ستُنشئ الأوامر التالية مشروعًا نموذجيًا لك. يمكنك اتباع الخطوات التالية للبدء:
npx create-react-app my-app
cd my-app
npm startلذا، قبل البدء باستخدام React، يجب أن تكون على دراية بسجل NPM (مدير حزم العقد) وتقنيات تثبيت الحزم. باختصار، سجل NPM هو المكان الذي يلجأ إليه المطورون للحصول على البرامج التي يحتاجونها لتطويرها.
متغيرات ES6 – Let وConst
قبل ES6، كان المطورون يُعلنون عن المتغيرات باستخدام الكلمة المفتاحية var أو بدونها. لكن كل شيء تغير!
دخلت جافا سكريبت عصرها الحديث مع إصدار ES6، الذي أضاف كلمتين مفتاحيتين جديدتين لتعريف المتغيرات: let وconst. يختلف نطاق استخدامهما، والذي يُستخدم لتحديد مكان استخدام متغير ما وما إذا كان يمكن استخدامه. يمكن العثور على المتغيرات داخل دالة، أو داخل كتلة، أو خارج دالة وكتلة.
var: مستوى نطاق الوظيفة - لا تسمح هذه الكلمة الأساسية بالوصول إلى المتغيرات المعلنة داخل الوظائف من الخارج.
let: مستوى نطاق الكتلة - تجعل الكلمة الأساسية let المتغيرات قابلة للوصول خارج نطاق الإعلان.
ثابت: نطاق على مستوى الكتلة - تُشبه كلمة const المتغيرات المُعلنة باستخدام كلمة let. لا يُمكن تغيير قيمة الثابت بإعادة الإعلان أو إعادة التخصيص.
وظائف السهم
دوال الأسهم ميزة جديدة في إصدار ES6 من جافا سكريبت. بالمقارنة مع الدوال العادية، فهي تُسهّل كتابة الدوال.
- إنه يبسط الكود ويجعله أسهل للقراءة.
- أكبر فائدة لـ "هذا" السياقي هو أنه يزيل الحاجة إلى "ربط" الوظائف.
- يتم دعم وظائف السهم في الغالب بواسطة جميع المتصفحات الحالية.
let x = (x, y) => x * y;الصادرات والواردات
يمكننا إنشاء وحدات في جافا سكريبت باستخدام ES6. تحتوي الوحدة على فئات ووظائف ومتغيرات وكائنات. باستخدام وحدات جافا سكريبت، يمكنك تقسيم الكود إلى ملفات مختلفة، مما يُسهّل صيانة قاعدة الكود.
يمكننا استخدام أوامر التصدير والاستيراد لإتاحتها جميعًا في ملف آخر. يتم تصدير واستيراد العناصر في وحدة نمطية باستخدام الكلمتين المفتاحيتين export و import.
عامل الراحة والانتشار
يُمثَّل عاملا الانتشار والسكون في جافا سكريبت بثلاث نقاط (...). ومع ذلك، فإن هذين العاملين ليسا متماثلين تمامًا. يكمن الفرق الرئيسي بينهما في أن مصفوفة جافا سكريبت تُملأ بالقيمة المتبقية من مجموعة محددة من القيم التي يُقدِّمها المستخدم عند استخدام عامل السكون. أما الصيغة الموسعة فتُوسِّع عناصر قابلة للتكرار.
تفكيك بنية الكائن والمصفوفة
التفكيك هو عملية فكّ مكونات كائن أو مصفوفة. يتيح لك التفكيك تعديل العناصر وتبديلها بعد فكّها بناءً على الإجراء المطلوب.
يستخدم JavaScript الأقواس المربعة [] لتدمير المصفوفات، مما يسمح لنا بتخزين اسم المتغير المخصص لاسم المصفوفة التي تحتوي على العنصر.
عند تدمير أي كائن، نستخدم أقواسًا متعرجة مع الاسم الدقيق للكائن الذي يحتويه. بالنسبة للكائنات، على عكس المصفوفات التي تسمح باستخدام أي اسم متغير، لا يمكننا فتح العنصر إلا باستخدام اسم البيانات المخزنة.
حرفيات القالب
في ES6، يُقدّم Template Literal ميزات جديدة تُتيح لك إنشاء سلسلة نصية بمرونة أكبر من السلاسل الديناميكية. عادةً ما تُنشأ السلسلة باستخدام علامتي اقتباس مفردتين (') أو مزدوجتين (‘).
الحرفي هو سلسلة نصية تُمكّن من تضمين التعبيرات باستخدام علامات الاقتباس العكسية ( ). ويمكن استخدام استيفاء السلسلة النصية والسلاسل متعددة الأسطر معها. كانت هذه السلسلة تُعرف سابقًا باسم سلسلة النمط.
تصفية الخريطة وتقليلها
هناك ثلاث دوال للمصفوفات في جافا سكريبت: الخريطة، والاختزال، والتصفية. تُجري كلٌّ منها تحويلًا أو عملية على مصفوفة أثناء التكرار. وتُنتج كلٌّ منها مصفوفة جديدة استجابةً لمخرجات الدالة.
باستخدام طريقة map()، يتم إنشاء مصفوفة من خلال تطبيق دالة على كل عنصر من عناصر المصفوفة القديمة.
تُطبّق دالة filter() جملة شرطية على كل عنصر من عناصر المصفوفة. إذا كانت قيمة الشرط صحيحة، فسيتم دفع عنصر إلى مصفوفة المخرجات. أما إذا كانت قيمة الشرط خاطئة، فلن تُدفع العناصر إلى مصفوفة المخرجات.
تُختزل مصفوفات القيم إلى رقم واحد باستخدام دالة الاختزال (reduce()). يُمرَّر كل عنصر من عناصر المصفوفة عبر دالة اختزال لإنتاج القيمة الناتجة.
الفصول الدراسية
يُقدّم JavaScript ES6 ميزة جديدة تُعرف بالفئات. تُصمّم الكائنات باستخدام الفئات، ويمكن إنشاؤها من الفئات.
يمكن مقارنة هذه الفئة بنموذج أولي بسيط لمنزل. تحتوي على جميع المعلومات المتعلقة بالغرف والمداخل، إلخ. يمكنك بناء المنزل باستخدام هذا الوصف كدليل. الكائن هو المنزل. يمكننا إنشاء كائنات متعددة من نفس الفئة، لأنه يمكن بناء منازل متعددة باستخدام نفس المواصفات.
// creation of a class
class Home {
constructor(area) {
this.area = area;
}
}
// creation of an object
const home1 = New Home(100);ابدأ بدراسة المكونات الوظيفية. خطافات React أسهل استخدامًا وتتطلب أسطرًا برمجية أقل لتحقيق نفس الأهداف مقارنةً بنظيراتها القائمة على الفئات.
مع أن ليس كل شخص يعيد كتابة تطبيقاته باستخدام مكونات وظيفية، إلا أنه يجب عليك أيضًا معرفة مكونات الفئات. وذلك لأن معظم التطبيقات تُطوَّر باستخدام مكونات الفئات.
مقارنةً بالمكونات الوظيفية، يُعد بناء مكونات فئة React JS أكثر تعقيدًا. كجزء من فئة React JS، ستجد منشئين، وأساليب دورة حياة، ووظائف عرض، وحتى إدارة حالة لإدارة بياناتك.
هذا في المتصفح
في جافا سكريبت، تعمل الكلمة المفتاحية THIS للدالة بشكل مختلف قليلاً عن لغات أخرى. كما أنها تُميز بين الحالات الصارمة وغير الصارمة.
عادةً ما تُحدَّد قيمة THIS بناءً على كيفية استدعاء الدالة (التنفيذ أثناء التشغيل). عند استدعاء الدالة، قد تختلف قيمتها في كل مرة، إذ لا يمكن تعيينها بالتعيين أثناء التنفيذ. يمكن تعيين هذه الدالة بغض النظر عن كيفية استدعائها باستخدام دالة bind().
الوعود والانتظار غير المتزامن
في جافا سكريبت أو نود.جي إس، توجد طرق مختلفة لإدارة العمليات. تعمل العمليات المختلفة في وقت واحد أثناء التنفيذ غير المتزامن، ويتم التعامل مع مُخرَج كل عملية فور الوصول إليها.
الوعد في NodeJS يشبه الوعد في العالم الحقيقي. فهو يضمن تنفيذ الإجراء. يتحكم الوعد بما يحدث بعد وقوع حدث غير متزامن، ويسجل ما إذا كان قد تم تنفيذه أم لا.
يتم التعامل مع الوعود بطرق غير متزامنة باستخدام Async/Await. أُعيد تصميم الكود مؤخرًا لتسهيل قراءة الوعود واستخدامها. يُبسط هذا البرمجة غير المتزامنة بجعلها أقرب إلى الكود المتزامن.
لماذا تفضل الشركات Reactjs؟
- تتم كتابة المكونات بشكل أكثر سلاسة - يمكن زيادة كفاءة كود JavaScript باستخدام JSX.
- وبالإضافة إلى زيادة الكفاءة، فإنه يسهل الصيانة في المستقبل.
- يتم إجراء العرض بشكل أسرع من خلاله.
- يتضمن البرنامج أدوات تطوير مفيدة.
- تطبيق صفحة واحدة (SPA)
- يعتبر اتصال البيانات في اتجاه واحد، على غرار تدفق البيانات في اتجاه واحد.
- صديق لمحركات البحث
نتيجة
React JS هي مكتبة واجهة أمامية مفتوحة المصدر. الهدف الرئيسي من هذه المكتبة هو تصميم واجهات مستخدم سريعة وجذابة لتطبيقات الويب والهواتف المحمولة. المتطلبات الأساسية لـ ReactJS هي HTML وCSS، وأساسيات JavaScript وES6، وGit وواجهة سطر الأوامر (CLI)، ومدير الحزم (Node + Npm). كل ما تحتاج لمعرفته هو متغيرات ES6، ودوال الأسهم، والتصدير والاستيراد، ومعاملات الاستراحة والانتشار، ومدمرات الكائنات، والمصفوفات، والكلمة المفتاحية this في JavaScript. أبجدية الأنماط هي سلسلة نصية تُمكّن التعبيرات المضمنة باستخدام علامات الاقتباس العكسية. هناك ثلاث دوال للمصفوفات في JavaScript: map وreduce وfilter لإجراء عمليات أثناء التكرار على مصفوفة.
