#react

إنشاء Combobox سهل الوصول إليه باستخدام React Aria (2026)

٢ يوليو ٢٠٢٦

قم ببناء combobox متاح بالكامل باستخدام React و React-aria-components 1.19: مع ربط ARIA صحيح، وتصفح بلوحة المفاتيح، ومجموعة اختبارات حقيقية باستخدام jest-axe و Testing Library.

#react #accessibility

كيفية إلغاء طلب Fetch في JavaScript (2026)

٢٩ يونيو ٢٠٢٦

إلغاء طلب fetch في JavaScript و React باستخدام AbortController: الإلغاء عند unmount، وإضافة مهلة زمنية باستخدام AbortSignal.timeout، والتعامل مع AbortError بأمان.

#abortcontroller #fetch api

React Hook Form + Zod: شرح عمل نماذج Type-Safe (2026)

٢٦ يونيو ٢٠٢٦

ابنِ نماذج React بنظام type-safe باستخدام React Hook Form 7 و Zod 4: إعداد zodResolver، و register مقابل Controller، وإصلاح type-error باستخدام z.coerce. كل الأكواد قابلة للتشغيل.

#react hook form #zod

TanStack Query Optimistic Updates: Rollback في

٢٤ يونيو ٢٠٢٦

التحديثات المتفائلة في TanStack Query (React Query) باستخدام useMutation: وcancelQueries، وsnapshot، وsetQueryData، والتراجع التلقائي عند فشل الطلب.

#tanstack query #react query

TanStack Form + Zod Validation في React (2026)

٢٢ يونيو ٢٠٢٦

ابني نماذج React type-safe باستخدام TanStack Form v1 و Zod: التحقق من صحة النموذج والحقول، فحوصات async، حقول array، وحالة submit. بدون adapter، كل شيء قابل للتشغيل.

#tanstack form #zod

دليل مكون النشاط من نيرد ليفل تك: التبويبات ذات الحالة (2026)

١٢ يونيو ٢٠٢٦

درس تطبيقي عن مكون Activity في React: الحفاظ على حالة التبويب (tab state) مع وضع الإخفاء، وإيقاف التأثيرات مؤقتاً، والتقديم المسبق لواجهة المستخدم المخفية. كود React 19.2 قابل للتشغيل، 2026.

#react #activity

React الـ ViewTransition مش شغال؟ كل الحلول (2026)

١٢ يونيو ٢٠٢٦

React الخاص بـ <ViewTransition> لا يقوم بالتحريك؟ الأسباب الأربعة الحقيقية — sync setState و DOM placement والتوفر في نسخة canary-only ودعم المتصفح — والحل لكل منها.

#react #view-transitions

دليل useEffectEvent: أوقف تكرار تشغيل الـ Effect (2026)

٨ يونيو ٢٠٢٦

دليل عملي لـ React useEffectEvent: إصلاح مشكلة الـ stale closures، ومنع إعادة تشغيل useEffect عند تغيير الـ props، والانتقال من useCallback. كود قابل للتنفيذ لعام 2026.

#react #useeffectevent

TanStack Router: معاملات بحث آمنة النوع باستخدام Zod (2026)

٤ يونيو ٢٠٢٦

التحقق من صحة معاملات البحث (URL search params) في TanStack Router باستخدام Zod: القيم الافتراضية، البدائل، برمجيات search middlewares الوسيطة، وملاحظة هامة حول محول Zod 4. دليل عملي لعام 2026.

#tanstack-router #zod

Next.js 16 مكونات Cache: دليل تعليمي للمستأجرين المتعددين (2026)

١ يونيو ٢٠٢٦

دليل إنتاج Next.js 16 لمكونات التخزين المؤقت (Cache) لأنظمة SaaS متعددة المستأجرين: مفاتيح تخزين مؤقت بنطاق المستأجر باستخدام use cache، وcacheTag لكل مستأجر، وcacheLife.

#next.js #cache-components

Next.js 16 شرح Optimistic UI: Server Actions

١٨ مايو ٢٠٢٦

دليل عملي للإنتاج: إطلاق optimistic UI في Next.js 16.2 مع React 19.2 باستخدام useOptimistic و useActionState و useFormStatus و rate limits و revalidatePath.

#nextjs #react

Next.js 16 شرح Streaming: Suspense + use cache

١٢ مايو ٢٠٢٦

شرح عملي لـ Next.js 16.2: بث Server Components باستخدام Suspense و loading.tsx، ثم تخزينهم مؤقتاً باستخدام use cache و cacheLife و updateTag في 2026.

#nextjs #react

Next.js من Pages Router إلى App Router: دليل انتقال لعام

٦ مايو ٢٠٢٦

دليل عملي لعام 2026: نقل تطبيق Next.js 16 من Pages Router إلى App Router — الـ codemods، والـ async params، والـ route handlers، وفخ الـ legacyBehavior.

#nextjs #app-router

بناء تطبيقات ويب أذكى: دمج AI مع Next.js

٤ فبراير ٢٠٢٦

تعلم كيفية دمج AI في تطبيقات Next.js مع أمثلة عملية، ورؤى الأداء، وأفضل الممارسات الجاهزة للإنتاج.

#Next.js #AI

إتقان Next.js أنماط App Router لتطبيقات ويب قابلة للتوسع

١٨ ديسمبر ٢٠٢٥

غوص عميق في أنماط Next.js App Router الحديثة — من التخطيطات ومكونات الخادم إلى جلب البيانات، وحدود الأخطاء، وضبط الأداء للتطبيقات الجاهزة للإنتاج.

#Next.js #React

React Server Components: مستقبل الـ Rendering السلس

١٧ ديسمبر ٢٠٢٥

نظرة عميقة على React Server Components—كيف تعمل، ولماذا هي مهمة، وكيفية استخدامها بفعالية لتطبيقات ويب أسرع وأكثر قابلية للتوسع.

#React #Server Components

إتقان التطوير Full Stack باستخدام MERN Stack

٢٨ نوفمبر ٢٠٢٥

- دليل عملي معمق لبناء وتوسيع وتأمين تطبيقات Full Stack باستخدام MongoDB وExpress وReact وNode.js — من العمارة إلى النشر.

#MERN #Full Stack

أدوات المبرمج الحديث: Python، JavaScript، Go و Rust

٤ أكتوبر ٢٠٢٥

- نظرة عميقة وعملية للغات البرمجة الأكثر تأثيرًا في الوقت الحاضر—Python، JavaScript، TypeScript، React، Node.js، Go، و Rust—وكيف يشكل البرمجيات مفتوحة المصدر وأدوات المطورين الأفضل الهندسة البرمجية الحديثة.

#python #javascript

>-

٢٧ سبتمبر ٢٠٢٥

- استكشف كيف تشكل Python، JavaScript، TypeScript، React، Node.js، Go، و Rust التطوير العصري. نظرة مفصلة وسهلة الفهم للنظم البيئية مفتوحة المصدر وأدوات المطورين.

#python #javascript

داخل البرمجة الحديثة: Python، TypeScript، Rust ونبض البرمجيات مفتوحة المصدر

٢٠ سبتمبر ٢٠٢٥

- غوص عميق للمطور في كيفية تشكيل لغات اليوم الرائدة—Python، JavaScript، TypeScript، React، Node.js، Go، و Rust—للنظام البيئي مفتوح المصدر وأدوات المطورين الحديثة.

#python #javascript

إتقان تطوير الواجهة الأمامية: دليل شامل

١٨ سبتمبر ٢٠٢٥

- استكشف عالم تطوير الواجهة الأمامية، من الأساسيات إلى التقنيات المتقدمة، وتعلم كيفية إنشاء تطبيقات ويب مذهلة.

#Frontend Development #Web Development

فهم React: دليل شامل لبناء تطبيقات الويب الحديثة

١٨ سبتمبر ٢٠٢٥

- انغمس بعمق في React، وهي مكتبة JavaScript الشهيرة لبناء واجهات المستخدم. تعرف على مفاهيمها الأساسية، وميزاتها، وكيفية إنشاء تطبيقات الويب الديناميكية.

#React #JavaScript

JSX و React: تعلم كيفية كتابة كود قابل للصيانة – دليل مختصر

تم التحديث: ١٦ سبتمبر ٢٠٢٥

- دليل مختصر لـ JSX و React لعام 2025 يغطي المكونات، الخصائص، الحالة، الخطافات، الأحداث، العرض الشرطي، وممارسات البرمجة القابلة للصيانة.

#React #JSX

فهم العرض الشرطي في React (دليل 2025)

تم التحديث: ١٥ سبتمبر ٢٠٢٥

- تعلم كيفية تنفيذ العرض الشرطي في React باستخدام المعاملات المنطقية، والتعبيرات الشرطية، وأفضل الممارسات للقراءة وسهولة الصيانة.

#React #JavaScript

إزاي تكون أفضل في React إعادة استخدام الكود الجزء الأول

تم التحديث: ٢٧ مارس ٢٠٢٦

React إعادة استخدام الكود في 2026: custom hooks، و Server Components، و composition over inheritance، ومتى تتوقف تماماً عن اللجوء لـ HOCs و render props.

#react #code-reusability

إتقان مقابلة عمل React: أهم الأسئلة وأفضل الممارسات

تم التحديث: ٢٧ مارس ٢٠٢٦

تحضير مقابلة React 19 لعام 2026: Server Components، و Actions، و useActionState، والـ use() API، و ref-as-prop، و React Compiler مع إجابات نموذجية وفخاخ.

#react #interview-prep

أدوات تطوير الويب مع التركيز على git و Docker و React

تم التحديث: ٢٧ مارس ٢٠٢٦

مجموعة أدوات تطوير الويب الحديثة: سير عمل Git القابل للتوسع، وDocker لعمليات بناء قابلة للتكرار، وأنماط React التي تحافظ على سرعة التطبيقات — مع إعدادات عملية.

#git #docker

آثار جانبية في React موضحة باستخدام useEffect (دليل 2025)

تم التحديث: ١٥ سبتمبر ٢٠٢٥

- تعلم كيفية التعامل مع الآثار الجانبية في React باستخدام useEffect hook. يتضمن مصفوفات الاعتمادية، أمثلة وأفضل الممارسات لعام 2025.

#React #JavaScript

React Props و React State - دليل شامل (2025)

تم التحديث: ٥ مايو ٢٠٢٦

- دليل واضح حول React props مقابل state مع hooks والسياق والأمثلة وأفضل الممارسات لعام 2025.

#react #props