ymnik13 / lara-react21 Goto Github PK

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>