سنتعلم اليوم في هذا الدرس ما هي مكتبة React؟.
 |
| شعار React، صورة من: Meta Platforms، public domain via wikimedia commons. |
مكتبة أو وثائق React والتي يشار إليها أحيانًا باسم إطار عمل JavaScript الأمامي .. إنها مكتبة جافا سكريبت التي تم إنشاؤها بواسطة فيسبوك.
ما هو React؟:
تعد React أداة لبناء مكونات واجهة المستخدم الخاصة بتطبيقات الويب الحديثة، وربما تعد هي الأداة المفضلة لمعظم المطورين مقارنة مع منافسها الرئيسي AngularJS.
مهمة مكتبة React.JS هي أن يقوم بعرض التغييرات التي تتم على واجهة المستخدم لتظهر للمستخدم الذي يستخدم التطبيق أو المتصفح.
الإصدار الحالي من React.JS هو V18.0.0 (وقد صدر في أبريل 2022)، ويحتوي على أدوات متطورة مثلwebpack, Babel, ESLint.
ذلك في حين كان الإصدار الأول للمستخدمين قد حمل اسم (V0.3.0)، وتم طرحه في يوليو عام 2013، حيث احتفظت فيسبوك بملكيتها ولكنها جعلتها (مفتوحة المصدر) أمام الجميع.
بخلاف أنك تجد مجتمع كبير من المطورين الذين تناقشوا فيما بينهم من قبل عن أسئلة أو مشاكل قد تواجهك اثناء العمل، وبخلاف أنك نفسك تستطيع طرح أسئلة جديدة، فإن شركة فيسبوك نفسها لا تزال تساهم في هذا التطوير.
ومع ذلك لم تكن تلك هي المرة الأولى التي يستخدم فيها react، فمنذ عام 2011 تستخدمه فيسبوك في خاصية خلاصة الأخبار، عندما ابتكره مطور البرمجيات الشهير (جوردان والكي).
كيف يعمل React؟:
يقوم React بإنشاء نموذج كائن افتراضي أو (DOM) في الذاكرة بدلا من معالجة DOM الخاص بالمتصفح مباشرةً.
كما أن ما يغيره React فقط هو ما يحتاج إلى التغيير في الصفحة التي تظهر للمستخدم وليس أكثر من ذلك، مما يحل الكثير من مشكلات الأداء وأبرزها السرعة.
الفكرة الأساسية هنا أن react تمكن المبرمج من أن يقوم ببناء مكونات صغيرة ثم يجمعها معا لينتج بها في النهاية الواجهة الأمامية للتطبيق.
ماذا تحتاج لتتعلم react؟:
استخدام مكتبة React.JS تعد خطوة متقدمة في البرمجة.
من أجل أن تتعلمه لا يشترط أن تكون خبيرا أو محترفا في لغات HTML و CSS و جافا سكريبت .. لكن من الضروري أن تكون عارفا بأساسياتها ومحاورها العامة.
إنشاء المكونات وتداخلها:
إن التطبيقات في مكتوبة React مصنوعة من عدد من المكونات.
أما المكون فهو جزء من واجهة المستخدم، ويكون له مظهره الخاص به.
يمكن أن يكون هذا المكون صغيرًا مثل الزر، أو كبيرًا مثل الصفحة بأكملها.
جميع مكونات React هي وظائف بلغة جافا سكريبت .. مثال على ذلك:
function MyButton() {
return (
<button>I'm a button</button>
);
}
الآن، بعدما قمت بإعلان MyButton يمكنك تضمينه في مكون آخر:
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
}
ونلاحظ هنا أن <MyButton /> يبدأ بحرف كبير، إنها إحدي الطرق التي تعرف بها أن هذا أحد مكونات React.
هذه هي الطريقة التي نفرق بها بين React التي يجب أن تبدأ أسماء المكونات فيها بأحرف كبيرة، وبين علامات لغة HTML التي يجب أن تكون دوما بأحرف صغيرة.
