راهنمایی در مورد فول استک fullstack developing

به بحث UI در لاراول دقت نکردی دوست عزیز

composer require laravel/ui
php artisan ui react
npm install
npm run dev

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

resources/js/components/ -> کامپوننت ها اینجان
یادت نره اینجا app.js رجیستر کنی اگر دستی میسازی
اگر هم نیاز داری از Headless Architecture استفاده کنی
در یک فولدر باید باشن جفت بک و فرانت

php artisan api:install

تمام api ها رو اینجا تعریف کن ، کلا برقراری ارتباط اینجا انجام میشه.

این پکیج رو یادت نره نصب کنی مورد نیازه برای React

composer require fruitcake/laravel-cors

کاره خودت سخت میشه ااگه تو دو فولدر جدا باشن همون از laravel ui استفاده کنی راحت تری.

@mamadkeeper
ممنون از شما . من آموزش های لاراول و ری اکت خام رو جدا جدا دیدم اما الان واقعا گیج شدم چون ری اکت خام مشکل ceo و روتینگ داره و چون ری اکت بلدم نمیخوام از livewire و blade استفاده کنم اما برای اینکه یک فریمورک برای برقراری ارتباط با فرانت و بک یاد بگیرم ; نمیدونم next js یاد بگیرم یا چون فریمورک بک اندی من لاراول هستش inertia اولویت داره؟؟؟ از طرفی هم خب next js ویژگی های زیادی به ری اکت اضافه کرده. از یه طرفم نمیدونم لاراول با next js جور در میاد یا نه.

خواهش میکنم
بستگی به سلیقه خودت داره که NextJS کار کنی یا Inertia
Inertia هم فیچر های خیلی خوبی گذاشته جدیدا که بهتره مستندات خوده لاراول رو چک کنی.
https://www.youtube.com/watch?v=qJq9ZMB2Was اینم یک ویدیو با Laravel - React
موفق باشی

سلام! 😊

برای وصل کردن ری‌اکت و لاراول به هم، چند نکته و مراحل مشخص هست که باید بهش توجه کنی. من تلاش می‌کنم جواب رو ساده و مرحله به مرحله برات توضیح بدم:

1. نقش لاراول و ری‌اکت در این پروژه:
   لاراول برای بک‌اند و انجام عملیات CRUD، ولیدیشن و ارتباط با دیتابیس استفاده می‌شه. لاراول به عنوان یک API عمل می‌کنه که داده‌ها رو از دیتابیس می‌گیره و به ری‌اکت ارسال می‌کنه.
   ری‌اکت برای فرانت‌اند استفاده می‌شه. این فریمورک برای ساخت UI و تعامل با کاربره. در اینجا، ری‌اکت از طریق API که لاراول فراهم می‌کنه، اطلاعات رو دریافت می‌کنه و در قالب مناسب نمایش می‌ده.
2. چرایی انجام ولیدیشن در ری‌اکت:
   اگرچه لاراول مسئول ولیدیشن در سمت بک‌اند است، اما گاهی اوقات لازم میشه که در سمت فرانت‌اند هم بعضی از موارد مثل فیلدهای فرم و چک کردن مقادیر ورودی رو از نظر اعتبارسنجی بررسی کنی. این کار باعث می‌شه که سریع‌تر به کاربر اطلاعات بدی و از ارسال درخواست‌های اشتباه به سرور جلوگیری بشه.

ولیدیشن در لاراول: سمت سرور اجرا میشه و وقتی داده‌ها به لاراول ارسال می‌شن، چک می‌کنه که آیا اطلاعات درست هست یا نه.
ولیدیشن در ری‌اکت: در سمت فرانت‌اند انجام می‌شه و قبل از ارسال درخواست، داده‌ها بررسی می‌شن.

3. اتصال لاراول و ری‌اکت:
   لاراول به عنوان API عمل می‌کنه که داده‌ها رو به فرانت‌اند (ری‌اکت) ارسال می‌کنه. وقتی می‌خواهی اطلاعات رو به ری‌اکت ارسال کنی، لاراول معمولاً از API RESTful یا GraphQL استفاده می‌کنه. ری‌اکت هم از طریق fetch یا Axios این داده‌ها رو دریافت می‌کنه.
   در نهایت، ری‌اکت به عنوان UI داده‌ها رو نمایش می‌ده.
4. پیکربندی JSX در لاراول:
   برای اینکه بتونی از JSX در لاراول استفاده کنی، باید چند مرحله انجام بدی:

ایجاد پروژه لاراول: اول یک پروژه لاراول بساز.
اضافه کردن React به پروژه:
داخل پروژه لاراول به مسیر resources/js برو و یک فایل app.js ایجاد کن.
ری‌اکت رو با استفاده از Babel و Webpack به پروژه لاراول وصل کن. برای اینکار، باید در فایل webpack.mix.js تنظیمات مربوط به ری‌اکت رو اضافه کنی.
کد نمونه برای webpack.mix.js:

const mix = require('laravel-mix');

mix.react('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

نصب پکیج‌های مورد نیاز: برای راه‌اندازی ری‌اکت در لاراول، نیاز به نصب پکیج‌های مختلف داری:

npm install react react-dom
npm install --save-dev @babel/preset-react

کامپایل کردن با Webpack: وقتی کدهای JSX رو نوشتی، باید اون رو با Webpack کامپایل کنی تا تبدیل به جاوااسکریپت معمولی بشه.
npm run dev

5. ایجاد فرانت‌اند و بک‌اند همزمان یا جداگانه؟
   این بستگی به نیاز پروژه داره، اما معمولاً می‌تونی همزمان کار کنی:

در بک‌اند، مدل‌ها و روابط دیتابیس رو در لاراول ایجاد می‌کنی.
در فرانت‌اند، کامپوننت‌ها و صفحات در ری‌اکت ساخته می‌شن.
بعد از این که API در لاراول آماده شد، می‌تونی تو ری‌اکت داده‌ها رو فراخوانی کنی.

6. دوره‌های آموزشی فول‌استک با ری‌اکت و لاراول:
   اگر به دنبال یک دوره فول‌استک با ری‌اکت و لاراول هستی، چندین دوره خوب وجود داره که می‌تونی از آن‌ها استفاده کنی:

Udemy: در سایت‌هایی مثل Udemy دوره‌های مختلف فول‌استک لاراول و ری‌اکت به صورت پروژه‌محور وجود داره.
YouTube: در یوتیوب هم کانال‌هایی مثل "Traversy Media" یا "Codecourse" دوره‌هایی برای این دو فریمورک به صورت رایگان دارند.
جمع‌بندی:
لاراول مسئول بک‌اند (CRUD و دیتابیس) و ری‌اکت مسئول فرانت‌اند (UI) است.
ولیدیشن هم در سمت سرور (لاراول) و هم در سمت فرانت‌اند (ری‌اکت) انجام می‌شه.
برای استفاده از JSX در لاراول باید از Webpack و Babel استفاده کنی.
پروژه‌ها معمولاً به صورت همزمان ساخته می‌شن، چون فرانت‌اند و بک‌اند باید با هم ارتباط داشته باشن.
دوره‌های آموزشی فول‌استک زیادی برای این دو فریمورک وجود داره که می‌تونی از آن‌ها استفاده کنی.