Laravel + React
lara.react.loc
1. Создаем новый проект composer create-project laravel/laravel lara.react.loc
2. Добавляем первичных настроек работы с react нам нужен пакет
composer requere laravel/ui
3. Обновляем node
Хотя бы до 12.12
4. Запускаем установку пакетов node.js
npm i
5. Запускаем сборку
npm run dev
6. Запускаем создание авторизацию на vue + инициализацию работы с React
php artisan ui react --auth
Флаг --auth
создаст файлы (контроллеры/blade) авторизации + пропишет нужные роуты.
Кроме этого будут внесены изменения для фронта
- создан пример компонента на React
resources/js/components/Example.js
import React from 'react';
import ReactDOM from 'react-dom';
function Example() {
return (
<div className="container">
<div className="row justify-content-center">
Тут контент
</div>
</div>
);
}
export default Example;
и в этом же файле ниже его инициализация
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
- подключен экземпляр в
resources/js/app.js
require('./components/Example');
-
добавлены следующие пакеты npm
- @babel/preset-react
- bootstrap
- jquery
- popper.js
- react
- react-dom
- sass
- sass-loader
-
подключены в
resources/js/bootstrap.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) { }
7. Запускаем сборку
npm run watch-poll
8. Подключаем скрипты и компоненты на страницы
Далее нам надо подключить все скрипты и стили в шаблоне Blade
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
и в нужных места добавлять теги с ID для подключения компонента
<div id="example"></div>