как-то после подобного вопроса в гиттере начался холивар на целый день https://gitter.im/MoscowJS/chat?at=571cad88d47413c07dccbe68

что думаете про cycle.js.org

Новая игрушка.

Новая игрушка.

а какая старая?

в cycle.js сейчас выпиливают зависимость от rx.js и станет вполне норм

ребят, почему может не работать хот-ролоад? http://prntscr.com/b7epkz

потому что, все приложение нужно обновить и изменения это повлекли )

так он вообще не работает

любое изменение влечет за собой нужду обновлять всю страницу

если в конфиге вебпака указать entry: [ 'webpack-hot-middleware/client?http://localhost:3000//__webpack_hmr&reload=true', './src/index' ],

reload=true то работает

но перезагружает всю страницу

а не так, как в dev-server только определенную компоненту

а раньше всё работало? может у тебя настроено что не так. посмотри на последний react-transform-boilerplate

Есть вообще какие то компоненты на которых hmr работает?

Я как-то по этой статье делал - все норм взлетело https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96

да потому что там dev-server, у меня на нем тоже работает

а у меня webpack-hot-middleware и webpack-dev-middleware

а у меня webpack-hot-middleware и webpack-dev-middleware

у меня с ними была такая же проблема - там и не решил (

https://github.com/raquo/minimal-hapi-react-webpack/blob/master/src/webpack-dev-server.js

"просто посмотри как сделать в redux и сделай также" =)

В репозитории draft-js используются особые имена классов, например (DraftEditor/editorContainer): https://github.com/facebook/draft-js/blob/master/src/component/base/DraftEditor.react.js#L216-L221 Но в продакшене в facebook они чудестным образом изменены: https://snag.gy/Q256MJ.jpg Вопрос: как они это делают? Может где-то есть статейка об этом?

Чувствую что разгадка где-то рядом, но пока не могу найти) https://github.com/facebook/fbjs/blob/master/src/__forks__/cx.js#L12-L27

ты про уникальные имена классов? если да, то это css modules

вероятно да, но как подменить имена классов draft-js в своем проекте?

В репозитории draft-js используются особые имена классов, например (DraftEditor/editorContainer): https://github.com/facebook/draft-js/blob/master/src/component/base/DraftEditor.react.js#L216-L221 Но в продакшене в facebook они чудестным образом изменены: https://snag.gy/Q256MJ.jpg Вопрос: как они это делают? Может где-то есть статейка об этом?

https://habrahabr.ru/post/276417/ )

со своими файлами все понятно, import s from './myStyles.css' и <div className={s.someClassName} />, но вот DraftEditor.react.js я не должен менять

https://facebook.github.io/draft-js/docs/advanced-topics-block-styling.html

тут можно менять стили только блоков (html-тегов типа ol, ul, blackquote и тп), но нет api для переопределения имен классов используемых в 'DraftEditor.react.js'

Например как переопределить имя класса`DraftEditor/editorContainer` ? В их CSS-файле он кстати выглядит чуть по-другому: .DraftEditor-editorContainer

Коллеги, а кто-нибудь использует coding styleguide для React'а или ограничиваетесь только ESLint?

^^ https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules

^^ https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules

спасибо, посмотрю. Сейчас смотрю на https://github.com/airbnb/javascript/tree/master/react

https://github.com/benmosher/eslint-plugin-import

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

mobx используй)

С этим могут возникнуть проблемы в виде дедлайна)

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

MapStateToProps, фактически работает как подписка на фрагменты

subscribe позволяет делать dispatch при изменении стейта

subscribe позволяет делать dispatch при изменении стейта

Не понял)

У меня форма, при изменении полей я сохраняю их значения в стейт и тут же надо ее засабмитить и получить данные

и соответственно их тоже в стор положить

из mapStateToProps я не дотянусь до dispatch, из mapDispatchToProps до стейта, поправь, если что-то не так)

есть еще третий метод в коннекте

mergeProps

в нем есть все (:

там же только переданные пропсы в нем?

ни диспатча, ни стейта всего

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

ох и да) пальцы заплетаются, когда надо диспатч передавать в mergeProps )

попробую)

У меня форма, при изменении полей я сохраняю их значения в стейт и тут же надо ее засабмитить и получить данные

Делаешь сабмит, передаешь в этот сабмит локальный переменные стейта компонента, сабмит дергает dispatch, экшены пишут в стор через редьюсеры. Твоя задача решается классическим redux-way

Ну вот меня интересует пункт - делаешь сабмит)

Хочется сабмит не руками делать для каждого поля

Так сделай экшен, который будет принимать тип и значение поля

Или как там у тебя

И положить его в каждый компонент с филдом?)

Эм

Не понял )

Я не понимаю где тогда экшн диспатчить

В идеале хотелось, чтобы в одном месте этот диспатч лежал и тригерился при изменении определенных полей стейта

У тебя каждый филд - отдельный компонент ?

да, у каждого своя логика и формат их фрагмета в стейте

фрагмента*

какие-то саджестят, какие-то панельки открывают с дополнительным функционалом и т.д.

Ну это хреново)

ERROR: S client not available

:D

Получается твои компоненты не реюзабельны

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

Вчера мне никто так и не подсказал как переопределить имена классов в Draft.js, так что если вдруг что вспомниться прошу сюда: https://github.com/facebook/draft-js/issues/413

Вчера мне никто так и не подсказал как переопределить имена классов в Draft.js, так что если вдруг что вспомниться прошу сюда: https://github.com/facebook/draft-js/issues/413

у фейсбука в общем-то легко может быть своя система сборки/парсинга, которая модифицирует именна классов и которая к draft.js никак не относится. Если после сборки проекта — https://github.com/facebook/draft-js#examples — ты получаешь на выходе неизменённые классы, значит так и есть, переименование происходит не внутри этого модуля. Что логично и ожидаемо. А о том, как в целом такие вещи делаются, вчера писали уже.

я так и не понял зачем их переопределять

Сборка (draft-js$ npm run build) собирает просто в один файл, имена классов при этом не меняются

Чтобы иметь несколько по-разному стилизованных редакторов на одной странице же

конечно не меняются! ты же собираешь build либы... а рандомные classNames - результат сборки проекта, использующего эту либу

когда ты делаешь nom run build ты получаешь сбилденную либу, на этом этапе имена классов должны остаться оригинальными... она же не знает как будет использоваться, вдруг её через script подключат и всё

так вопрос в том что нужно настроить в процессе сборки проекта, чтобы не менять оригинальные файлы либы

а, я понял

а у тебя сейчас css modules как я понимаю используются?

ага

а они как я понял переопределяют этот файл во время сборки проекта: https://github.com/facebook/fbjs/blob/master/src/__forks__/cx.js#L12-L27

{ test: /\.css$/, exclude: /node_modules/, loader: "style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]" }, { test: /\.css$/, include: /node_modules/, loader: "style!css-loader" },

ну или что-то в этом роде, создай для node_modules отдельное правило

Со стилями нет проблем, добавили лоадер и готово, как заставить Draft.js использовать измененные имена классов)

видимо никак, ты же сам дал ссылку... они в коде прописаны

прописаны, но используют cx.js)

ну а если обернуть один эдитор в div.theme1 другой в div.theme2 и пиши в стилях как хочешь

переопределяй в зависимости от className родителя

Чтобы иметь несколько по-разному стилизованных редакторов на одной странице же

гм, а как насчёт по-старинке дать родителям разные имена классов и на основе этого "несколько по-разному" стилизовать редактор? :)

ну а если обернуть один эдитор в div.theme1 другой в div.theme2 и пиши в стилях как хочешь

да, вот так))

.theme1 .DraftEditor/root ...

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

Парни, какие есть способы автоматизированного тестирования UI (можно даже без привязки к React) в web? Что есть для тестов даже на mobile devices и IE8?

selenium же

и gemini чтобы совсем круто было

https://github.com/gemini-testing/gemini

про gemini Миша Ларченко рассказывал на Frontend Union Conf, они как раз им реакт компоненты тестируют

хм, или не gemini у них, но про тестирование UI он точно рассказывал)