React
-
كيفية بناء مكون مستمع لاختصارات لوحة المفاتيح قابل لإعادة الاستخدام في رياكت
إذا كنت مثلي وتحب الاختصارات، فأنت تعرف مدى إرضاء الضغط على بضع مفاتيح ومشاهدة السحر يحدث. سواء كانت Ctrl+C – Ctrl+V المألوفة التي يستخدمها المطورون “لإقراض الكود” 😉 من نماذج اللغة الكبيرة وصفحات الكود، أو الاختصارات المخصصة التي نقوم بإعدادها في أدواتنا المفضلة، فإن اختصارات لوحة المفاتيح توفر الوقت وتجعلنا نشعر وكأننا خبراء في الكمبيوتر. لا داعي للقلق! لقد فككت شفرة بناء المكونات التي تُفعّل وتستجيب لاختصارات لوحة المفاتيح. في هذه المقالة، سأعلمك كيفية إنشائها باستخدام React وTailwind CSS وFramer…
-
كيفية إنشاء وإرسال قوالب البريد الإلكتروني باستخدام React Email و Resend في Next.js
تعتمد تطبيقات البرمجيات الحديثة في كثير من الأحيان على التواصل عبر البريد الإلكتروني للتفاعل مع المستخدمين. يمكن أن ترسل رموز المصادقة أثناء محاولات تسجيل الدخول، ورسائل تسويقية، أو نشرات إخبارية، على سبيل المثال. وهذا يعني أن إشعارات البريد الإلكتروني عادةً هي الوسيلة الأكثر شيوعًا للتواصل مع المستخدمين. في هذا البرنامج التعليمي، ستتعلم كيفية تصميم قوالب بريد إلكتروني رائعة باستخدام React Email وإرسالها باستخدام Resend – منصة بريد إلكتروني بسيطة وقوية. المتطلبات المسبقة للاستفادة القصوى من هذا البرنامج التعليمي، يجب أن…
-
كيفية بناء تطبيقات متعددة اللغات باستخدام i18n في React
عملت مؤخرًا على مشروع مثير يتضمن إنشاء موقع ويب قادر على التبديل بين اللغات لجذب جمهور أوسع. هذا جعلني أفهم مفهوم “التعريب” بشكل أفضل، والذي عادة ما يتضمن تكييف المحتوى ليكون ذا صلة وسهل الوصول ومناسب للمستخدمين في لغات ومناطق مختلفة. لا يقتصر التعريب على ترجمة الكلمات، بل يتعلق بخلق تجربة تجعل المستخدمين يشعرون بأنهم في منزلهم، بغض النظر عن لغتهم. على سبيل المثال، تجعل المنصات العالمية مثل أمازون التبديل بين اللغات سلسًا لدرجة أنه يبدو سحريًا تقريبًا. بالإضافة إلى…
-
تعلم React من بوب زيرو
تعلم React يمكن أن يكون تحديًا في البداية، خاصةً عندما تكون غير متأكد من كيفية البدء أو تجد نفسك تحدق في محرر الشفرة الفارغ. ولكن الدورة الصحيحة يمكنها مساعدتك على فهم المفاهيم الأساسية ومساعدتك على اكتساب الخبرة العملية من خلال بناء مشاريع حقيقية. لقد قمنا للتو بنشر دورة على قناة YouTube الخاصة بـ freeCodeCamp.org تعلمك React الحديث بأكثر الطرق تشويقًا وعملية. تم إنشاء هذه الدورة بواسطة بوب زايرويل من Scrimba، وهي مليئة بأكثر من 170 تحديًا برمجيًا وستة مشاريع مثيرة.…
-
كيفية بناء لعبة بطاقات الذاكرة باستخدام React
مؤخرًا، بينما كنت أشاهد طفلتي 🧒🏻 وهي تلعب ألعاب الذاكرة المجانية على جهازها اللوحي، لاحظت أنها تُعاني من عدد كبير جدًا من الإعلانات والبنرات المزعجة. هذا دفعني لبناء لعبة مماثلة لها. نظرًا لاهتمامها الحالي بالأنمي، قررت إنشاء اللعبة باستخدام صور أنمي لطيفة. في هذه المقالة، سأقدم لك خطوات بناء اللعبة لنفسك أو لأطفالك 🎮. سنبدأ باستكشاف ميزات اللعبة، ثم سنغطي التكنولوجيا وهيكل المشروع، كلاهما بسيط. وأخيرًا، سنناقش الأمور المتعلقة بالتحسينات وضمان سلاسة اللعب على الأجهزة المحمولة 📱. إذا كنت ترغب…
-
بناء ونشر تطبيق HR باستخدام Refine
مقدمة في هذا البرنامج التعليمي، سنقوم ببناء تطبيق إدارة الموارد البشرية باستخدام إطار العمل Refine وننشره على منصة تطبيقات DigitalOcean. في نهاية هذا البرنامج التعليمي، سنمتلك تطبيق إدارة الموارد البشرية الذي يتضمن: صفحة تسجيل الدخول: تتيح للمستخدمين تسجيل الدخول كمدير أو موظف. يمكن للمديرين الوصول إلى صفحات الإجازات الشخصية و الطلبات، بينما يمكن للموظفين الوصول إلى صفحة الإجازات الشخصية فقط. صفحات الإجازات الشخصية: تتيح للموظفين طلب، عرض، وإلغاء إجازاتهم. ويمكن للمديرين أيضًا تعيين إجازات جديدة. صفحة الطلبات: يمكن لمديري الموارد…
-
كيفية بناء تطبيق CRUD باستخدام React و Convex
تعتبر عمليات CRUD أساس كل تطبيق، لذلك يتوجب أن تكون مهنياً فيها عندما تتعلم تكنولوجيات جديدة. في هذا التورية، سوف تتعلم كيفية بناء تطبيق CRUD باستخدام React و Convex. سنقوم بتغطية هذه ال operat ions عن طريق بناء مشروع يدعى مجموعات الكتب. في هذا المشروع، سيتمكن المستخدمون من إضافة كتب وتحديث حالتها بعد إنتهاء قراءتها. 目录 什么是Convex? 如何设置您的项目 如何创建架构 如何创建用户界面 如何创建CRUD函数 التنسيق التوصيف ما هو الأنحني المنحني؟ الأنحني المنحني هو منصة الباعات التي تبسيط تطوير الخلفية. يأتي الأنحني المنحني مع…
-
كيفية تمرير وسيطات إضافية إلى إجراءات خادم Next.js
التغيير الغير متزامن للبيانات ومعالجتها هو مهمة ضرورية في التطبيقات الويب الحديثة. قد ترغب في تنفيذ دالة غير متزامنة مستقلة على الخادم لتنفيذ مهام مثل حفظ البيانات في مخزن البيانات، إرسال البريد الإلكتروني، تحميل ملفات PDF، معالجة الصور، وهلم جرا. Next.js يوفر لنا Server Actions التي هي دوال غير متزامنة تنفذ على الخادم. يمكننا استخدام إجراءات الخادم لتغيير البيانات على الخادم، ولكن يمكن استدعاء إجراءات الخادم من كل من مكونات الخادم والعميل. إجراءات الخادم هي طريقة رائعة لمعالجة تقديم النماذج…
-
كيف تستخدم RxStomp مع React – بناء تطبيق محادثات باستخدام STOMP و React
STOMP هو Protocol بسيط للغاية ولكن قوي لإرسال الرسائل يتم تنفيذه من قبل خوادم معروفة مثل RabbitMQ و ActiveMQ و Apollo. إستخدام STOMP بالوسائط التي تتم مع الWebSocket هو Protocol بسيط ومن ثم يصبح خيار شعبي لإرسال الرسائل من خلال المتصفح الويب لأن بروتوكولات مثل AMQP قائمة بالحدود من قبل المتصفحات التي لا تسمح بالاتصالات الTCP. للاستخدام من خلال WebSocket لل STOMP يمكنك استخدام @stomp/stompjs ولكن هذا مع دالات معقدة و API معقد يهدف لأحداث تخصصية أكثر. بحسن الحظ ،…