إظهار: 1 - 5 من 5 نتائج
React Web Design

ما الفرق بين State و Props في React؟

في إطار العمل React لدينا مصطلحان شائعان هما State وProps فما هما وما الفرق بينهما؟ الـ Props هي القيم التي تمررها المكونات اﻵباء (Parents) إلى المكونات اﻷبناء (Children)، وأمّا الـ State فهي متغيرات يتم تمهيد قيمها (initialized) وإدارتها مباشرة بواسطة المكون ذاته، إنها مملوكة للمكوّن الذي عُرّفت فيه. شاهد هنا عندما نقوم داخل المكون اﻷب …

React Web Design

الفرق بين Container Components و Presentational Components في React

عادةً ما نقوم بتقسيم مكونات رياكت إلى نوعين: المكونات الحاوية Container Components ومكونات العرض والتقديم Presentational Components، فما الفرق بينهما؟ مكونات العرض والتقديم (أو المكونات اﻷبناء) كما يبدو من اسمها، فهي تهتم  بما سيظهر من مخرجات على الشاشة، وغالبًا لا تحتوي على حالات states باستثناء تلك الحالات المتعلقة بعملية العرض. أما المكونات الحاوية (أو المكونات …

JavaScript React Web Design

جافاسكربت لمطوري React

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

React Web Design

توثيق مكونات React عبر StoryBook

ما هو StoryBook؟ بحسب الموقع الرسمي، يسوّق StoryBook لنفسه على أنه أرضيّة أو ملعب لمكونات واجهة المستخدم (UI Components)، ويرتكز بشكل أساسي على كتابة القصص (Stories). ويمكننا القول أن StoryBook يستخدم مفهوم القصص لتوثيق كل ما يتعلق بحالات المكوّن (Component States)، وبالتالي فإن يفرز جميع الحالات الخاصة بالمكون في صورة قصص متتالية، إنه شكل من …

React Web Design

كتابة اختبارات لتطبيقات React عبر Jest

لقد أوشكت على إطلاق تطبيقك، ولم يتبقَ لك سوى بضع لمساتٍ نهائية، ولكن تبدأ اﻷخطاء بالظهور في مختلف أنحاء النظام، حسنًا لا مشكلة يمكنك إصلاحها بنفسك يدويا، ولكن سرعان ما تتفاقم تلك اﻷخطاء وتتضخم في أجزاء أخرى مختلفة من نظامك، ثم تعمّ الفوضى وتتبعثر اﻷمور، ما الحل؟ الحل يكمن في كتابة اختبارات لكل من هذه …