تطوير الويبمدفوع

Crafting Advanced React Components from Primitives

أتقن React وTypeScript وTailwind CSS لبناء تطبيقات ويب احترافية تنافس في سوق العمل الرقمي.

TypeScript

Tailwind CSS React

React

About This Course

عن الدورة

تُعد مكتبة Radix UI أحد أشهر مكتبات المُكونات (UI Component Libraries) في النظام البيئي لرياكت (React Ecosystem). تحتوي على أكثر من 25 مُكون بدائي مُنخفض المُستوى (low-level primitives) مليئة بالوظائف التي تجعل بناء مُكونات واجهة المُستخدم المُخصصة تجربة مُمتعة للغاية.

في هذه الدورة سنعيد بناء بعض المكونات من الصفر (مبدئيا تم تحديد 6 مكونات لإعادة بنائها، مع إمكانية التوسع في المستقبل) كما هو الحال في الكود المصدري الخاص بهم، وكأننا نحن من يبني مكتبة Radix UI. سنبدأ من مرحلة التخطيط، مرورا بالتطرق إلى أنماط التصميم (Design Patterns) التي تجعل المكونات مرنة وقابلة للتخصيص، بالإضافة إلى إجراء اختبارات الوحدات (unit tests) وتوثيق المكونات باستخدام Storybook. في النهاية، سنعتمد على هذه المكونات لبناء مكونات مخصصة مثلما هو الحال مع مكتبة Shadcn/ui.

ما هو المقصود بـ Low-Level Primitives؟

المكونات البدائية منخفضة المستوى (Low-Level Primitives) هي وحدات بناء أساسية تُستخدم لتكوين مكونات واجهة مستخدم أكثر تعقيدًا. فهي مكونات مصممة لتكون نقطة البداية لمعظم مكونات واجهة المستخدم الشائعة. توفر هذه المكونات الوظائف الأساسية المتوقعة، وتحتوي على ميزات الوصولية (Accessibility)، ولكنها تفتقر إلى الأنماط الجمالية الإضافية (unstyled). يمكن استخدام هذه المكونات كما هي (تكون في العادة مكونات غير مضبوطة uncontrolled أي يتم التحكم فيها عن طريق DOM وليس برمجياً) أو توسيعها باستخدام props و state الخاصة بك (تحويلها من uncontrolled إلى controlled والتحكم فيها برمجياً).

لماذا نعيد بناء المكونات من الصفر؟

لماذا في هذه الدورة نحن مُهتمون بإعادة بناء المُكونات من الصفر و ليس فقط تعلم استخدامهم و تخصيصهم:

فهم آلية عمل المكونات: اكتساب معرفة عميقة بكيفية عمل هذه المكونات داخلياً (under the hood) وكيف تم بناؤها لتصبح على ما هي عليه. لاحقًا، يمكنك استخدام مكونات Radix UI مباشرة لتوفير الجهد والوقت، ولكن معرفة كيفية عملها خلف الكواليس يتيح لك التعامل مع المشاكل أو تخصيصها بشكل أفضل عند الحاجة.
تعزيز القدرة على المساهمة في المشاريع مفتوحة المصدر: المساهمة في هذا المشروع يمكن أن يفتح فرص عمل مع الشركة التي تقف خلفه
اكتساب خبرة عملية في بناء مكتبة مكونات: هذه الخبرة ستكون مفيدة للغاية إذا دعت الحاجة في شركتك إلى إنشاء مكتبة مكونات خاصة بدلاً من الاعتماد على المكتبات الموجودة. ستتمكن من تنفيذ ذلك بثقة وكفاءة، مما يعزز من قيمة مهاراتك المهنية ويجعلك أكثر قدرة على تلبية احتياجات الشركة.

Learning Outcomes

ماهي مخرجات التعلم من هذه الدورة؟

اكتساب فهم عميق لـ Radix UI Primitives.

إعادة بناء وتخصيص مكونات Radix UI primitives.

دمج Radix UI Primitives لإنشاء مكونات React متقدمة.

تطبيق أفضل الممارسات في تصميم مكونات React القابلة لإعادة الاستخدام.

كتابة اختبارات وحدات (unit tests) للمكونات.

توثيق المكونات باستخدام Storybook.

استخدام الـ monorepo في تطوير البرمجيات (نموذج لإدارة الأكواد البرمجية حيث يتم تخزين العديد من المشاريع في مستودع واحد).

Requirements

مُتطلبات الدورة

معرفة مُسبقة بالمفاهيم الأساسية لكل من HTML, CSS, JavaScript.

معرفة بمُختلف مفاهيم رياكت الأساسية و المُتقدمة كـ state, props, components, hooks, refs, context api.

معرفة بـ Git & GitHub.

إعداد بيئة التطوير كـمُحرر الأكواد VS Code, مُتصفح كـ Google Chrome, الـ Node.js مُسطب على الجهاز.

Target Audience

لمن هذه الدورة؟

تم تصميم هذه الدورة لمطوري React الذين يرغبون في تطوير مهاراتهم في بناء المكونات إلى مُستوى أعلى:

مُطوري رياكت (مُستوى مُتقدم - Senior Level): إذا كنت تسعى لتوسيع معرفتك بتقنيات متقدمة أو تحديث وتعميق معرفتك بأنماط المكونات المتقدمة وتطبيق أفضل الممارسات في تصميم مكاتب مُكونات (ui components libraries)، ستجد في هذه الدورة تحديات جديدة وأفكار مبتكرة لتعزيز مهاراتك.

مُطوري رياكت (مُستوى مُتوسط - Intermediate Level): إذا كنت قد بدأت في اكتساب فهم و استيعاب أفضل لمفاهيم React من خلال التطبيق العملي على عدة مشاريع و تريد تحسين قدرتك على بناء مكونات أكثر كفاءة و مُرونة أو بناء مكتبة مُكونات بأفضل المُمارسات، ستوفر لك هذه الدورة الأدوات والمعرفة اللازمة لتحقيق ذلك من خلال اعادة بناء مكتبة المُكونات Radix UI Primitives.

مُطوري رياكت (مُستوى مُبتدأ - Junior Level): إذا كان لديك أساس متين في مفاهيم React الأساسية وتجربة في بناء تطبيقات React بسيطة، ستساعدك هذه الدورة في الانتقال إلى بناء مكونات بطريقة مُختلفة عن الذي أنشأته سابقا و التي تُستخدم في المشاريع الكبيرة و الحقيقية. قد تحتاج إلى تعلم مفاهيم إضافية لفهم جميع المحتويات بشكل كامل، لذا تأكد من أن لديك تأسيس قوي في مفاهيم رياكت.

Curriculum