المُجدوِل وشبكة البيانات مكوّنان في React أيضًا، ضمن @needless-ui/react: بما لهما في Angular من ميزات ودعم للوحة المفاتيح وإمكانية وصول، وبورقة الأنماط نفسها ورخصة MIT نفسها. وبقية المكونات قادمة. ويتطلبان React 19، ويعملان مع Next.js App Router ومع Vite.
التثبيت
pnpm add @needless-ui/react @needless-ui/cssاستيراد الأنماط
لا تأتي المكونات بأي أنماط. استورد ورقة الأنماط مرة واحدة، من ملف CSS في تطبيقك.
/* app/globals.css in Next.js, src/index.css with Vite */
@layer reset, nui, app;
@import '@needless-ui/css';تعمل الطبقات كما في Angular: توضع أنماط إعادة الضبط في طبقة قبل nui، ومع Tailwind CSS توضع nui بين طبقة base في Tailwind وطبقة الأدوات (utilities) فيه، كما يوضّح دليل البدء.
المُجدوِل
لكل مكوّن نقطة دخول خاصة به. يعرض المُجدوِل الأحداث التي تمرّرها إليه في events، ويُبلغك حين ينقل المستخدمون حدثًا أو يختارون وقتًا لحدث جديد: فأنت من يحتفظ بالأحداث.
شبكة البيانات
صِف columns خارج المكوّن، حتى لا تُعيد الشبكة عملها مع كل عرض. ويستدعي كل تعديل onRowsChange بالصفوف الجديدة، أما الدوال، مثل التصدير إلى Excel، فتجدها على ref الشبكة.
API بمصطلحات React
تتبع مكونات React المواصفات نفسها التي تتبعها مكونات Angular، لذا تتطابق واجهاتها البرمجية، ولكن بمصطلحات React. وتسرد صفحات API كل الخصائص (props): صفحة المُجدوِل وصفحة شبكة البيانات.
| Angular | React |
|---|---|
خاصية ثنائية الاتجاه، [(view)] | حالة: view مع onViewChange، أو defaultView ليحتفظ بها المكوّن بنفسه |
مُخرَج، (eventClick) | دالة رد نداء، onEventClick |
قالب، <ng-template nuiSchedulerEvent> | دالة ترسم، renderEvent |
دالة، scheduler.next() | دالة على ref، ref.current.next() |
children، للبيانات الشجرية | getChildren: إذ يحجز React الاسم children للعناصر |
locale، وقيمته الافتراضية LOCALE_ID الخاص بالتطبيق | locale، وقيمته الافتراضية en-US |
العرض من جانب الخادم
يُعرض المكوّنان على الخادم، ثم يُفعَّلان في المتصفح (hydration). وتُعرّفهما الحزمة بأنهما مكوّنا عميل (client components)، لذا يستطيع Server Component أن يعرضهما بخصائص قابلة للتسلسل، وتعمل الدوال المساعدة مثل nuiSchedulerFromIcs على الخادم. أما دوال رد النداء فلا يمكنها العبور إلى المتصفح: فالمكوّن الذي يأخذها يوضع داخل مكوّن عميل من صنعك، مثل المثالين أعلاه.
وما يتوقف على القارئ ينتظر المتصفح: خط الوقت الحالي في المُجدوِل، ومعرفة أيّ يوم هو اليوم. لذا أعطِ المُجدوِل defaultDate حين يعرضه خادم، لأن «اليوم» عند الخادم قد لا يكون «اليوم» عند القارئ.