Кто-нибудь делал 3d-party виджеты на реакте? Были ли конфликты с версиями реакта? Стоит ли выность в таком случае приложение в iframe?

Правильно понимаю, что юзкейз - включяем виджет на страницу, используем React, импортированный на странице, но при этом не знаем какой он версии?

Правильно понимаю, что юзкейз - включяем виджет на страницу, используем React, импортированный на странице, но при этом не знаем какой он версии?

неправильно. пользователь подключает наш скрипт, в нашем скрипте загружается в том числе реакт и приложение инициализируется в какой нибудь ноде.

http://www.rwblackburn.com/iframe-evil/ http://andyshora.com/iframes-responsive-web-apps-tips.html

неправильно. пользователь подключает наш скрипт, в нашем скрипте загружается в том числе реакт и приложение инициализируется в какой нибудь ноде.

React обязательно загружать с CDN?

React обязательно загружать с CDN?

а причем здесь CDN?

Хорошо, ещё уточню: проблема в том, что вы используете React загруженный на странице через script тэг, и боитесь что на странице может быть ещё один?

да точно

откуда у них бабло?

http://www.rwblackburn.com/iframe-evil/ http://andyshora.com/iframes-responsive-web-apps-tips.html

и что же в ней хорошего?)

я на хабр предлагаю статью про это, кстати

и что же в ней хорошего?)

я о второй говорил)

Хорошо, ещё уточню: проблема в том, что вы используете React загруженный на странице через script тэг, и боитесь что на странице может быть ещё один?

Я делаю виджет с большим количеством функционала, виджет встраивается на сайт клиента. Проект пишется на реакте (потому что сложные интерфейсы). Бандл с нашем кодом включает реакт в том числе, CDN-ы тут ни при чем. Столкнусь ли я со следующими проблемами, если не буду изолировать свой виджет внутри iframe, а буду напрямую херачить в DOM сайта клиента? : - коллизия с версиями реакта (на сайта клиента тоже может быть реакт) - ахтунги от babel-polyfill-ов (типа патчинга прототипов нативных объектов, это может быть неочевидно для кода на сайте клиента)

я о второй говорил)

я тебе о второй и говорил

Я делаю виджет с большим количеством функционала, виджет встраивается на сайт клиента. Проект пишется на реакте (потому что сложные интерфейсы). Бандл с нашем кодом включает реакт в том числе, CDN-ы тут ни при чем. Столкнусь ли я со следующими проблемами, если не буду изолировать свой виджет внутри iframe, а буду напрямую херачить в DOM сайта клиента? : - коллизия с версиями реакта (на сайта клиента тоже может быть реакт) - ахтунги от babel-polyfill-ов (типа патчинга прототипов нативных объектов, это может быть неочевидно для кода на сайте клиента)

Коллизий с версиями реакта не будет, т.к. ваш код импортирует реакт из вашего бандла, а не из window

А вот скрипты на сайте клиента могут случайно залезть в ваш DOM, поэтому лучше изолировать в iframe

я тебе о второй и говорил

- Chrome has a weird fixed scrollbar bug - iframe-у можно выставить высоту, скролло у него не будет - Mobile Safari resizing iframes by default, and you can't override it! - пофикшено - Avoid fixed position elements at all costs. - зачем фиксированные элементы внутри iframe? - CSS Hardware Acceleration appears to be affected - в этом нет ничего плохого, и оно не включено по дефолту Вообще статья заточена под мобильные кейсы

Вообще, именно под такие юзкейзы разрабатывается стандарт Web Components

- Chrome has a weird fixed scrollbar bug - iframe-у можно выставить высоту, скролло у него не будет - Mobile Safari resizing iframes by default, and you can't override it! - пофикшено - Avoid fixed position elements at all costs. - зачем фиксированные элементы внутри iframe? - CSS Hardware Acceleration appears to be affected - в этом нет ничего плохого, и оно не включено по дефолту Вообще статья заточена под мобильные кейсы

Мне пришлось столкнуться с тремя кейсами, когда была необходимость встраивать SPA во фрейме, причем SPA было адаптивное, и очень неприятно было фиксить баги с фреймом на мобильном сафари, который досих пор не фиксится. Единого решения для моббраузеров, увы не нашлось.

Мне пришлось столкнуться с тремя кейсами, когда была необходимость встраивать SPA во фрейме, причем SPA было адаптивное, и очень неприятно было фиксить баги с фреймом на мобильном сафари, который досих пор не фиксится. Единого решения для моббраузеров, увы не нашлось.

ну тут конечно нужно изворачиваться, я тоже писал SPA на ангуляре, которые было iframe

С другой стороные, если не iframe - то очень сильно связаны руки в плане технологий

Но вообще 3rd party на реакте - это сильно

С другой стороные, если не iframe - то очень сильно связаны руки в плане технологий

А где идет соприкосновения разных версий реакта? Если самому вебпаком переименовать эти переменные? На сколько я помню в react-dom есть такая одна переменная

Для чего в виджете иметь отдельный инстанс реакта? Не проще ли добавить реакт в зависимости виджета? Это как во всякие jQuery календарики встраивали бы сам jQuery

ну, чужой сайт – это очень агресивная среда. Стили, которые могут влиять на виджет, скрипты, библиотеки разных версий. Вопрос конечно в функционале виджета и нужен ли там реакт вообще

Для чего в виджете иметь отдельный инстанс реакта? Не проще ли добавить реакт в зависимости виджета? Это как во всякие jQuery календарики встраивали бы сам jQuery

мне кажется это самый адекватный способ

Для чего в виджете иметь отдельный инстанс реакта? Не проще ли добавить реакт в зависимости виджета? Это как во всякие jQuery календарики встраивали бы сам jQuery

Не правильная аналогия, тут скорее, это как в сторонние виджеты перезвонить/ лайков и т.д. встраивали бы jquery, но так и делают же))

Виджет на реакте. Мощно. Туда надо ещё mobx или redux добавить, а можно ещё кучу всяких модных штук и тогда вообще огонь будет :)

ну, может тут виджет = обычный реактовский модуль из компонентов

просто более комплексный

По описанию, это скорее самодостаточный виджет на сторонних сайтах.

тогда это не серьезно

тащить весь реакт ради одного виджета

Может быть не добавлять реакт в зависимость для бандла виджета. А поставлять виджет с react.js

но тоже как-то не айс

150 кб скриптов для виджета. Жирно как-то

тащить весь реакт ради одного виджета

Да, согласен, нужно было брать легкий аналог, Аля riot и подробное, мало весит и есть двуфакторный биндинг

Можно делать проверку на наличие реакта на странице и в случае его отсутствия тащить его из CDN

https://github.com/Lucifier129/react-lite

Можно делать проверку на наличие реакта на странице и в случае его отсутствия тащить его из CDN

Тогда и на версию тоже нужно чекать, так как в будущем могут поломать совместимость и опять возратится он к тому, что нужно будет изолировать

https://github.com/Lucifier129/react-lite

Он полностью повторяет, вырезая только серверный рендеринг и чек на пропсы? Нужно будет попробовать поставить его)

похоже на то.

https://developit.github.io/preact/

Не правильная аналогия, тут скорее, это как в сторонние виджеты перезвонить/ лайков и т.д. встраивали бы jquery, но так и делают же))

Да, так оно и есть. У нас самодостаточный сервис-виджет, типа он-лайн помощников

И реакт мы запихиваем в бандл

150 кб скриптов для виджета. Жирно как-то

Картинки больше весят. Гзипованный реакт, около 30к вроде

Ребята подскажите плиз идею как отрисовать многоуровневое меню неопределенной вложенности?

Рекурсия?

отрисовываю дерево папок

я не могу понять как она к компонентам применима

это же не конкатенация строк и не факториал)

Ветка это будет отдельный компонент

верстку я рекурсией рисую без проблем

вот с компонентами затык

А что сложного? У тебя есть дерево папок

Вот каждый узел - это компонент

+ у меня же там ul li

Компонент сам себя вызывать будет

а если несколько блоков то их нужно пихать в родительский

Вопрос с другой стороны, зачем тебе там компоненты?

ты же уже рисуешь ветку

мне нужны события при нажатии

на раскрытие и на папку

Оберни li в компонент

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

там где ты рисуешь <li>some text</li> рисуй <ComponentLI>some text</ComponentLI>

даже не лист, а часть дерева

ERROR: S client not available

он принимает узел, которые содержит в себе инфу, о себе + инфу о дочерних элементах

компонент рисует инфу о узле + в цикле вызвыет отрисовку всех детей

а дети это те же самые компоненты - которые узлы рисуют

вот тебе и рекурсия + компоненты

спасибо ребят, попробую сейчас переварить это все:)

class Node extends React.Component { renderNodeChildren(node) { } render() { let {node} = this.props; return ( <div> {node.name} {this.renderNodeChildren(node)} </div> ) } }

renderNodeChildren(node) - как раз та функция, которая отрисовывает детей узла

В догонку глянь – http://stackoverflow.com/questions/28205317/how-to-render-child-components-in-react-js-recursively

https://github.com/lhorie/mithril.js а кто пробовал? как впечатления?

Ребята подскажите плиз идею как отрисовать многоуровневое меню неопределенной вложенности?

вот ещё примерчик — https://vuejs.org/examples/tree-view.html. Он хоть и не на реакте, принцип тот же и наглядно очень

Все психологический страх ушел, сделал так: const ComponentUl = props => { if (props.folders) { return ( <ul> {props.folders.map(folder => <ComponentLi {...folder} />)} </ul> ); } return null; }; const ComponentLi = props => { const folder = props.folder; let children = ''; if (props.children) { children = <ComponentUl folders={props.children} /> } return ( <li> {props.title} {children} </li> ); };

все работает

спасибо:)

Все психологический страх ушел, сделал так: const ComponentUl = props => { if (props.folders) { return ( <ul> {props.folders.map(folder => <ComponentLi {...folder} />)} </ul> ); } return null; }; const ComponentLi = props => { const folder = props.folder; let children = ''; if (props.children) { children = <ComponentUl folders={props.children} /> } return ( <li> {props.title} {children} </li> ); };

ключ, где ключ?

реакт ругаться будет

(folder, index) => <CompoentLi {...folder} key={index} />

Pavel ??

лучше id

лучше id

+1

спасибо, теперь почти идеально)

http://www.strawpoll.me/10348977

Привет всем. Может кто помочь с draft.js, не могу понять как его с redux связать. Можете на просто примере с plaintext объяснить? https://github.com/facebook/draft-js/blob/master/examples/plaintext/plaintext.html

Привет всем. Может кто помочь с draft.js, не могу понять как его с redux связать. Можете на просто примере с plaintext объяснить? https://github.com/facebook/draft-js/blob/master/examples/plaintext/plaintext.html

Попробуй по аналогии с этим примером связать react компонент с редуксм https://github.com/erikras/react-redux-universal-hot-example

ребята, привет, есть идеи как реализовать компонент, "склоняющий" слово в зависимости от цифры? для понимания "вам осталось _ дней"

ребята, привет, есть идеи как реализовать компонент, "склоняющий" слово в зависимости от цифры? для понимания "вам осталось _ дней"

react-intl? https://github.com/yahoo/react-intl/wiki/API#string-formatting-apis

ребята, привет, есть идеи как реализовать компонент, "склоняющий" слово в зависимости от цифры? для понимания "вам осталось _ дней"

можно отдельно загуглить pluralize функцию. Там несколько строк кода

https://github.com/blakeembrey/pluralize

даже либа есть))

обожаю эту либу))

лучше formatjs.io юзать

а, это про другое немного

прикольно