آموزش نصب Inertia - React در پروژه لاراول

آموزش نصب Inertia - React در پروژه لاراولInertia با آداپتورهای سمت سرور رسمی برای Laravel همراه است. در این مقاله، ما Inertia.js را در Laravel با React.js نصب خواهیم کرد.ابتدا، نصب سمت سرور را انجام می دهیم و سپس با نصب سمت کلاینت ادامه می دهیم.مرحله 1 - نصب پکیج Inertia در پروژه لاراولبرای نصب پکیج inertia با استفاده از composer نیاز است که دستور (command) زیر را وارد کنید:composer require inertiajs/inertia-laravelمرحله 2 - افزودن قالب ریشهیک فایل جدید به نام app.blade.php در resources/views ایجاد کنید و کد زیر را در آن قرار دهید. این فایل در بازدید اول از صفحه بارگذاری می شود. این برای بارگذاری دارایی های سایت شما (CSS و JavaScript) استفاده می شود و همچنین شامل یک <div> ریشه برای راه اندازی برنامه JavaScript شما است.<!DOCTYPE html> <html> <head> <meta charset=&quotutf-8&quot /> <meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale-1.0, maximum-scale=1.0&quot /> <link href=&quot{{ mix('/css/app.css') }}&quot rel=&quotstylesheet&quot /> <script src=&quot{{ mix('/js/app.js') }}&quot defer> </head> <body> @inertia </body> </html>مرحله 3 - راه اندازی Middlewareسپس، middleware مربوط به Inertia را راه اندازی کنید برای اینکار دستور زیر را وارد کنید:php artisan inertia:middlewareبعد از وارد کردن دستور یک فایل به نام HandleInertiaRequests در بخش Middleware برای شما ایجاد میشود و باید آن را Register کنید. برای اینکار وارد App\Http\Kernel بشوید و دستور زیر را در بخش web اضافه کنید.'web' => [ // ... \App\Http\Middleware\HandleInertiaRequests::class, ],الان نصب بخش server-side برنامه ما به پایان رسیده است.سپس، باید سراغ نصب بخش client-side برویم.مرحله 4 - نصب dependencies بخش client-sideبرای نصب بخش client-side در Inertia میتوانید با استفاده از npm و yarn این کار را انجام بدهید:npm install @inertiajs/inertia @inertiajs/inertia-react yarn add @inertiajs/inertia @inertiajs/inertia-reactمرحله 5 - راه اندازی برنامهدر مرحله بعد، فایل اصلی جاوا اسکریپت خود را در resources/js/app.js به روز کنید. اگر فایل app.js قبلی در آن پوشه وجود دارد، نام فایل قدیمی را تغییر دهید، یک فایل جدید با نام app.js ایجاد کنید و کد زیر را در آن قرار دهید. در اینجا ما از اجزای Inertia پایه برای راه اندازی فریمورک client-side استفاده می کنیم.import React from &quotreact" import { render } from &quotreact-dom" import { createinertiaApp } from &quot@inertiajs/inertia-react" createInertiaApp({ resolve: name => import(`.Pages/${name}`), setup({ el, App, props }) { render(<App {...props} />, el); } });مرحله 6 - نصب پلاگین babelچرا به Babel نیاز داریم؟ کد شکستن، صفحات مختلف برنامه شما را به بسته های کوچکتر تقسیم می کند که سپس هنگام بازدید از صفحات جدید، بارگیری می شوند. این می تواند اندازه بسته اولیه JavaScript را به طور قابل توجهی کاهش دهد و زمان اولین رندر را بهبود بخشد. برای استفاده از کد شکستن با Inertia، باید واردات پویا را فعال کنید. به همین دلیل، برای انجام این کار، نیاز به پلاگین Babel دارید.برای نصب پلاگین های babel، دستورات زیر را اجرا کنید:npm install @babel/plugin-syntax-dynamic-import yarn add @babel/plugin-syntax-dynamic-importسپس، یک فایل جدید `.babelrc` ایجاد کنید و سپس کد زیر را درون آن قرار دهید:{ &quotpresets&quot: [&quot@babel/preset-env&quot, &quot@babel/preset-react&quot] }مرحله 7 - ایجاد یک کامپوننت Test.jsحالا یک کامپوننت به نام Test.js را در مسیر resources/js/Pages ایجاد کنید برای آزمایش اینکه آیا پیکربندی ما به درستی انجام شده است.import React from 'react'; import { Head } from '@inertiajs/inertia-react'; export default function Test() { return ( <h1>Welcome</h1> ) }مرحله 8 - ایجاد route و controllerبرای رندر گرفتن از کامپوننت، یک کنترلر به نام TestController ایجاد کنید و سپس یک مسیر هم در فایل web.php برای آن اضافه کنید:<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Inertia\Inertia; class TestController extends Controller { public function show() { return Inertia::render('Test'); } }Route::group([ &quotmiddleware&quot => [&quotauth&quot], ], function(){ Route::get('/test', 'TestController@show'); });مرحله 9 - نتیجهتمام شد.سعی کنید مسیر project_url/test را فراخوانی کنید و اتصال React با Laravel را انجام دهید. امیدوارم این مقاله برای شما مفید باشد. اگر هرگونه سوالی در خصوص این مقاله داشتید حتما در قسمت نظرات با ما در میان بگذارید.منبع: وبسایت میموک