laravel 12 with inertia and react

هل حلمت يومًا ببناء تطبيق ويب حديث بميزات رائعة وسرعة فائقة؟ هل تبحث عن طريقة مثالية تجمع بين قوة الخلفية التطويرية وسحر الواجهات التفاعلية؟ إذا كانت إجابتك “نعم”، فأنت في المكان الصحيح!

لماذا هذه الرحلة مثالية لك؟

في عالم تطوير الويب سريع الخطى، أصبح من الضروري امتلاك أدوات تمكنك من:

✅ بناء تطبيقات ويب عصرية في وقت قياسي

✅ واجهات مستخدم تفاعلية تجذب الزوار

✅ نظام تسجيل دخول آمن وجاهز للاستخدام

✅ تجربة تطوير سلسة وممتعة

ما الذي سنحققه معًا؟

في هذه الرحلة الممتعة، سننطلق معًا في مغامرة تقنية ننشئ فيها تطبيق ويب متكامل باستخدام أقوى التقنيات:

✅ Laravel 12 – أقوى إطار عمل PHP 🏰

✅ React – مكتبة واجهات المستخدم التفاعلية ⚛️

✅ Inertia.js – الجسر السحري بين الخلفية والواجهة 🌉

✅ Breeze – نظام المصادقة الجاهز 🔐

تثبيت install Laravel 12

				
					composer create-project laravel/laravel laravel12-inertia-react

ماذا يعني الكود ؟ ⚡
- Composer يقوم بتحميل وتثبيت إطار عمل Laravel الجديد
- إنشاء مشروع باسم “laravel12-inertia-react”
- تنزيل جميع الملفات الأساسية والأكواد اللازمة
لماذا ؟ 🤔
- للحصول على بيئة عمل نظيمة وجاهزة
- توفير الوقت والجهد في الإعدادات الأولية

ملحوظة : يتوقف تثبيت الاصدار الاخير من laravel علي تثبيت اخر اصدار من node js و php الموجود في xampp

الدخول إلى المجلد الرئيسي للمشروع

				
					cd laravel12-inertia-react

ضبط اعدادات env.

بدون هذا الملف، تطبيقك لن يعمل!
هو مثل جواز السفر للتطبيق

إنشاء جداول قاعدة البيانات
إعداد هيكل التطبيق الأساسي
تحضير مكان تخزين البيانات

				
					php artisan migrate

تثبيت حزمة Breeze

				
					composer require laravel/breeze --dev

لتوفير نظام تسجيل دخول جاهز بالاضافة الي توفير الوقت في بناء نظام المصادقة

تثبيتReact

				
					php artisan breeze:install react --dark

ماذا يعني الكود ؟ 🎨
- إعداد React مع Laravel
- تثبيت Inertia.js للربط بينهم
- تطبيق المظهر الداكن (Dark Mode) 🌙
النتيجة ✨
- واجهة مستخدم جميلة وجذابة
- تجربة مستخدم ممتعة

تنزيل جميع مكتبات React

				
					npm install

تعديل package.json

				
					{
  "scripts": {
    "start": "concurrently \"npm run dev\" \"php artisan serve\""
  }
}

اضافة الكود الي script داخل ملف package.json

ماذا يعني الكود ؟ ⚡
- إنشاء أمر واحد لتشغيل كل شيء!
- concurrently تشغيل أمرين في نفس الوقت
- npm run dev تشغيل خادم Vite للواجهة
- php artisan serve تشغيل خادم Laravel
الفائدة 🎯
- توفير الوقت والجهد
- لا حاجة لتشغيل أمرين منفصلين

تشغيل البرنامج

				
					npm start

تشغيل البرنامج من الرابط 127.0.0.1:8000 بعد الضغط علي زر ctrl

في هذا المقال يتم تركيب Inertia.js مع Laravel و React خطوة-بخطوة والاستفادة من قوة laravel في الخلفية ومرونة react في الواجهة الامامية وسهولة الربط بينهم باستخدام inertia

Post Views: 85