يُعدّ إطار العمل الشهير React من اﻹطارات التي تعتمد على لغة JavaScript، ولذلك سيكون من اﻹلزامي عليك الحصول على معرفة جيدة بلغة جافاسكربت (خصوصا مفاهيم ES6 الحديثة) قبل الخوض والشروع في تعلّم رياكت.

يُغطي هذا الدرس نحو 20% من مفاهيم جافاسكربت، إلّا أن هذه الـ 20% وعلى قلتها إلا أنها تُمثّل الغالبية الساحقة -بما يصل إلى 80%- مما سوف تحتاج إليه في مشروعك!

البرمجة الكائنية والكلاسات في ES6

تقدم جافاسكربت الحديثة -متمثلة في ES6 وما بعدها- بُنىً جديدة مشابهة لما يستخدم في اللغات التي تدعم مفهوم البرمجة الكائنية (Object-oriented) مثل لغتي جافا وبايثون؛ إذا كنتَ لا تعرف ما هي الكلاسات، فالكلاس ما هو إلا مجرّد قالب عامّ يمكن من خلاله استنساخ وخلق العديد من الكائنات (مثلا السيارة هي كلاس والكائنات المخلوقة منها هي “مرسيدس، تويوتا، فورد، نيسان” )،  وتكتب الـ Classes في ES6 كما يأتي:

class Developer {
constructor(name){
this.name = name;
}

hello(){
return 'Hello World! I am ' + this.name + ' and I am a web developer';
}
}

في الكود أعلاه، قمنا بإنشاء كلاس أو صنف يسمى Developer بحيث يمكن استخدامه لخلق كائنات جديدة منه، لنقم بخلق كائن منه:

var ali = new Developer('Ali');
ali.hello(); // Hello World! I am Ali and I am a web developer

لقد خلقنا كائنًا جديدًا أسميناه ali، وبمجرد استعمال الكلمة المحجوزة new متبوعة باسم الكلاس فإنه سوف يتم استدعاء مُمهد القيم (Constructor)، حيث يقوم الكونستراكتور بتمهيد وإعطاء قيمة افتراضية للكائن بمجرد خلقه، وقد أخبرناه أن القيمة الافتراضية التي نريد أن نمررها هي ‘Ali’، تمّت عملية الخلق.

في السطر الثاني وبعد الانتهاء من خلق الكائن، حان وقت استخدامه؛ يمكننا اﻵن كتابة اسم الكائن متبوعًا باسم الدالة -وهي في حالتنا hello– وعليه سيتم تنفيذ تلك الدالة وإرجاع القيمة المطلوبة، حيث سيكون الناتج: Hello World! I am Ali and I am a web developer

وراثة الكلاسات

يمكن للكلاس أن يرِث من كلاس آخر متغيراته و دواله، وكما في البشر، بمجرد أن يرث كلاس آخر فإنه يحصل على كافة سماته ويضيف إليها سماته الجديدة التي سيتم تعريفها لاحقًا، لاحظ المثال:

class ReactDeveloper extends Developer {
installReact(){
return 'installing React .. Done.';
}
}

var nathan = new ReactDeveloper('Nathan');
nathan.hello(); // Hello World! I am Nathan and I am a web developer
nathan.installReact(); // installing React .. Done.

لقد عرّفنا كلاسا جديدا اسمه ReactDeveloper قام بوراثة الكلاس Developer الذي عرفناه سابقا.

حيث تستخدم الكلمة extends لوراثة الكلاسات، ويُطلق على الكلاس الوارث اسم Sub-class (الابن)، ويُطلق على الكلاس الموروث Parent (اﻷب) أو Super Class (الكلاس اﻷعلى)، ويستطيع الابن أن يقوم بعمل override للدوال الموجودة في اﻷب (أي يستطيع أن يعدّل على محتواها الداخلي)، لاحظ المثال:

class ReactDeveloper extends Developer {
installReact(){
return 'installing React .. Done.';
}

hello(){
return 'Hello World! I am ' + this.name + ' and I am a REACT developer';
}
}

var nathan = new ReactDeveloper('Nathan');
nathan.hello(); // Hello World! I am Nathan and I am a REACT developer

لعلك لاحظت أن الدالة hello التي ورثناها من الكلاس اﻷب Developer قد قمنا بالتعديل على محتواها في الكلاس الابن ReactDeveloper.

تعريف المتغيرات عبر Let و Const

أنت تعلم أن الكلمة المحجوزة var في جافاسكربت تقوم بتعيين المتغير ليكون عالميًا (globally) بحيث يُرى من كل المكان ولا يكون محصورًا في مجال معين (Scope).

تقدّم لنا ES6 كلمتان جديدتان هما let وconst لحل هذه المشكلة، بحيث يمكن للمتغير خاصتك أن يكون محليا (Local) وغير قابل للوصول سوى ضمن نطاق معين.

ولكن ما الفرق بينهما؟ كلاهما يؤديان الوظيقة المذكورة، إلا أن الكلمة const تعني أن المتغير لا يمكن تعديل قيمته أبدًا بعد تعريفها (ثابت)، بعكس let.

الدالة السهمية (Arrow Function)

لقد استُخدمت الدالة السهمية على نطاق واسع في بعض لغات البرمجة، ﻷنها تجعل اﻷكواد البرمجية قصيرة وموجزة، وعالية المقروئية (Readability).

في المثال التالي لاحظ الفرق بين الدالة الاعتيادية والدالة السهمية:

// regular function
const testFunction = function() {
// content..
}

// arrow function
const testFunction = () => {
// content..
}

إذا كانت الدالة خاصتك تحوي بارميترًا واحدًا فيمكنك حذف اﻷقواس () :

const testFunction = (firstName, lastName) => {
return firstName+' '+lastName;
}

const singleParam = firstName => {
return firstName;
}

اﻹرجاع الضمني

إذا كانت دالتك السهمية سطرًا واحدًا فيمكنك إرجاع قيمة بدون داعٍ لاستخدام الكلمة return ولا حتى استخدام اﻷقواس المعقوفة {} :

const testFunction = () => 'hello there.';
testFunction();

استخلاص الكائنات والمصفوفات

من المميزات الجديدة والجميلة في جافاسكربت، هي القدرة على استخلاص جزء من الكائن أو المصفوفة ومن ثم وضعه في متغير (Destructing assignment for arrays and objects).

لاحظ الكود التالي:

const developer = {
firstName: 'Nathan',
lastName: 'Sebhastian',
developer: true,
age: 25,
}

//destructure developer object
const { firstName, lastName } = developer;
console.log(firstName); // returns 'Nathan'
console.log(lastName); // returns 'Sebhastian'
console.log(developer); // returns the object

كما رأيت، لقد استخلصنا firstName وlastName من الكائن developer وأسندناهما إلى متغيرين جديدين عرّفناهما، ولكن ماذا لو كنا نريد عدم الالتزام بنفس الاسم الموجود في الكائن؟ يمكن ذلك عبر المثال التالي:

const { firstName:name } = developer;
console.log(name); // returns 'Nathan'

تعمل عملية الاستخلاص أيضا مع المصفوفات (Arrays) :

const numbers = [1,2,3,4,5];
const [one, two] = numbers; // one = 1, two = 2

ويمكنك عمل تخطي (skip) لبعض العناصر بالطريقة التالية:

const [one, two, , four] = numbers; // one = 1, two = 2, four = 4

الدالّتان Map وFilter

تستعمل هاتان الدالتان بكثرة في تطبيقات رياكت وجافاسكربت عموما، من أجل معالجة البيانات.

على سبيل المثال، لنفرض أن لديك البيانات التالية آتية من السيرفر API:

const users = [
{ name: 'Nathan', age: 25 },
{ name: 'Jack', age: 30 },
{ name: 'Joe', age: 28 },
];

يمكننا عرض (render) هذه القائمة عبر الكود التالي:

import React, { Component } from 'react';

class App extends Component {
// class content
render(){
const users = [
{ name: 'Nathan', age: 25 },
{ name: 'Jack', age: 30 },
{ name: 'Joe', age: 28 },
];

return (
<ul>
{users
.map(user => <li>{user.name}</li>)
}
</ul>
)
}
}

يمكنك أيضًا القيام بعمل فلترة للبيانات:

<ul>
{users
.filter(user => user.age > 26)
.map(user => <li>{user.name}</li>)
}
</ul>

[devto]