А вы локал стейт используете?

Бывает

Я понимаю, интересен вариант реализации hmr на gulp с browser sync без webpack. Видимо такой возможности нет, придётся тянуть вебпак в проект

Для hmr должен быть какой-либо сервер и какой-либо бандлер, у меня есть предположение, как это можно сделать, но пока что это сводится к установке вебпака ?

Для hmr должен быть какой-либо сервер и какой-либо бандлер, у меня есть предположение, как это можно сделать, но пока что это сводится к установке вебпака ?

похоже мне все же придется почитать книжку по вебпаку ? дабы разобраться уже с его конфигами и не стрелять по воробьям

Да ладно уж тебе, там главное один раз всё настроить)

Но я какой-то неправильный, походу, потому что в 2016 году не люблю вебпак ? И тоже до последнего реализовывал всё на gulp

Но я какой-то неправильный, походу, потому что в 2016 году не люблю вебпак ? И тоже до последнего реализовывал всё на gulp

Ресурсы не инлайнишь, бандлы не сплитишь?

Да это то всё понятно) Меня сама идея инлайна немного смущает. Я понимаю, какие задачи это выполняет сейчас, но не удивлюсь, если через пять лет про это даже вспоминать не будут

gulp кстати по идее тоже это всё мог бы, но его разработчики впали в летаргический сон

Да это то всё понятно) Меня сама идея инлайна немного смущает. Я понимаю, какие задачи это выполняет сейчас, но не удивлюсь, если через пять лет про это даже вспоминать не будут

Очень может быть, особенно если HTTP2 взлетит

да, dnd, да и просто теряется состояние компонента который при componentWillMount инициализирует свое состояние.Я конечно понимаю что можно вынести это состояние во внешний стор но проблема в том что реакт поддерживет диффинг только на одном уровне div-а а мне хочется придумать какой-то способ исправить этот недостаток реакта для перемещаемых компонентов между разными уровнями верстки

в общем нашел способ создать MoveContainer который можно перемещать через разные уровни div-ов и это не приведет к unmount-у вложенного компонента - но при этом используется ReactDOM.render, внутренние свойства реакта и также MoveContainer создает дополнительный див-враппер Вот код: function findReactKey(dom) { for (var key in dom) if (key.startsWith("__reactInternalInstance$")) { return key } return null; } var cache = {}; class MoveContainer extends React.Component { renderReactInstance(instance, parentElement){ var element = document.createElement('div'); parentElement.appendChild(element); var reactKey = findReactKey(parentElement); var innerComponent = instance._reactInternalInstance._renderedComponent; innerComponent._hostNode = element; innerComponent._currentElement = null; element[reactKey] = innerComponent; ReactDOM.render({...instance._reactInternalInstance._currentElement}, this.$el); } componentDidMount(){ if(cache[this.props.id]){ clearTimeout(cache[this.props.id].timer); this.renderReactInstance(cache[this.props.id].instance, this.$el); } else { var reactKey = findReactKey(this.$el); delete this.$el[reactKey]; var instance = ReactDOM.render(this.props.children, this.$el); cache[this.props.id] = {instance}; } } componentDidUpdate(){ ReactDOM.render(this.props.children, this.$el); } componentWillUnmount(){ cache[this.props.id].timer = setTimeout(()=>{ delete cache[this.props.id]; ReactDOM.unmountComponentAtNode(this.$el); },0) } divRef=(el)=>{ if(el){ this.$el = el; } }; render(){ return <div ref={this.divRef}></div> } } и демка кому интересно - http://codepen.io/anon/pen/wzJmBQ

Да это то всё понятно) Меня сама идея инлайна немного смущает. Я понимаю, какие задачи это выполняет сейчас, но не удивлюсь, если через пять лет про это даже вспоминать не будут

> Меня сама идея инлайна немного смущает. это ж не какой-то тренд как появились «веб-приложения», так и инлайнить рекомендовать стали. Просто вебпак (субъективно) делает это удобнее всего

https://habrahabr.ru/company/oleg-bunin/blog/310868/

вы читали?

человек в авиасейлс работает на секундочку

человек в авиасейлс работает на секундочку

и что из этого должно следовать?

https://habrahabr.ru/company/oleg-bunin/blog/310868/

Так он не про SPA говорит, а про статические странички с виджетами. Очевидно, что там React не в кассу.

https://habrahabr.ru/company/oleg-bunin/blog/310868/

Вот параграф из статьи, который иллюстрирует её уровень: "Кроме того, если вы программировали на React, то вы знакомы с такой штукой как pure-render-mixin. Суть его в том, чтобы избавиться от работы c virtualDom'ом. Случается очень интересная ситуация близкая к комичной. Сначала господа из Google пару лет продавали нам React как штуку, которая с помощью virtualDOM адски ускоряет работу с DOM, а потом оказывается, что чтобы быстро работать с DOM, нужно исключить virtualDOM. Молодцы, хорошо сделали."

Молодец, автор статьи, хорошо сделал.

Сорян, я не оценил сарказм значит.

А причем тут гугл? Если реакт разработал и пиарит фэйсбук?

Может мужик который тебя собеседовал уволилися, и они потом понабрали кого попало?

Может мужик который тебя собеседовал уволилися, и они потом понабрали кого попало?

риторический вопрос

человек в авиасейлс работает на секундочку

lowdash - одним словом

Вот параграф из статьи, который иллюстрирует её уровень: "Кроме того, если вы программировали на React, то вы знакомы с такой штукой как pure-render-mixin. Суть его в том, чтобы избавиться от работы c virtualDom'ом. Случается очень интересная ситуация близкая к комичной. Сначала господа из Google пару лет продавали нам React как штуку, которая с помощью virtualDOM адски ускоряет работу с DOM, а потом оказывается, что чтобы быстро работать с DOM, нужно исключить virtualDOM. Молодцы, хорошо сделали."

тоже позабавил этот фрагмент, дальше стало неинтересно читать

Оговорился человек насчет гугла.

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

pure-render-mixin действительно, использутся для избежания лишних сравнений virtualDom

> пару лет продавали нам React как штуку, которая с помощью virtualDOM адски ускоряет работу с DOM блин, да кто такое хоть раз говорил)

ну кстати было такое, как я помню )

нет, правильно сказать «virtualDOM адски _упрощает_ работу с DOM». И упрощает, неожиданно мало жертвуя производительностью. Но разумеется жертвуя. Ускорять-то как он может?

так было же много историй из разряда того, что он VirtualDOM максимально уменьшает количество обращений к DOM, за счет чего скорость внезапно увеличивается. А так да, мне тоже всегда казалось, что основная фича virtualDOM в упрощении работы с DOM

мне больше нравится аналогия с F5, т.е. virtualDOM позволяет схожий эффект реализовать без перезагрузки и серьезной потери производительности

ну а так, речь скорее о декларативности и надо чем-то жертвовать

так было же много историй из разряда того, что он VirtualDOM максимально уменьшает количество обращений к DOM, за счет чего скорость внезапно увеличивается. А так да, мне тоже всегда казалось, что основная фича virtualDOM в упрощении работы с DOM

Все верно, vdom как раз о том - как найти разницу между текщим и следующим дом деревом с наименьшим количеством трансформаций

> пару лет продавали нам React как штуку, которая с помощью virtualDOM адски ускоряет работу с DOM блин, да кто такое хоть раз говорил)

Да, было такое. Но ускоряет вроде как по сравнению с остальными фреймворками. А на деле любое приложение на телефонах тормозит

VirtualDOM упрощает работу с DOM максимально простым и универсальным образом. Конечно же не эффективным.

gulp кстати по идее тоже это всё мог бы, но его разработчики впали в летаргический сон

Это не совсем так, они пилят 4й

> пару лет продавали нам React как штуку, которая с помощью virtualDOM адски ускоряет работу с DOM блин, да кто такое хоть раз говорил)

Множество тысяч раз такое говорили

Cycle.js где обсуждают?

Cycle.js где обсуждают?

@frp_ru

Господа, а кто имел дело с react-addons-transition-group и router

Вроде делаю все по мануалом, а не хочет работать componentWillEnter

Это не совсем так, они пилят 4й

Да я знаю ? Но они его уже хз сколько пилят

скоро два года будет

он юзабельный

Есть какой-нибудь человеческий аналог react-helmet?

А то меня прям воротит от него что-то.

Почему

там все на react-side-effect основано оч просто свое можно наподобе сделать

В основном ем, что внутренности в нём прописываются через пропсы, а не нормальные вложенные элементы. Ну и жирноватый он какой-то.

И чо

там все на react-side-effect основано оч просто свое можно наподобе сделать

Вот это тоже.

а, это и бесит) я понял, не знаю, есть аналогичные пакеты

> Because this component keeps track of mounted instances, you have to make sure to call rewind on server, or you'll get a memory leak. Вот это тоже хорошо. Какой-то костыль, ей богу.

Кто-нибудь реакт-роутер в4 использует?

У меня есть <Match pattern="/repositories/:username/create" component={Create} /> <Match pattern="/repositories/:username/:slug" component={Show} />

Перехожу на /repositories/e/create, мне показывает оба компонента — и Create, и Show

Чо делать

Звучит довольно логично, он же метчит все элементы.

Это конечно да, у меня к этому нет вопросов

Меня больше интересует как это нормально разрулить)

repositories/create?defaultUsername=ee сделаю так

Может их вложенными сделать, новый рр это позволяет?

там было что-то про exactly

ребят, помогите пж. есть такая запись, <img src={require("../../../img/target.png")} /> и все ок, но мне нужно динамически подставлять путь к картинке <img src={require({pathToImg})} />. Но это не работает..есть какой выход?

Что именно не работает?

картинки не подгружаются

Проверь через консоль лог, что тебе даёт require({pathToImg})

Кстати, зачем pathToImg оборачивать в {}?

У тебя же получается объект

require({ pathToImg: pathToImg })

вот бы щас картинки в объекты позаворачивать

эхх

я вот об этом

http://stackoverflow.com/questions/32612912/dynamically-add-images-react-webpack

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

вот так работает import LogoImg from 'YOUR_PATH/logo.png'; и так тоже <img src={require('./assets/image.png')} /> . но мне нужно в require передать props

Задай контекст: https://webpack.github.io/docs/context.html#dynamic-require-rewriting

картинки должны лежать в одной папке(пусть даже с вложенностью) и будет require('./src/images' + imageName + '.png')

полностью динамически не получится, т.к. webpack должен знать путь на момент билда