Если вы используете Laravel Mix с Webpack для управления вашими ассетами, следуйте этим шагам, чтобы интегрировать Inertia.js с React в ваш проект
Если вы используете Laravel Mix с Webpack для управления вашими ассетами, следуйте этим шагам, чтобы интегрировать Inertia.js с React в ваш проект:
### Шаг 1: Установка необходимых пакетов
#### Установите пакет Inertia.js для Laravel:
```bash
composer require inertiajs/inertia-laravel
```
#### Установите клиентские библиотеки Inertia.js:
```bash
npm install @inertiajs/inertia @inertiajs/inertia-react react react-dom
```
### Шаг 2: Настройка Inertia.js в Laravel
#### Опубликуйте конфигурационный файл Inertia.js:
```bash
php artisan inertia:middleware
```
#### Зарегистрируйте middleware в файле `app/Http/Kernel.php`:
```php
protected $middlewareGroups = [
'web' => [
// другие middleware
\App\Http\Middleware\HandleInertiaRequests::class,
],
];
```
### Шаг 3: Настройка фронтенда
#### Настройте файлы JavaScript:
1. Создайте файл `resources/js/app.js` (или отредактируйте, если он уже существует):
```javascript
import { createInertiaApp } from '@inertiajs/inertia-react';
import { InertiaProgress } from '@inertiajs/progress';
import React from 'react';
import { render } from 'react-dom';
import Layout from './Shared/Layout';
createInertiaApp({
resolve: name => {
const page = require(`./Pages/${name}`).default;
page.layout ??= Layout;
return page;
},
setup({ el, App, props }) {
render(<App {...props} />, el);
},
});
InertiaProgress.init();
```
2. Обновите файл `resources/views/app.blade.php` (если такого файла нет, создайте его):
```html
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Inertia</title>
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body>
@inertia
</body>
</html>
```
### Шаг 4: Настройка маршрутов и контроллеров
#### Пример маршрута в `routes/web.php`:
```php
use Inertia\Inertia;
Route::get('/inertia-page', function () {
return Inertia::render('InertiaPageComponent', [
'message' => 'Hello from Inertia!',
]);
});
```
#### Пример контроллера:
```php
use Inertia\Inertia;
public function showInertiaPage() {
return Inertia::render('InertiaPageComponent', [
'message' => 'Hello from Inertia!',
]);
}
```
### Шаг 5: Создание React компонентов
#### Создайте React компонент `resources/js/Pages/InertiaPageComponent.jsx`:
```jsx
import React from 'react';
import { usePage } from '@inertiajs/inertia-react';
const InertiaPageComponent = () => {
const { props } = usePage();
const { message } = props;
return (
<div>
<h1>{message}</h1>
</div>
);
};
export default InertiaPageComponent;
```
#### Создайте общий макет `resources/js/Shared/Layout.jsx` (если используете макеты):
```jsx
import React from 'react';
const Layout = ({ children }) => {
return (
<div>
<header>
<h1>My Application</h1>
</header>
<main>
{children}
</main>
</div>
);
};
export default Layout;
```
### Шаг 6: Настройка Laravel Mix
#### Обновите файл `webpack.mix.js` для компиляции ваших JavaScript и CSS файлов:
```javascript
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.react()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.version();
```
### Шаг 7: Компиляция ассетов
#### Скомпилируйте ассеты:
```bash
npm run dev
```
Теперь ваш проект настроен для использования Inertia.js с React на некоторых страницах, сохраняя при этом традиционный фронтенд Laravel для других страниц.
Комментарии
Отправить комментарий