composer create-project laravel/laravel lara.react.loc
composer requere laravel/ui
Хотя бы до 12.12
npm i
npm run dev
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) { }
npm run watch-poll
Далее нам надо подключить все скрипты и стили в шаблоне Blade
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
и в нужных места добавлять теги с ID для подключения компонента
<div id="example"></div>