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="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale-1.0, maximum-scale=1.0" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
<script src="{{ mix('/js/app.js') }}" defer></script>
</head>
<body>
@inertia
</body>
</html> 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="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale-1.0, maximum-scale=1.0" />
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
<script src="{{ mix('/js/app.js') }}" defer></script>
</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 "react";
import { render } from "react-dom";
import { createinertiaApp } from "@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` ایجاد کنید و سپس کد زیر را درون آن قرار دهید:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
مرحله 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([
"middleware" => ["auth"],
], function(){
Route::get('/test', 'TestController@show');
});
مرحله 9 - نتیجه
تمام شد.
سعی کنید مسیر project_url/test را فراخوانی کنید و اتصال React با Laravel را انجام دهید. امیدوارم این مقاله برای شما مفید باشد. اگر هرگونه سوالی در خصوص این مقاله داشتید حتما در قسمت نظرات با ما در میان بگذارید.
منبع: geekyants
