بناء مكونات React مع حالات تحميل صحيحة، ومعالجة الأخطاء، وتعليقات المستخدم يُعد أمراً صعباً وغالباً ما يؤدي إلى تجربة مستخدم مربكة. يوفر هذا النمط أنماط واجهة مستخدم مجرّبة للتعامل مع العمليات غير المتزامنة، وإظهار التعليقات المناسبة، وإنشاء تجارب مستخدم سلسة.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "react-ui-patterns". كيف أُظهر حالات التحميل بدون وميض عند إعادة جلب البيانات؟
النتيجة المتوقعة:
استخدم النمط: أظهر مؤشر التحميل فقط عند التحميل وعدم وجود بيانات. هذا يمنع الوميض عند توفر البيانات المخبأة. مثال: if (loading && !data) return <Skeleton />;
استخدام "react-ui-patterns". ما هي الطريقة الصحيحة للتعامل مع الأخطاء في React؟
النتيجة المتوقعة:
أظهر الأخطاء دائماً للمستخدمين مع رسائل واضحة. استخدم تسلسلاً هرمياً: أخطاء مضمنة للنماذج، إشعارات للأخطاء القابلة للاسترداد، لافتات لمشاكل مستوى الصفحة، وشاشات خطأ كاملة للإخفاقات غير القابلة للاسترداد.
استخدام "react-ui-patterns". كيف يجب أن أتعامل مع حالات الأزرار أثناء تقديم النموذج؟
النتيجة المتوقعة:
عطّل الزر أثناء العملية غير المتزامنة وأظهر مؤشر تحميل. هذا يمنع التقديم المكرر ويعطي المستخدمين تعليقاً بأن إجراءهم قيد التنفيذ.
التدقيق الأمني
آمنStatic analysis flagged 33 potential issues (external_commands, weak_crypto, system_reconnaissance), but manual review confirms all are false positives. The backticks detected are TypeScript template literals in code examples, not shell commands. No cryptographic code or system reconnaissance tools exist. This is a pure documentation skill containing only React UI pattern examples with no executable code, network calls, or file system access.
درجة الجودة
ماذا يمكنك بناءه
بناء مكونات React مدعومة بالبيانات
عند إنشاء مكونات تجلب البيانات من واجهات برمجة التطبيقات، طبق حالات التحميل والخطأ والفارغة المناسبة وفقاً للأنماط المعمول بها.
معالجة تقديم النماذج
عند تطبيق نماذج ذات تقديم غير متزامن، تأكد من تعطيل الأزرار أثناء التقديم وإظهار تعليقات تحميل مناسبة.
تحسين تجربة المستخدم
عند إعادة هيكلة كود React الحالي للقضاء على ومضات التحميل المربكة والأخطاء المخفية.
جرّب هذه الموجهات
أرني كيفية تطبيق حالة تحميل لمكون React يجلب البيانات. أريد تجنب إظهار مؤشر تحميل عند وجود بيانات مخبأة بالفعل.
أنشئ مكون حالة خطأ لـ React يُظهر رسالة الخطأ ويتضمن زر إعادة محاولة. كيف يجب دمج هذا مع Apollo أو React Query؟
اكتب نمط تقديم نموذج في React يعطل زر التقديم أثناء التغيير، ويظهر مؤشر تحميل، ويعرض إشعارات نجاح أو خطأ.
ابنِ مكون React كامل يتعامل مع جميع حالات واجهة المستخدم: التحميل (مع هيكل عظمي)، الخطأ (مع إعادة محاولة)، فارغ (مع دعوة للعمل)، والنجاح (مع عرض البيانات).
أفضل الممارسات
- لا تظهر واجهة مستخدم قديمة - يجب أن تظهر مؤشرات التحميل فقط عندما لا توجد بيانات للعرض
- أظهر الأخطاء دائماً للمستخدمين - لا تبتلع الأخطاء بصمت بدون تعليقات
- عطّل الأزرار أثناء العمليات غير المتزامنة لمنع التقديم المكرر
تجنب
- إظهار مؤشر التحميل كلما كان التحميل صحيحاً، بغض النظر عما إذا كانت هناك بيانات مخبأة
- التقاط الأخطاء وتسجيلها فقط في وحدة التحكم بدون إظهار تعليقات للمستخدم
- السماح للمستخدمين بالنقر على تقديم عدة مرات أثناء تقديم النموذج