Laravel и React

Laravel и React — как пара, которую свели через Tinder: красиво на фотках, но в жизни выясняется, что у одного привычка бухать, у другого — разбрасывать носки. Вроде вместе работают, но каждый раз нужно договариваться.

Laravel закрывает бэкэнд: маршруты, база, авторизация, вся эта скучная кухня. React — морда лица: кнопочки, динамика, SPA. Казалось бы, идеально. Но если ты думаешь, что их связка — это два фреймворка, которые обнялись и дружно полетели в продакшн, то обломись. Ты получаешь два мира с разными зависимостями, сборками и тараканами.

Composer против npm: дуэль на кухне

Первое, что тебя ждёт — два менеджера пакетов. Composer и npm. Два монстра, которые не уважают друг друга.

# ставим Laravel
composer create-project --prefer-dist laravel/laravel laravel-react-app

# ставим React
npm install react react-dom

Composer живёт в своём мире PHP-зависимостей. npm — в своём аду с миллионами пакетов, половина из которых заброшены и ломаются при каждом npm install.
И ты сидишь как родитель двух подростков, которые ненавидят друг друга, но вынуждены жить в одной квартире.

Laravel Mix: иллюзия простоты

Laravel Mix обещает, что «всё просто». Типа написал одну строчку:

// webpack.mix.js
mix.js('resources/js/app.js', 'public/js');

и у тебя уже React-компоненты компилятся и летят в браузер.

Ну да. Пока не начинается цирк: несовместимые версии webpack, какие-то плагины, которые внезапно перестали работать, и очередной npm-скрипт, который орёт на тебя красным текстом.

Первый React-компонент: «всё просто» (пока нет)

Создать компонент легко.

// resources/js/components/ExampleComponent.js import React from 'react';

class ExampleComponent extends React.Component {
    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <div className="card">
                            <div className="card-header">Example Component</div>
                            <div className="card-body">I'm an example component!</div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default ExampleComponent;

И подключаешь его в app.js:

// resources/js/app.js import React from 'react';
import ReactDOM from 'react-dom';
import ExampleComponent from './components/ExampleComponent';

if (document.getElementById('example-component')) {
    ReactDOM.render(<ExampleComponent />, document.getElementById('example-component'));
}

Работает? Да. Пока ты не обновишь версию React или Laravel Mix. Потом получаешь фейерверк ошибок в консоли.

Подключение к Blade: два мира, одно тело

Laravel хочет Blade, React хочет свой див. В итоге ты лепишь в шаблон:

<!-- resources/views/welcome.blade.php -->
<div id="example-component"></div>
<script src="{{ mix('js/app.js') }}"></script>

И получаешь гибрид. Половина у тебя Blade, половина React, а где-то ещё jQuery всплыл (да-да, бывает и такое).

Компиляция и нервы

Финальный шаг вроде бы простой:

npm run dev

И React оживает в браузере. Но жди, что на продакшне кто-то забудет прогнать npm run prod, и твой фронт будет весить 20 мегабайт сырого JS.

Laravel Blade vs React: война за морду

Laravel привык, что морда рендерится через Blade. React хочет всё под себя. И если ты делаешь гибрид, то будешь жить в раздвоении личности: часть у тебя на Blade, часть на React, а где-то ещё jQuery всплыл (да-да, бывает и такое).

И в итоге твой проект превращается в Frankenstein UI, где каждое обновление требует шаманских танцев.

Где это реально нужно

Laravel + React имеет смысл, если ты делаешь SPA или реально сложный интерфейс. Например: личный кабинет, админка с динамическими таблицами, куча интерактивщины.

Но если у тебя сайт-визитка или CRUD с двумя формами — забудь. Тебе хватит Blade и Vue, который Laravel давно умел готовить из коробки. React в таком проекте — это как ставить турбину на «Жигули», чтобы ездить за хлебом.

Итог

Laravel и React вместе — это рабочая связка, но не жди, что оно взлетит «из коробки». Придётся быть не только программистом, но и половиной девопса, который следит за сборкой, версиями npm, падениями webpack и конфликтами зависимостей.

Но если переживёшь первые пару недель боли — жить можно. Потом смотришь на Blade и уже не можешь: слишком уж удобно на React крутить фронт.

Так что да, Laravel + React — это как токсичные отношения: сначала тяжело, потом привыкаешь, и уже без этого не можешь.