Если вы используете 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 для других страниц.

Комментарии

Популярные сообщения из этого блога

Две сетевые карты Windows 7. Настройка маршрутизации

Cisco Packet Tracer + Русификатор

Восстановление конфигурации Cisco с tftp сервера