دليل احتراف Laravel مع Inertia و React: بناء تطبيقات Single Page بدون تعقيدات الـ API
كثير مننا كمبرمجين واجهنا الحيرة دي: بنحب لارافيل (Laravel) كإطار عمل متكامل وقوي في الباك إيند (Backend)، وفي نفس الوقت مش عاوزين نستغنى عن سرعة وتجربة المستخدم الممتازة اللي بتقدمها ريأكت (React) في الفرونت إيند (Frontend). أحياناً بناء REST API كاملة عشان تربط الاثنين ببعض بيكون "أوفر" ومضيعة للوقت، وهنا بتيجي القوة الحقيقية لـ إنيرشيا (Inertia.js).
في المقال ده، هنعرف إزاي نربطهم ببعض بخطوات عملية بسيطة عشان تبني تطبيق تطوير ويب (Web Development) عصري ومحترف في وقت قياسي.
Table of contents [Show]
ليه تختار Inertia مع Laravel و React؟
الهدف الأساسي من إنيرشيا هو إنك تشتغل كأنك بتعمل تطبيق لارافيل تقليدي (Monolithic)، لكن النتيجة النهائية هي تطبيق صفحة واحدة (Single Page Application). أنت مش محتاج تكتب API Endpoints معقدة ولا تتعامل مع Auth State في الفرونت إيند، كل حاجة بتدار من خلال الروات (Routes) والكونترولرز (Controllers) في لارافيل.
الخطوة الأولى: إعداد بيئة العمل
أول حاجة محتاجين نجهز مشروع لارافيل جديد، ونستخدم أداة الـ (Starter Kit) اللي بتوفر علينا مجهود كبير في الإعداد، وهي Laravel Breeze. افتح التيرمينال بتاعك واكتب الأوامر دي:
composer create-project laravel/laravel my-app
cd my-app
composer require laravel/breeze --dev
php artisan breeze:install react
بمجرد ما تختار React في الأمر الأخير، الأداة هتقوم بكل الشغل التقني، هتركب الـ Dependencies، وتجهز الـ Vite، وتضبط ملفات الإعداد زي الـ package.json والـ vite.config.js.
الخطوة الثانية: تشغيل بيئة التطوير
عشان نضمن إن كل حاجة شغالة، محتاجين نحدث الـ NPM Packages ونشغل السيرفر المحلي. استخدم الأوامر دي:
npm install
npm run dev
php artisan serve
الآن، افتح المتصفح على الرابط اللي ظهرلك، وهتلاقي صفحة البداية الخاصة بـ لارافيل مع ريأكت اشتغلت معاك بنجاح. لاحظ إن فايت (Vite) بيعمل عملية "Hot Module Replacement" أو تحديث لحظي لأي تغيير بتعمله في كود الريأكت.
الخطوة الثالثة: التعامل مع الروات والـ Components
في عالم إنيرشيا، أنت بتعمل Return لـ "Inertia View" بدل الـ View التقليدي. افتح ملف routes/web.php وشوف الكود ده:
use Inertia\Inertia;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return Inertia::render('Welcome', [
'name' => 'يا مبرمج يا محترف'
]);
});
هنا إحنا بعثنا الـ Props من الكونترولر مباشرة للـ Component اللي موجود في المسار resources/js/Pages/Welcome.jsx. تقدر تستقبلها في ريأكت ببساطة:
export default function Welcome({ name }) {
return أهلاً بك، {name}
;
}
نصيحة من أخ لمبرمج زميل
التعلم مش بس إنك تنفذ الخطوات، التعلم هو إنك تفهم "ليه" الأمور بتمشي بالشكل ده. متكتفيش بالـ Starter Kit، حاول تدخل جوه الملفات وتشوف الـ HandleInertiaRequests Middleware، وتفهم إزاي الـ Data بتنتقل بين الـ Server والـ Client. البرمجة ممارسة، فجرب تبني مشروع بسيط (زي To-Do List) باستخدام التكنيك ده، وهتلاقي إن سرعتك في الإنجاز زادت بشكل خيالي.
بالتوفيق في مشاريعك القادمة، ولو وقفت قدامك أي مشكلة، ارجع للـ Documentation الرسمي لـ Inertia، فهو واحد من أفضل التوثيقات التقنية الموجودة حالياً.
