@react_js
React — русскоговорящее сообщество

Обсуждаем React.js и экосистему. См. также: @reactnative_ru, @apollo_ru, @protonnative_ru, @nodejs_ru, @js_ru, @uiux_ru Вакансии и поиск работы: @javascript_jobs Правила: http://bit.ly/our_etiquette Sponsored with ❤️ by www.axept.co

5822 members

Архив канала @react_js 23 мая 2016 г.

02:58:08 ДП
User 143141567
Народ, а какой boilerplate для react можете посоветовать?
03:34:35 ДП
User 35172279
@DenisIzmaylov "www.moscownodejs.ru took too long to respond. This site can’t be reached"
05:23:53 ДП
User 188341932
Всем привет. Подскажите пожалуйста по Draft.js:
Есть форма редактирования комментариев (Editor), есть кнопка "отправить комментарий". Теперь сама проблема, как заставить все это отправлять комментарий? Не пойму как связать кнопку, editor и чтобы комментарии отправлялись.
05:24:33 ДП
User 188341932
Раньше было так
06:08:32 ДП
User 1340580
User 143141567
Народ, а какой boilerplate для react можете посоветовать?
https://github.com/kriasoft/react-starter-kit
github.com/kriasoft/react-starter-kit
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync) - kriasoft/react-starter-kit
06:38:40 ДП
User 119754639
User 143141567
Народ, а какой boilerplate для react можете посоветовать?
http://andrewhfarmer.com/starter-project/
javascriptstuff.com/react-starter-projects
Repositories that you can copy and modify to create your own React app.
07:52:16 ДП
User 1682650
я написал небольшую обертку для редукса которая позволяет коннектить компонент к срезу редуксовского стейта и работать с ним в стиле чисто реактовского setState. В разы уменьшает количество бойлерплейта. Зацените https://medium.com/@nosovsh/redux-without-reducers-actions-and-constants-wat-72fcd838c641#.b14h8aadt
medium.com/@nosovsh/redux-without-reducers-actions-and-constants-wat-72fcd838c641
Redux is awesome. But in can be too verbose if you use it directly without any wrappers or helpers.
08:02:43 ДП
User 185980313
вроде ок, но только елси в первом примере перевести на stateless, там тоже будет локоничнее )
08:11:17 ДП
User 1682650
я специально во всех примерах сделал не стейтлесс, что бы было по честному) потому что не везде получится использовать
08:24:41 ДП
User 1682650
И погоди, как раз в первом примере stateless не получится, там же как раз нужен реактовский стейт))
08:26:04 ДП
User 101934369
User 1682650
я написал небольшую обертку для редукса которая позволяет коннектить компонент к срезу редуксовского стейта и работать с ним в стиле чисто реактовского setState. В разы уменьшает количество бойлерплейта. Зацените https://medium.com/@nosovsh/redux-without-reducers-actions-and-constants-wat-72fcd838c641#.b14h8aadt
medium.com/@nosovsh/redux-without-reducers-actions-and-constants-wat-72fcd838c641
Redux is awesome. But in can be too verbose if you use it directly without any wrappers or helpers.
Сам хотел что-то подобное написать :)
Концепутально это похоже на линзы
08:26:51 ДП
User 164696606
Некорректное сравнение. В итоговом коде всё равно есть actions.js и прочая шняга
08:27:11 ДП
User 164696606
если я правильно понял
08:27:46 ДП
User 1682650
нет, в итогово нету
08:27:47 ДП
User 101934369
User 164696606
Некорректное сравнение. В итоговом коде всё равно есть actions.js и прочая шняга
А, точно.
08:28:42 ДП
User 1682650
https://gist.github.com/nosovsh/38fda16f55df6f61ca316bf1729f8163#file-myformreduceless-js
gist.github.com/nosovsh/38fda16f55df6f61ca316bf1729f8163
08:38:44 ДП
User 164696606
А, ну мы получается тригеря setState из компонента, диспатчится некий сгенерированный экшон, который приходит в редюсер и дальше всё как обычно?
08:39:59 ДП
User 1682650
потом редюсер из либы его перехватит и сам извенит стейт. То есть больше писать редюсеров не нужно
08:42:30 ДП
User 101934369
User 1682650
я написал небольшую обертку для редукса которая позволяет коннектить компонент к срезу редуксовского стейта и работать с ним в стиле чисто реактовского setState. В разы уменьшает количество бойлерплейта. Зацените https://medium.com/@nosovsh/redux-without-reducers-actions-and-constants-wat-72fcd838c641#.b14h8aadt
medium.com/@nosovsh/redux-without-reducers-actions-and-constants-wat-72fcd838c641
Redux is awesome. But in can be too verbose if you use it directly without any wrappers or helpers.
А эта либа подразумевает, что локального стейта вообще нет и всё в сторе? Или я что-то пропустил?
08:42:43 ДП
User 1682650
то есть если сделать setState({'value': 'blablah'}) в компоненте, который обернут в connectSlicedState('contactsPage.leftPanelWidget')(Component), то в редуксовском стейте изменится(или добавится) вот эта часть стейта: contactsPage.leftPanelWidget.value на 'blablah'
08:43:11 ДП
User 1682650
ну благодаря ей можно избавиться от локального стейта, да. Он ей не нужен. Но ничто не мешает использовать и то и то
08:43:44 ДП
User 101934369
User 1682650
ну благодаря ей можно избавиться от локального стейта, да. Он ей не нужен. Но ничто не мешает использовать и то и то
Добавь, пожалуйста, примерчик с локальным стейтом. А то я что-то не догоняю...
08:44:03 ДП
08:44:05 ДП
User 101934369
Ну или gist хотя-бы
08:44:11 ДП
User 164696606
хм, неплохо. Но вот экшоны, которые приводят к запросам на сервер наверно лучше бы вынести отдельно
08:46:23 ДП
User 164696606
Есть ещё один подход. Но в принципе согласен, что много боилерплейта приходится писать https://github.com/erikras/ducks-modular-redux
github.com/erikras/ducks-modular-redux
A proposal for bundling reducers, action types and actions when using Redux - erikras/ducks-modular-redux
08:47:00 ДП
User 1682650
User 164696606
хм, неплохо. Но вот экшоны, которые приводят к запросам на сервер наверно лучше бы вынести отдельно
эту обертку, можно так же использовать с redux-thunk или чем то еще. из асинхронных экшенов можно вызывать dispatch(setStateByPath('entities.posts.123.title', {title: 'new title'})) когда объект получен и он запишется вот в эту  часть стейта полученый объект. и не нужно будет писать константы и редюсеры, что бы это отловить
08:48:30 ДП
User 1682650
User 164696606
Есть ещё один подход. Но в принципе согласен, что много боилерплейта приходится писать https://github.com/erikras/ducks-modular-redux
github.com/erikras/ducks-modular-redux
A proposal for bundling reducers, action types and actions when using Redux - erikras/ducks-modular-redux
ducks это что то вроде стандарта для написания экшенов/редюсеров/констант, что бы можно было потом этот модуль выложить на гитхаб и другие знали как его использовать. немного другое
08:59:36 ДП
User 1682650
User 101934369
Добавь, пожалуйста, примерчик с локальным стейтом. А то я что-то не догоняю...
https://gist.github.com/nosovsh/bfc2e04686c391056cc2377f0ab4ff30
вот пример где оба стейта (реактовский и кусок редуксовского) живут бок о бок в одном компоненте.
в комментах там описал. Если непонятно выразил свою мысль, пиши, попробую уточнить
gist.github.com/nosovsh/bfc2e04686c391056cc2377f0ab4ff30
09:05:17 ДП
User 101934369
User 1682650
https://gist.github.com/nosovsh/bfc2e04686c391056cc2377f0ab4ff30
вот пример где оба стейта (реактовский и кусок редуксовского) живут бок о бок в одном компоненте.
в комментах там описал. Если непонятно выразил свою мысль, пиши, попробую уточнить
gist.github.com/nosovsh/bfc2e04686c391056cc2377f0ab4ff30
Понял, спасибо!
09:11:39 ДП
User 39759851
что думаете про cycle.js.org
09:19:32 ДП
User 141822776
как-то после подобного вопроса в гиттере начался холивар на целый день https://gitter.im/MoscowJS/chat?at=571cad88d47413c07dccbe68
gitter.im/MoscowJS/chat?at=571cad88d47413c07dccbe68
@vmakhaev: а кто-то может в двух словах сформулировать в чём ее интересность? Или сравнить с реактом тем же?
09:21:45 ДП
User 111624951
User 39759851
что думаете про cycle.js.org
Новая игрушка.
09:24:02 ДП
User 39759851
User 111624951
Новая игрушка.
а какая старая?
09:24:50 ДП
User 185980313
в cycle.js сейчас выпиливают зависимость от rx.js и станет вполне норм
12:24:40 ПП
User 187983007
ребят, почему может не работать хот-ролоад? 
http://prntscr.com/b7epkz
prnt.sc/b7epkz
Captured with Lightshot
12:26:04 ПП
User 185980313
потому что, все приложение нужно обновить и изменения это повлекли )
12:26:21 ПП
User 187983007
так он вообще не работает
12:26:39 ПП
User 187983007
любое изменение влечет за собой нужду обновлять всю страницу
12:27:21 ПП
User 187983007
если в конфиге вебпака указать entry: [
        'webpack-hot-middleware/client?http://localhost:3000//__webpack_hmr&reload=true',
        './src/index'
    ],
12:27:33 ПП
User 187983007
reload=true то работает
12:27:39 ПП
User 187983007
но перезагружает всю страницу
12:28:04 ПП
User 187983007
а не так, как в dev-server только определенную компоненту
12:32:10 ПП
User 128823685
а раньше всё работало? может у тебя настроено что не так. посмотри на последний react-transform-boilerplate
12:43:41 ПП
User 153807368
Есть вообще какие то компоненты на которых hmr работает?
12:50:54 ПП
User 25721027
Я как-то по этой статье делал - все норм взлетело https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96
medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96
Webpack’s HMR along with React-Hot-Loader makes developing React apps very productive. But depending on the type of the React app (client…
12:52:12 ПП
User 187983007
да потому что там dev-server, у меня на нем тоже работает
12:52:37 ПП
User 187983007
а у меня webpack-hot-middleware и webpack-dev-middleware
12:59:02 ПП
User 25721027
User 187983007
а у меня webpack-hot-middleware и webpack-dev-middleware
у меня с ними была такая же проблема - там и не решил (
01:00:46 ПП
User 25721027
https://github.com/raquo/minimal-hapi-react-webpack/blob/master/src/webpack-dev-server.js
github.com/raquo/minimal-hapi-react-webpack/blob/master/src/webpack-dev-server.js
minimal-hapi-react-webpack - Minimal Hapi + React + Webpack + HMR (hot module reloading) Sandbox
01:01:53 ПП
User 128823685
"просто посмотри как сделать в redux и сделай также" =)
01:31:18 ПП
User 117372400
В репозитории 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
Вопрос: как они это делают? Может где-то есть статейка об этом?
github.com/facebook/draft-js/blob/master/src/component/base/DraftEditor.react.js
A React framework for building text editors. Contribute to facebook/draft-js development by creating an account on GitHub.
01:31:30 ПП
User 117372400
Чувствую что разгадка где-то рядом, но пока не могу найти) https://github.com/facebook/fbjs/blob/master/src/__forks__/cx.js#L12-L27
github.com/facebook/fbjs/blob/master/src/__forks__/cx.js
fbjs - A collection of utility libraries used by other Facebook JS projects.
01:33:46 ПП
User 185980313
ты про уникальные имена классов? если да, то это css modules
01:34:40 ПП
User 117372400
вероятно да, но как подменить имена классов draft-js в своем проекте?
01:37:06 ПП
User 63637623
User 117372400
В репозитории 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
Вопрос: как они это делают? Может где-то есть статейка об этом?
github.com/facebook/draft-js/blob/master/src/component/base/DraftEditor.react.js
A React framework for building text editors. Contribute to facebook/draft-js development by creating an account on GitHub.
https://habrahabr.ru/post/276417/ )
habrahabr.ru/post/276417
Все CSS-селекторы живут в глобальной области видимости. Каждому, кто когда-либо имел дело с CSS, приходилось мириться с этой глобальной особенностью. Модель,...
01:40:14 ПП
User 117372400
со своими файлами все понятно, import s from './myStyles.css' и <div className={s.someClassName} />, но вот DraftEditor.react.js я не должен менять
01:44:28 ПП
User 128823685
https://facebook.github.io/draft-js/docs/advanced-topics-block-styling.html
01:47:35 ПП
User 117372400
тут можно менять стили только блоков (html-тегов типа ol, ul, blackquote и тп), но нет api для переопределения имен классов используемых в 'DraftEditor.react.js'
01:52:46 ПП
User 117372400
Например как переопределить имя класса`DraftEditor/editorContainer` ? В их CSS-файле он кстати выглядит чуть по-другому: .DraftEditor-editorContainer
06:02:38 ПП
User 40529464
Коллеги, а кто-нибудь использует coding styleguide для React'а или ограничиваетесь только ESLint?
06:11:05 ПП
User 35172279
^^ https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
06:15:55 ПП
User 40529464
User 35172279
^^ https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
спасибо, посмотрю. Сейчас смотрю на https://github.com/airbnb/javascript/tree/master/react
github.com/airbnb/javascript/tree/master/react
JavaScript Style Guide. Contribute to airbnb/javascript development by creating an account on GitHub.
06:43:49 ПП
User 164696606
https://github.com/benmosher/eslint-plugin-import
github.com/benmosher/eslint-plugin-import
ESLint plugin with rules that help validate proper imports. - benmosher/eslint-plugin-import