مقدمة عن Remix
- Remix هو إطار عمل حديث مبني على React لتطوير تطبيقات الويب.
- مميزاته: سرعة، تنظيم الكود، تجربة مستخدم أفضل.
تجهيز بيئة العمل
- ثبّت Node.js على جهازك.
- أنشئ مشروع جديد باستخدام الأمر:
- npx create-remix@latest
بنية المشروع
- يوجد مجلدات رئيسية مثل: app، routes، public.
- app: يحتوي الأكواد الأساسية.
- routes: يحتوي الصفحات.
- public: يحتوي الصور والملفات الثابتة.
الصفحات والتنقل
- لإضافة صفحة جديدة، أنشئ ملف داخل routes مثلاً about.jsx.
- الصفحة تعرض تلقائيًا في الرابط /about.
تحميل البيانات (Loaders)
- يمكنك جلب بيانات من السيرفر باستخدام دالة loader.
- مثال:
- export async function loader() { return json({message: 'أهلاً بك'}); }
إرسال البيانات (Actions)
- تستخدم لإرسال بيانات من النماذج (Forms).
- مثال: إرسال مهمة جديدة في To-Do App.
إضافة التصميم (CSS)
- يمكنك إضافة CSS في المجلد app/styles.
- أو استخدام مكتبات مثل Tailwind CSS.
معالجة الأخطاء
- يمكنك إنشاء ErrorBoundary لعرض رسالة خطأ مخصصة.
- صفحة 404 تظهر عند إدخال رابط غير صحيح.
نشر التطبيق
- يمكنك نشر التطبيق على منصات مثل Vercel أو Netlify.
- الأوامر سهلة ومباشرة بعد تجهيز المشروع.
مشروع تطبيقي
- سننشئ تطبيق مهام (To-Do App).
- المستخدم يضيف مهمة، يعرضها النظام، ويمكنه حذفها.
- يعتمد على Loaders وActions للتعامل مع البيانات.
