React، به روش Laravel
React, The Laravel Way
In "React from Scratch", we built a "DevPups" app from scratch. Now it's time to take things further. Using that finished app as a base, you'll learn how to construct a React-powered app...the Laravel way!
You'll see how we can swap out fragile external API calls for Laravel's elegant backend, add real-time "like" functionality, support file uploads, and polish up our CRUD features with proper authorization. Along the way, you'll get comfortable with Inertia.js, the perfect glue between Laravel's backend strength and React's frontend flexibility.
By the end of this series, you'll have constructed a production-ready app that shows the Laravel way of working with React: fewer moving parts, cleaner architecture, and faster development.
قسمتهای دوره
From Vanilla React to Laravel Integration (8)
Kick off porting DevPups to Laravel + Inertia + React—solve data fetching, invalidation, auth, and routing gaps for a sturdier app.
پورت اپ خالص (Vanilla)
15m 3sPort DevPups to Laravel + Inertia + React: scaffold a fresh app, migrate structure and API calls, and use built-in auth for a solid foundation.
دادههای داخلی تولهسگها
18m 42sBring puppy data in-house with a Laravel model, migration, and seeder—simplify React components and let Inertia handle server-to-client flow.
تصاویر در درایور عمومی و محلی
3m 28sMove puppy images from public to Laravel storage, use Storage::url(), create a storage symlink, and prepare uploads for a tidy file setup.
منابع JSON
8m 36sShape API responses with Laravel JSON Resources: expose needed fields, camelCase keys, and disable wrapping for cleaner Inertia integration.
رابطه تولهسگهای پسندیده
8m 26sQuickly wire up a puppy 'likes' relationship: pivot table, foreign keys, cascade deletes, and uniqueness to prevent duplicate likes.
تولهسگهای واقعی در فرانتاند
7m 48sBring real puppy data to the front end with Laravel + Inertia—no spinners, suspense, or custom error states; just simpler React components.
حسابهای کاربری و رابط کاربری ورود
18m 9sSet up user accounts and login UI using the starter kit: tweak redirects, review controllers, and add login/logout for interactive auth.
Interactive Features & State Management (7)
بازنویسی تغییر وضعیت لایک
23m 1sMake the like heart instant and reliable: build idempotent Laravel routes/controllers and let Inertia sync DB with the UI for smooth feedback.
رابط کاربری وضعیت در انتظار
9m 40sAdd pending states: disable buttons, show subtle feedback, and reassure users during actions to improve UX and reduce uncertainty.
پردازش وضعیت از هلپر useForm
13m 34sUse Inertia's useForm hook to auto-track pending states, handle validation errors, reset forms, and eliminate boilerplate for cleaner components.
فیلتر کردن جستجو در سمت سرور
17m 37sMove search to the server with Laravel queries: filter puppies by name and traits via Inertia, reduce client load and keep the UI snappy.
عملکرد فیلتر جستجو
11m 42sSpeed up filter searches: add indexes, eager-load relations, and refine queries to avoid N+1, keeping performance snappy as data scales.
Manage large lists with Laravel pagination: customize links and keep filters/search across pages via Inertia for a smooth UX.
فرمهای Inertia
14m 26sMaster Inertia form helpers: automatic error handling, resets, and success redirects to reduce boilerplate and build reliable forms fast.
File Uploads (5)
آپلود تصاویر
9m 46sAdd puppy photo uploads with Laravel validation and storage, plus a React preview for a smooth, user-friendly submission flow.
ذخیره تولهسگهای جدید
16m 42sQuickly connect your puppy form to the database: validate input, store images, save records, and use Inertia to refresh the UI instantly.
پرداخت فرم ایجاد تولهسگ
3m 47sPolish your puppy creation form: reset fields after submit, manage focus, and add subtle UX touches for a smoother, professional user experience.
بهینهسازی تصویر
10m 20sAutomatically resize, compress, and optimize puppy images with Laravel to speed loads and preserve quality—simplify uploads and boost performance.
اکشن بهینهسازی تصویر قابل استفاده مجدد
12m 25sEncapsulate image optimization in a reusable Laravel Action to avoid duplication, keep code clean, testable, and consistent across your app.
Polish & UX Enhancement (4)
رفع باگ لیست کوتاه
11m 48sTrace a shortlist state mismatch between server and client, fix the bug, and add guardrails to prevent future issues and stabilize UX.
بازنشانی صفحهبندی در زمان ایجاد
3mReset pagination automatically after creating a puppy so users instantly see the new item—avoid hidden results and improve UX.
کامند حذف تصاویر استفاده نشده
9m 19sCreate an Artisan command to reconcile storage with the database and safely remove orphaned image files, keeping storage tidy.
اعلانهای Toast
17m 32sBuild non-intrusive toast notifications for success, error, and status messages to keep users informed and make your app feel responsive.
CRUD Operations (6)
اکشن حذف
19m 2sSafely delete records with confirmation dialogs, backend authorization, and instant UI updates to keep destructive actions secure and clear.
سیاست مجوزدهی
12m 59sUse Laravel Policy classes to restrict puppy edits/deletes to owners and pass authorization state to React for secure, conditional UI.
وضعیت در انتظار دیالوگ
12m 53sImprove dialog UX with clear pending states: show loading indicators, disable buttons, and keep async actions consistent so users trust the app.
اکشن بهروزرسانی فرانتاند
13m 15sBuild Inertia edit forms that load puppy data, validate input, handle errors gracefully, and update records for a seamless user experience.
جعل متد PUT
18m 12sLearn Laravel method spoofing to use PUT/PATCH/DELETE with Inertia forms, keeping routes RESTful while working around HTML form limits.
پیشنمایش آپلود تصویر
19m 21sAdd live image upload previews so users see chosen photos instantly while your app handles cleanup to prevent memory leaks.




