Настройка Laravel 5.4 для использования React

Я не новичок в Laravel, но новичок в JavaScript-инфраструктурах.

Я хочу использовать React в сборке laravel, но не могу найти никакой информации о том, как это сделать.

У меня есть Laravel 5.4. Я знаю, что это поставляется с пакетом Vue и Laravel Mix вместо Gulp.

Я следую учебнику здесь: https://blog.tighten.co/adding-react-components-to-a-laravel-app, но это не относится к 5.4. Он упоминает, что нужно обновить файл gulpfile, но поскольку Laravel 5.4 не использует Gulp, его нет!

Может кто-то может помочь с небольшим учебником или несколькими шагами, которые мне нужно реплицировать, чтобы заставить React работать в 5.4?

У меня есть Googled, но можно найти только ссылки NPM, которые менее полезны!

Ответы

Ответ 1

Спасибо Джо за то, что он указал на часть документов, которые мне нужны. Было немного больше, чтобы описать мои шаги ниже, чтобы помочь кому-то еще.

  • Удалите папку node_modules. Это не обязательно для новых новинок, но если вы следовали за любыми другими учебниками и устанавливали вещи, которые вам не нужны, это сэкономит несколько головных болей. Если у вас нет папки node_modules, проигнорируйте этот шаг.

    Обратите внимание на, что приведенный выше шаг удалит все, что вы установили, используя NPM.

  • Запустите npm install из корня проекта. Это установит все компоненты NPM, используемые Laravel.

  • Откройте webpack.mix.js и измените:

    mix.js('resources/assets/js/app.js', 'public/js') 
    .sass('resources/assets/sass/app.scss', 'public/css');

    к

    mix.react('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

  • Запустите npm run dev, чтобы скомпилировать Javascript из урока, содержащегося в вопросе выше. Теперь ваши работы React JS должны работать.

  • (необязательно) Используйте npm run watch для компиляции на лету.

Я действительно надеюсь, что это поможет кому-то другому, так как это помогло мне!

Ответ 2

В соответствии с документами поддержка React встроена в Mix:

Mix может автоматически устанавливать плагины Babel, необходимые для поддержки React. Чтобы начать работу, замените вызов mix.js() на mix.react():

mix.react('resources/assets/js/app.jsx', 'public/js');

За кулисами Mix загрузит и включит соответствующий Babel-предустановленный ответный плагин Babel.

Я не уверен на 100% независимо от того, будет ли это автоматически включать React в ваш выходной пакет - моя догадка не будет (в этом случае вам придется использовать обычный вызов mix.js(), чтобы втянуть его).