Каким образом подружить Yii2 с React?

Question

[Orbb]

Помогите динозавру - уже лет 5 все делаю с jQuery. Сейчас ставлю себе что-то современее - начал с React. И уже хочу обратно к уютной жквери.
Тот же Vue для учебного проекта встал сразу, одним подключением. А детище фейсбука не запускается ни в какую.

Значит, пара условий: Реакт лежит внутри vendor/npm-asset. И только там. Подключаем:

spoiler

class NpmAsset extends AssetBundle
{
    public $sourcePath = '@npm';
    public $js = [
        'react/cjs/react.production.min.js',
        'react-dom/cjs/react-dom.production.min.js',
    ];

    public $jsOptions = [ 'position' => \yii\web\View::POS_HEAD ];
}

Подключили.
ReferenceError: require is not defined

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

Объясните на пальцах - что не так делаю и как надо? Я не знаю, не умею. Мне сначало надо скомпилить из этих файлов бебелем?

Давайте прям на пальцах - Что, как, куда, почему, зачем. Я как-то не ожидал что плясать нужно столько.

Еще как назло вся инфа в тырнете уже устарела об этом вашем фронтенде и ничего уже не работает. Видимо, поэтому актуальные статьи никто не берется писать - завтра выйдет новый вебпак2 и все забудут про гульп/бовер/вебпак :(

Comments

[Orbb]

Максим Тимофеев, ну он современее jquery. А что, уже что-то еще придумали? )

[Максим Федоров]

Значит, пара условий: Реакт лежит внутри vendor/npm-asset. И только там

Эту кухню лучше подрубать нормально через npm (а значит папку node_modules)
уверен можно гибко как-то делать, но нужно достигнуть дзен в ЖС разработке

Кроме того лучше не пользоваться кухней Yii2 для такой разработки

[Orbb]

Максим Федоров, на юишке у меня апи. Я просто не могу даже начать с реактом работать - он тупо не запускается. Уже думаю плюнуть и забить, перейдя на Vue. Как я понял - и там и там одно и то же. Но хочется понять - что не так делаю. А что и где упускаю - хз. Может, реакт реально удобен и не пожалею. Хотя я уже готов от него отказаться.

[Модератор]

Антон Спирин, если ответ легко ищется поисковиком, вас не затруднит скопировать линк на запрос и лучший результат из вашей выборки

https://www.google.com/search?q=clean+phrase

[RusticAnd]

видимо никак, что react что yii2 самое конченое что есть в жизни... в принципе зачем делать фронт на реакте, это загадка для адекватных людей.... видимо чтобы бэк программист страдал...

Answer 1

[Orbb]

Я разобрался, слава макаронному монстру. Оставлю пост для всех тех, у кого много вопросов, но мало ответов:

В чем суть сегодняшнего жса (пишу для жквери динозавров вроде себя, кто слышал о всем новом, не до конца не понимал):

1. Раньше жс был тонной отдельных файлов в глобальном пространстве. Жквери и в след за ней 10 плагинов разной направленности. Это и сейчас так осталось, только теперь вебпак пакует еще большее количество файлов, но написанное на ES с участием require и export. Тот же самый привычный для серверных языков require внутри одного файла импортит другой файл, в котором прописан export. В ноде из коробки это работает, но в данном случае у нас бекенд не нода и это не работает.

2. В чем удобство? Теперь у нас все так же лежит по категориям в папках, как и во всех нормальных языках с неймспейсами, только без неймспейсов. Какая никакая структура

3. Мы пишем модули. Бегущая строка = модуль, подсчет времени = модуль. Все это раскладываем в читабельном виде по структуре папок внутри проекта. Их мы собираем вебпаком. Вот по вебпаку вводная, например: https://habr.com/post/309306/

4. Собрали вебпаком - внутри него бабель сделает понимаемый браузером, а не нодой, код, подключит все жс модули из папок и отдаст готовый файл. Его мы и подключаем как раньше. Тот же Browserify, тот же concat, только более умный, что ли.

5. Подключаем итоговый файлик как обычно на странице - на этом сборка окончена. Далее уже пошел наш ES5-6 код с реактом или без реакта. Далее ватчеры, less-sass-scss-babel с пресетами и все остальное через вебпак становится юзабельным и уходит уже в папки, откуда сервер отдает готовые и скомпиленные статичные файлы.

В данном случае не получилось подружить Yii с реактом в том смысле, что я хотел это сделать не нарушая иерархию - через vendor/npm-asset, без /node_modules/ в корне данная конструкция не запускается - вебпак не видит их через require. Но node_modules в корне все ок.

Comments

[RusticAnd]

Ну и где объяснения, как подключить все это к yii?

Answer 2

[GloryLight]

Попробуйте библиотеку ReactYii2Essentials, она позволяет использовать Yii2 как API для React и добавляет привычные поля, формы и другие фронтенд полезности в React. Так же с ней в паре идёт библиотека для Yii2, которая добавляет в gii генератор React CRUD, что позволяет быстро стартовать. Она ещё в разработке, но уже достаточно полезна.

Comments

[RusticAnd]

бесполезная библиотека, которая ничего не обьясняет, нет примеров кода....