humiliation
@humiliation
Чем больше знаю - тем больше дурак

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

Помогите динозавру - уже лет 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 и все забудут про гульп/бовер/вебпак :(
  • Вопрос задан
  • 5962 просмотра
Решения вопроса 1
humiliation
@humiliation Автор вопроса
Чем больше знаю - тем больше дурак
Я разобрался, слава макаронному монстру. Оставлю пост для всех тех, у кого много вопросов, но мало ответов:

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

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 в корне все ок.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@GloryLight
Попробуйте библиотеку ReactYii2Essentials, она позволяет использовать Yii2 как API для React и добавляет привычные поля, формы и другие фронтенд полезности в React. Так же с ней в паре идёт библиотека для Yii2, которая добавляет в gii генератор React CRUD, что позволяет быстро стартовать. Она ещё в разработке, но уже достаточно полезна.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы