@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 25 мая 2016 г.

06:55:43 ДП
User 23384802
Как полгода назад советовали sound-redux, так и сейчас)
06:56:24 ДП
User 211604891
Утра всем! 📡 Погогите плиз отобрать лучшие доклады по JS на DC'16 http://devconf.ru/ru/offers/js 🎓 Нужно оставить 8 лучших - пиарные отсеить 🙈
07:18:00 ДП
User 185980313
Архитектура фронтенда в 2016
React Native, Relay и GraphQL - опыт в production
07:18:15 ДП
User 185980313
По мне эти хорошими должны быть докладами
07:19:18 ДП
User 211604891
Если не сложно поставьте пойду 👍  - на то что вам интересно
07:26:34 ДП
User 185980313
User 211604891
Если не сложно поставьте пойду 👍  - на то что вам интересно
А когда будут точно сформированы списки докладчиков?)
07:28:51 ДП
User 211604891
К 2 июня..
08:21:46 ДП
User 309556
а можно как-то отменить свою завку?
08:22:10 ДП
User 56924675
Только архитектура фронтенда
08:22:13 ДП
User 56924675
остальное - не нужно
08:22:23 ДП
User 56924675
User 309556
а можно как-то отменить свою завку?
не успеваешь?)
08:22:26 ДП
08:22:48 ДП
08:23:09 ДП
User 53722498
ну вот а я проголосовал за него
08:25:43 ДП
User 309556
у меня уже второй год с девконф не складывается(
09:26:40 ДП
User 185980313
Относительно не давно появилась альтернатива вебпаку, напомните как называется?
09:27:03 ДП
09:27:19 ДП
User 185980313
Да, спасибо
09:27:56 ДП
User 89478045
Ну альтернативой его вряд ли назовешь
09:28:13 ДП
User 89478045
Но упаковывать либы удобненько
09:39:56 ДП
User 144169875
Привет чатик, подскажите, что сейчас самый свежак для react hot reload?
Использовал react-transform-hmr, зашел на страницу проекта, а он вдруг deprecated. 
Там же говорят react-hot-loader использовать. Есть мысли на этот счет?
09:41:16 ДП
User 128823685
пока смотри сюда... https://github.com/gaearon/react-hot-boilerplate
github.com/gaearon/react-hot-boilerplate
Minimal live-editing example for React. Contribute to gaearon/react-hot-boilerplate development by creating an account on GitHub.
09:41:51 ДП
User 128823685
когда будет новый rhl, обновится и бойлерплейт
09:42:23 ДП
User 128823685
там же уже есть бранч с альфой rhl3
09:42:39 ДП
User 144169875
ага, про него и думал. Спасибо
10:09:54 ДП
User 1682650
друзья, мне интересно ваше мнение об эксперементальном подходе к работе с редуксом, который мы испольуем в текущем довольно крупном проекте. Он кажется нам весьма классным и сильно повышающим качество кода. Суть в том, что ты коннектишь компонент к срезу редуксовского стейта и можешь работать с этим куском стейта примерно так же как если бы  это был обычный реактовский стейт. через setState, replaceState. 
Получается не нужно писать акшены/константы/редюсеры на каждый чих. И за действие которое комонент хочет совершить он отвечает сам, а не размазывает эту ответственность между собой, экшеном и редьюсером.
10:10:01 ДП
User 1682650
подробнее тут: https://medium.com/@nosovsh/redux-without-reducers-actions-and-constants-wat-72fcd838c641#.uqmlw2bnl
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.
10:10:19 ДП
User 1682650
простенькая либа, которую для этого написали, тут: https://github.com/nosovsh/reduceless
github.com/nosovsh/reduceless
reduceless - Simple abstraction over Redux to make state management as easy as React's vanilla setState() but with advantages of Redux.
10:12:11 ДП
User 68520717
👍 я читал статью и мне нравится такой подход, но не пробовал ещё
10:14:42 ДП
User 57648988
User 1682650
друзья, мне интересно ваше мнение об эксперементальном подходе к работе с редуксом, который мы испольуем в текущем довольно крупном проекте. Он кажется нам весьма классным и сильно повышающим качество кода. Суть в том, что ты коннектишь компонент к срезу редуксовского стейта и можешь работать с этим куском стейта примерно так же как если бы  это был обычный реактовский стейт. через setState, replaceState. 
Получается не нужно писать акшены/константы/редюсеры на каждый чих. И за действие которое комонент хочет совершить он отвечает сам, а не размазывает эту ответственность между собой, экшеном и редьюсером.
это же курсоры по сути? baobab, clojure om v1, ValueLinks — вот это всё?
10:15:20 ДП
User 39182759
то есть вы делаете setState, но он не устанавливает стейт, а делает что-то еще?
10:22:07 ДП
User 143141567
А если у меня два разных компонента, которые могут работать с одним куском state, и допустим есть метод notSimpleSetState, которые изменяет state,но перед этим еще что-то делая ( тот же аякс запрос ). Как мне впихнуть этот метод в оба компонента? Дублировать? Наследовать один от другого? Либо выносить метод отдельно куда-то ( что по сути тот же action )
10:24:04 ДП
User 1682650
User 39182759
то есть вы делаете setState, но он не устанавливает стейт, а делает что-то еще?
обертка передает state и setState через props в компонент. В обертке оказываешь какая часть редкусовского стейта тебе нужна. например 'blog_page.left_sidebar.form'. Внутри компонента можно читать то что лежит в этой части редуксовского стейта из "state" пропса(наприме, "state.first_name") и писать в него обратно (например setState({"first_name": "ololo"})). И этот setState вызовет свой экшен и запишет это значение в редуксовский стейт по тому пути, по которому ты указал. То есть технически локальный стейт компонента вообще не используется, идет работа сразу с редуксовским(из-за этого нет проблем с рассинхронизацией стейтов, он всегда один глобальный), а для разработчика все выглядит очень похожим на работу с локальным реактовским стейтом
10:26:51 ДП
User 1682650
User 57648988
это же курсоры по сути? baobab, clojure om v1, ValueLinks — вот это всё?
baobab и иже с ним это отдельные сложные штуки добавляющие свои конецпции и все такое. Здесь же просто удобная работа с редуксом
ValueLink чем то похоже, но во-первых у нас нет этой скрытой магии two-way data binding(из-за который они  deprecated). Ты сам, явно вызываешь setState когда нужно, а во вторых ValueLink работает с локальным стейтом, а мы используем глобальный редуксовский стейт
10:31:23 ДП
User 1682650
User 39182759
то есть вы делаете setState, но он не устанавливает стейт, а делает что-то еще?
мы "устанавливаем"(изменяем) кусок редуксовского стейта, который нужен компоненту. В кишках эта обертка вызывает своей экшен передавая ему путь до этого стейта и твое новое значение и ловит этот экшен в своем редюсере, где и устанавливает и записывает это значение.
То есть каждый компонент коннектится к своему куску редуксовсего стейта и дальше делает со своим куском что хочет. И естественно несколько компонентов могут присобачиваться к отдному и тому же куску. И вот тут то получается весь профит того, что весь стейт хранится в одном месте, а не размазан по компонентам
10:40:41 ДП
User 1682650
User 143141567
А если у меня два разных компонента, которые могут работать с одним куском state, и допустим есть метод notSimpleSetState, которые изменяет state,но перед этим еще что-то делая ( тот же аякс запрос ). Как мне впихнуть этот метод в оба компонента? Дублировать? Наследовать один от другого? Либо выносить метод отдельно куда-то ( что по сути тот же action )
Необходимость работать разным комопнентам с одним и тем же куском это одна из причин почему мы это все используем, а не просто локальные стейты у каждого из этих компонентов.
логику notSimpleSetState тебе все равно придется где-то писать. Это твоя кастомная бизнес логика, которую никакая либа не напишет. Дальше вопрос, где эту логику описывать? В голом редуксе эта логика получается размазана. Часть ее приходится делать в компоненте (например, если нужно опираться на другие части стейта, собственно ловить события пользователя и др), часть в акшене(если что то асинхронное), часть в редюсере(собственно установка значения).  Мы со временем начали путаться в этом насильственном разделении. И в новом подходе главное, что компонент отвечает за всю эту логику, с него весь спрос. А где он ее описывает уже его дело. Это может быть отдельная хелпер функция, может быть просто метод объекта(если логика простая), может быть инлайн () =>setState(...), может быть какой то отдельные класс для бизнес апи.
10:43:20 ДП
User 1682650
User 143141567
А если у меня два разных компонента, которые могут работать с одним куском state, и допустим есть метод notSimpleSetState, которые изменяет state,но перед этим еще что-то делая ( тот же аякс запрос ). Как мне впихнуть этот метод в оба компонента? Дублировать? Наследовать один от другого? Либо выносить метод отдельно куда-то ( что по сути тот же action )
И еще важно, что использование этого подхода (этой либы) не ограничивает в использовании редукса "обычным" способом. В первую очередь она хороша для простых set/get операций (установка фильтра, выбор активного таба и др) для которых не хочется писать кучу банальны экшенов, констант, редюсеров. А для асинхронных вещей можно продолжать использовать любимые вещи(redux-thunk,  saga, graphql и др)
10:43:51 ДП
User 1682650
User 68520717
👍 я читал статью и мне нравится такой подход, но не пробовал ещё
ждем отзывов! есть куча идей как развивать подход дальше
10:50:02 ДП
User 143141567
User 1682650
И еще важно, что использование этого подхода (этой либы) не ограничивает в использовании редукса "обычным" способом. В первую очередь она хороша для простых set/get операций (установка фильтра, выбор активного таба и др) для которых не хочется писать кучу банальны экшенов, констант, редюсеров. А для асинхронных вещей можно продолжать использовать любимые вещи(redux-thunk,  saga, graphql и др)
хорошо, попробую у себя в проекте)
10:51:13 ДП
User 1682650
User 143141567
хорошо, попробую у себя в проекте)
👻
10:53:05 ДП
User 111624951
User 57648988
это же курсоры по сути? baobab, clojure om v1, ValueLinks — вот это всё?
удваиваю, это курсоры
10:54:06 ДП
User 111624951
И если бы мой текущий проект был на react, то я именно их бы использовал.
11:04:40 ДП
User 128823685
выглядит годно, надо будет попробовать
11:34:54 ДП
User 153807368
присоединяюсь, идея отличная 👍
11:36:54 ДП
User 111624951
@trashgenerator https://github.com/Yomguithereal/baobab
github.com/Yomguithereal/baobab
baobab - JavaScript persistent and optionally immutable data tree with cursors.
11:46:44 ДП
User 1682650
User 111624951
удваиваю, это курсоры
Курсоры очень похожая идея (и это хорошо, меньше концепций больше места в мозгу!), спасибо за наводку. Буду изучать глубже. Особенно кто как их использует с редуксом.
баобаб это скорее альтернатива редуксу. В целом мне нравится редукс, не знаю баобаб "лучше" или "хуже", но слезать с редукса по середине большого проекта анриал, а вот изменить подход к его использованию можно
11:47:55 ДП
User 1682650
@maullerz @cloudo58 буду рад услышать потом ваши мысли
11:51:36 ДП
User 151893222
эммм, альтернатива? baobao больше похож на менеджер данных с иммутабельностью, по типу Immutable.js, чем на альтернативу редаксу.
11:58:31 ДП
User 1682650
Vadim  ну значит это альтернатива обычным джаваскрипт объектам, которые храняться в стейте. Опять же таки не уверен, что нужно от них отказываться в пользу баобаба/иммутейблжс только из-за курсоров. Много других плюсов и минусов, которые надо рассматривать
12:11:27 ПП
User 150513139
Подскажите плз я собираю вебпаком небольшое учебное приложение, и оно собирается 4937ms
12:11:51 ПП
User 150513139
var webpack           = require('webpack');
var merge             = require('webpack-merge');
var NpmInstallPlugin  = require('npm-install-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject  : 'body'
});

var TARGET = process.env.npm_lifecycle_event;

var common = {
  cache  : true,
  debug  : true,
  context: __dirname + '/app',
  entry  : {
    main: './index.js'
  },
  output: {
    path: ${__dirname}/dist,
    filename: '[name].js',
    chunkFilename: '[id].js',
    sourceMapFilename: '[file].map'
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.less']
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      include: ${__dirname}/app,
      loader: 'babel-loader'
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
    }, {
      test: /\.less$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!less-loader?sourceMap')
    }, {
      test: /\.woff$/,
      loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=[path][name].[ext]'
    }, {
      test: /\.woff2$/,
      loader: 'url-loader?limit=10000&mimetype=application/font-woff2&name=[path][name].[ext]'
    }, {
      test: /\.(eot|ttf|svg|gif|png)$/,
      loader: 'file-loader'
    }]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new ExtractTextPlugin('[name].css')
  ]
};

if (TARGET === 'dev' || !TARGET) {
  module.exports = merge(common, {
    devtool: 'eval-source-map',
    devServer: {
      port: 8090,
      historyApiFallback: true,
      hot: false,
      contentBase: ${__dirname}/dist
    },
    watch: true,
    plugins: [
      new NpmInstallPlugin({
        save: true // --save
      })
    ]
  });
}
if (TARGET === 'build') {
  module.exports = merge(common, {
    devtool: 'source-map',
    output: {
      path: ${__dirname}/dist
    },
    plugins: [
      HTMLWebpackPluginConfig
    ]
  });
}
12:12:03 ПП
User 150513139
фот конфиг
12:15:49 ПП
User 111624951
Спасибо, но лучше куда-нибудь на jsfiddle или codepen.io выложить
codepen.io
A front end web development playground.
12:16:00 ПП
User 117372400
5 сек это ж вроде нормально, не?)
12:16:32 ПП
User 150513139
http://codepen.io/pen/?editors=0010
codepen.io/pen/?editors=0010
...
12:16:49 ПП
User 150513139
так как-то хз...
12:16:59 ПП
User 117372400
можно добавить include к бабель лоадеру чтоб он только нужные файлы транспилил, и пропускал всякие нод модули
12:17:08 ПП
User 1682650
User 117372400
5 сек это ж вроде нормально, не?)
у нас уже минуту наверно точно компилится)
12:17:25 ПП
User 117372400
а вот минута это перебор
12:17:34 ПП
User 117372400
если для дев режима)
12:18:01 ПП
User 1682650
если он уже запущен, то почти моментально пересобирает изменения. это если заново запускать
12:18:06 ПП
User 150513139
та и 5 сек для dev - много... я подозреваю шо это из-за инклудов
12:18:47 ПП
User 150513139
я мож не прав но в каждой компоненте пишу
import React from 'react';
12:19:01 ПП
User 1682650
все правильно
12:19:27 ПП
User 117372400
укажи в include путь к своим исходным файлам: https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js#L51-L54
github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js
react-starter-kit - React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)
12:19:46 ПП
User 117372400
типа такого, возможно чуть чуть сократит время сборки)
12:23:03 ПП
User 150513139
к либам тоже?
12:23:39 ПП
User 117372400
нет, либы же не надо транспилить ES7/ES6 -> ES5
12:24:04 ПП
User 39182759
а в режиме вотча за сколько происходит перекомпиляция?
12:25:27 ПП
User 39182759
а NpmInstallPlugin не тормозит ли?
12:25:27 ПП
User 150513139
ну стока же
12:25:28 ПП
12:27:29 ПП
User 150513139
тю ток шо понял шо у меня инклуд для бабеля стоит..
12:35:13 ПП
User 4274761
это неправильная ссылка)
12:35:13 ПП
User 4274761
http://codepen.io/pen/?editors=0010
codepen.io/pen/?editors=0010
...
12:36:54 ПП
User 23384802
@trashgenerator Выглядит интересно, но внутри компонента всю логику писать бы не стал, чтобы каши не было. И возникает как раз вопрос - а в какие файлы вы потом переносите весь этот код с setState. Это лежит рядом в утилсе с компонентом? А если надо нескольким компонентам?
12:38:38 ПП
User 150513139
https://jsfiddle.net/#&togetherjs=wMBrqMwUrN
jsfiddle.net
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
12:42:44 ПП
User 1682650
User 23384802
@trashgenerator Выглядит интересно, но внутри компонента всю логику писать бы не стал, чтобы каши не было. И возникает как раз вопрос - а в какие файлы вы потом переносите весь этот код с setState. Это лежит рядом в утилсе с компонентом? А если надо нескольким компонентам?
В основном мы используем ее там, где нет смысла выносить эту логику. если надо выбрать табу, то лучше написать  onClick={() => props.setState('selectedTab': i)} в нескольких компонентах, чем выносить это в отдельный модуль. Или скажем установить значение фильтра при клике на кнопку onClick={() => props.replaceState(newFilter)}.
Если действительно что то сложное появляется, то выносим в модуль отдельно от компонентов
12:43:23 ПП
User 23384802
Кстати, также стоит учитывать, что redux ducks намного упрощает разработку. А когда редюсер и экшены находятся в одном файле, то и нет смысла юзать константы. Очень редко 1 экшен в нескольких редюсерах слушается.А если такое и бывает, то можно руками 2 раза повторить строчку.
Это значительно уменьшает количество кода, но все равно не идеально) Так что вариант выше нравится больше, конечно Ж)
12:45:20 ПП
User 23384802
@trashgenerator То есть в сложных местах как раньше юзаете? Или такой же подход, но просто выносится в файл. Вопрос о том мигрировали ли полностью с обычного redux подхода на этот или нет :)
12:46:10 ПП
User 1682650
User 23384802
Кстати, также стоит учитывать, что redux ducks намного упрощает разработку. А когда редюсер и экшены находятся в одном файле, то и нет смысла юзать константы. Очень редко 1 экшен в нескольких редюсерах слушается.А если такое и бывает, то можно руками 2 раза повторить строчку.
Это значительно уменьшает количество кода, но все равно не идеально) Так что вариант выше нравится больше, конечно Ж)
Если я правильно понял ducks, то они не делают так, что бы один и тот же модуль можно было бы привязывать к разным частям стейта. То есть constants у них захардкожены. Не получится один и тот же ducks скажем для управления табами использовать для несвязаных табов расположеных в разных местах
12:47:21 ПП
User 187710551
вот это кстати не очень хорошо onClick={() => props.setState('selectedTab': i)}
12:48:26 ПП
User 23384802
хм, не понял. Там же нет никаких ограничений, просто кода меньше писать. Можно сделать duck модуль tabs. Там хранить состояние всех табов разных частей приложения,хотя это неправильно, думаю. Состояние
12:48:39 ПП
User 23384802
ой,случайно ентер нажал. В веб интерфейсе телеграма нет редактирования )
12:49:31 ПП
User 23384802
дак вот. в модуле tabs можно хранить лишь экшены, а само значение в других модулях. Ну и там слушать экшен CHANGE_TAB
12:49:48 ПП
User 23384802
вообщем в redux ducks все тоже самое. Но писанины все равно много )
12:50:29 ПП
User 23384802
User 187710551
вот это кстати не очень хорошо onClick={() => props.setState('selectedTab': i)}
Очень сильно напоминает ангуляр)
12:50:51 ПП
User 187710551
Ага а еще при каждом рендере создает новую функцию
12:51:40 ПП
User 23384802
Ну, все эти споры всегда кончаются тем,что на скорость это особо не влияет
12:51:46 ПП
User 23384802
Еще год назад решили)
12:53:16 ПП
User 23384802
Но на самом деле для табов, чекбоксов, выпадаек и прочей мелкой штуки идеально подходит.
12:53:40 ПП
User 23384802
Но с другой стороны это все можно и в стейте хранить
12:56:01 ПП
User 187710551
Я кстати для борьбы с бойлер плейтом делал такую штуку но что-то никому похоже не зашло
12:56:03 ПП
User 187710551
https://github.com/grigory-leonenko/redux-easy-actions
github.com/grigory-leonenko/redux-easy-actions
redux-easy-actions - Sugar library for creating Redux or Flux actions.
12:56:37 ПП
User 23384802
о, я видел это )
12:56:44 ПП
User 23384802
даже лайк стоит )
12:59:41 ПП
User 1682650
User 23384802
Но на самом деле для табов, чекбоксов, выпадаек и прочей мелкой штуки идеально подходит.
вот, да! именно обилией экшенов, редюсеров и констрант для этой неченсти и вгоняло нас в тоску.
Не всегда получается это в локальном стейте хранть, потому что зачастую другим компонентам тоже нужен доступ к этоим значениям
01:00:20 ПП
User 187710551
User 23384802
даже лайк стоит )
благодарствую😌
01:00:26 ПП
User 23384802
Есть еще вот такая штука
01:00:26 ПП
User 23384802
https://github.com/calvinfroedge/redux-modifiers
github.com/calvinfroedge/redux-modifiers
redux-modifiers - A collection of generic functions for writing redux reducers to operate on various data structures
01:00:28 ПП
User 23384802
но я не юзал
01:00:36 ПП
User 1682650
User 187710551
вот это кстати не очень хорошо onClick={() => props.setState('selectedTab': i)}
для простоты так написал. В реальной жизни смотрим по обстоятельствам. если стоит того, то конечно выносим в отдельный метод onClick={this.setActiveTab}
01:02:35 ПП
User 187710551
Кстати вот здесь мне понравилась их идея с handleAction
https://github.com/acdlite/redux-actions
github.com/redux-utilities/redux-actions
Flux Standard Action utilities for Redux. Contribute to redux-utilities/redux-actions development by creating an account on GitHub.
01:05:07 ПП
User 1682650
а для того что бы использовать один и тот же код для констант, редюсеров, экшенов в разных местах, мы делаем их параметризируемыми. типа:
`

export default function getCollapserModule(prefix) {
  const constants = {
    TOGGLE: prefix + '/TOGGLE',
01:05:11 ПП
01:05:50 ПП
User 1682650
`

export default function getCollapserModule(prefix) {
  const constants = {
    TOGGLE: prefix + '/TOGGLE',
 }

    actions: {
      toggle: (id) => ({type: constants.TOGGLE, id}),
}
reducer: {
бла лба
}
`
01:06:53 ПП
User 1682650
блин, не очень понятно получилось) короче добавляем префикс к константам для разных мест. получает одна и та же функция редюсера реагирует на похожие(но разные по префиксу) константы и изменяет разные места в стейте
01:09:32 ПП
User 64167409
на 100 разных экшнев будет юзаться 2 экшена? если это локал стэйт компонента то нафига вобще этот стейт в редакс тащить
01:11:22 ПП
User 1682650
User 64167409
на 100 разных экшнев будет юзаться 2 экшена? если это локал стэйт компонента то нафига вобще этот стейт в редакс тащить
на сто разных мест в редуксовском стейте (допустим у тебя есть сто разных виджетов с табами у которых не связанные, но одинаковые по форме стейты) будет использоваться всего два экшена и один редюсер распиханый в сто разных мест
01:11:55 ПП
User 1682650
стейт в редакс тащим не по своей воле. если к одному и тому же стейту нужен доступ из двух разных мест, то это оптимальный выбор
01:12:52 ПП
User 1682650
допустим есть табы со стейтом где хранится айди открытой табы, а есть где то фильтр этих табов совсем в другом месте и при активации фильтра надо сбрасывать индекса открытого таба на 0
01:12:53 ПП
User 128823685
если нужно синхронизировать с сервером, например... я для модальных окон юзаю локальный стейт, а для кейса выше - вполне норм
01:13:37 ПП
User 1682650
User 128823685
если нужно синхронизировать с сервером, например... я для модальных окон юзаю локальный стейт, а для кейса выше - вполне норм
да, я тоже сначала юзаю локальный стейт. чуть он где понадобился еще - выношу в редукс. Поэтому хочется иметь удобный инструмент, когда компоненту пофигу где стейт
01:14:05 ПП
User 64167409
если экшны дергают разные места стейта и имеют разные функции у тебя будет все равно использоваться 2 экшна
01:14:57 ПП
User 64167409
и что ты делаешь если несколько редюсеров должны среагировать на определенный экшн
01:16:31 ПП
User 1682650
User 64167409
и что ты делаешь если несколько редюсеров должны среагировать на определенный экшн
константы с префиксом также экспортируются и их можно использовать где угодно, в том числе в других редюсерах
constants = {
    TOGGLE: prefix + '/TOGGLE',
}
01:17:02 ПП
User 1682650
в каком то редюсере можно ловить конкретно это константу с префиксов  case constants.TOGGLE
02:46:39 ПП
User 202047214
Парни, подскажите, кто как передает аттрибуты внутрь компонент? у меня мозг разрывается между несколькими вариантами) 
1) let { foo, bar, ...rest } = props; <Component {...rest}>...</>
2) let { foo, bar, params } = props; <Component {...params} >...</>
3) let { foo, bar, onClick, href } = props; <Component onClick={onClick} href={href}>...</> 
4) Может еще какой-то?
02:52:47 ПП
02:53:39 ПП
User 4274761
User 39182759
3
зачем тогда временные переменные?
02:54:06 ПП
User 39182759
можно и без них
02:54:28 ПП
User 39182759
но с ними код лучше выглядит
02:55:01 ПП
User 90246751
Поддерживаю вариант 3
02:55:33 ПП
User 23384802
Это если не надо 500 пропсов передавать
02:55:51 ПП
02:56:03 ПП
User 90246751
User 23384802
Это если не надо 500 пропсов передавать
Это да
02:56:06 ПП
User 202047214
Господин anoru понимает к чему я клоню :)
02:56:29 ПП
User 39182759
а если надо, то у тебя в ...rest - гнусный клубок из 500 переменных, которыми ты не очень управляешь
02:56:40 ПП
User 39182759
как минимум, требует рефакторинга
02:57:03 ПП
User 202047214
Поэтому я пришел к params
02:57:12 ПП
User 23384802
Самая основная проблема при прокидывание всех пропсов это то, что в react dev tools будет вся эта каша показываться
02:58:15 ПП
User 4274761
смежный, кстати, вопрос? как передать всего несколько атрибутов? но когда их не два, а побольше. проксирование подмножества
let { onClick, onLoad, onSubmit, onAnyOtherEvent } = this.props
<Smth {...({ onClick, onLoad, onSubmit, onAnyOtherEvent })} />
02:59:09 ПП
User 23384802
не встречал такой вариант еще)
02:59:31 ПП
User 4274761
можно сделать props.handler как хранилище проброшенных хэндлеров
03:00:30 ПП
User 187710551
а валидировать типо не надо?
03:00:42 ПП
User 202047214
по сути params это оно и есть, только там в принципе все, что можно повесить на тег
03:00:57 ПП
User 4274761
User 187710551
а валидировать типо не надо?
PropTypes?
03:01:06 ПП
User 187710551
User 4274761
PropTypes?
да
03:01:50 ПП
User 4274761
User 187710551
да
там же можно валидировать структуры вроде как
03:03:21 ПП
User 187710551
глянул можно
03:05:03 ПП
User 39182759
но это какая-то экономия на спичках, экономите пару строк. но в коде появляется дичь вроде  {...({ onClick, onLoad, onSubmit, onAnyOtherEvent })}
03:05:30 ПП
User 39182759
или еще хуже {...rest}
03:05:49 ПП
User 39182759
бывают случаи, когда это полезно
03:06:24 ПП
User 39182759
типа в дизайн-обертках к инпутам.
04:04:14 ПП
User 137707545
Посоветуйте документацию по ReactJS на русском )
04:05:24 ПП
User 202047214
Тебе по верхам или перевод фбшной ищешь?
04:06:23 ПП
User 137707545
Верхушки вроде все изучил уже, когда лезу в код готово SPA голова кругом идёт, фбшной - вообще бы идеально было бы.
04:07:55 ПП
User 202047214
http://tftf.ru/stati/javascript/reactjs/ вот какой-то похожий, но перевод как-то корежит читать такой. Мне кажется уж лучше в оригинале
04:09:45 ПП
User 137707545
Натыкался на этот сайт, тоже не в восторге, но спасибо )
04:11:33 ПП
User 309556
там в репке были pr с переводом на русский
04:12:11 ПП
User 137707545
Мне понравился вот этот курс - https://www.gitbook.com/book/maxfarseer/react-course-ru/details
legacy.gitbook.com/book/maxfarseer/react-course-ru/details
react-course-ru: Курс по React.js для начинающих
04:19:01 ПП
User 137707545
@chicoxyzzy  Ты про это ? https://github.com/facebook/react/tree/master/docs/docs
github.com/facebook/react/tree/master/docs/docs
react - A declarative, efficient, and flexible JavaScript library for building user interfaces.
04:19:58 ПП
04:25:07 ПП
User 1294634
сейчас попробовал у себя на одном модуле заменить action creator function + constant на action creator class и вместо type middleware подставляет class.name. Получается меньше кода, только конечно придется следить за уникальностью имен классов
04:26:14 ПП
User 1294634
и плюс typescript сахар для конструктора( constructor(public someParam: SomeType) )
05:03:54 ПП
User 25721027
Использую серверный рендеринг и добавил resolve.alias в webpack. Возникает проблема на сервере, что не может заинклюдить по такому пути
Использовал require-hook, но получил ругань:
(function (exports, require, module, __filename, __dirname) { import React, {Component} from 'react';
                                                              ^^^^^^

SyntaxError: Unexpected token import
05:04:05 ПП
User 25721027
Как быть? 😱
05:07:04 ПП
User 144169875
Добавь алиасы в babel
05:07:44 ПП
User 144169875
https://www.npmjs.com/package/babel-plugin-module-alias
npmjs.com/package/babel-plugin-module-alias
Babel plugin to rewrite the path in require() and ES6 import
05:08:05 ПП
User 25721027
Спасибо, надеюсь решит траббл 👍
05:08:30 ПП
User 144169875
ну и в довесок 
https://github.com/tleunen/eslint-import-resolver-babel-module-alias
github.com/tleunen/eslint-import-resolver-babel-module-alias
eslint-import-resolver-babel-module-alias - babel-plugin-module-alias resolver for eslint-plugin-import
05:10:43 ПП
User 144169875
Хотя стоп. У тебя ругается на реакт, он же в node_modules. Он точно в алиасах?
05:12:21 ПП
User 25721027
я заюзал resolve.root
05:12:28 ПП
User 144169875
мне кажется у тебя с babel проблема. stage-0 ?
05:13:00 ПП
User 25721027
node_mobules добавил в resolve.root и в modulesDirectories
05:13:29 ПП
User 25721027
Разве babel виноват? я ж модуль загружаю через require_hook - подменяю путь
05:14:38 ПП
User 144169875
транспаленый код, который генерит babel не понимает import. По крайней мере очень на это похоже.
05:15:59 ПП
User 144169875
У меня была такая ошибка, когда неправильно babel был настроен. Если бы это был alias то он ругался бы, что не может заимпортить
05:16:55 ПП
User 25721027
он и ругался что не может заинклюдить. Тока я начал проблему велосипедом решать - через хуки
05:16:59 ПП
User 25721027
Спасибо, попробую модуль
05:17:44 ПП
User 144169875
Просто меня смущает что node_modules в алиасах
05:18:13 ПП
User 144169875
покапайся вот тут, там есть серверный рендеринг
https://github.com/erikras/react-redux-universal-hot-example
github.com/erikras/react-redux-universal-hot-example
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform - erikras/react-redux-universal-hot-example
05:19:03 ПП
User 146732672
Да, шикарная репа 👆👍
05:23:51 ПП
User 25721027
User 144169875
https://www.npmjs.com/package/babel-plugin-module-alias
npmjs.com/package/babel-plugin-module-alias
Babel plugin to rewrite the path in require() and ES6 import
Не помогает. 
Можно в личку?
05:58:27 ПП
User 4627228
Сегодня общался с разработчиками в одном из профессиональных чатов и вот так легко, спонтанно, в естественной форме, у меня взяли интервью про SM. Получилось так по делу, что решил опубликовать. https://medium.com/@DenisIzmaylov/startup-makers-%D0%B4%D0%BB%D1%8F-%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D1%85-javascript-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2-cb8732bd78b6#.dwucb5bgb
medium.com/@DenisIzmaylov/startup-makers-%D0%B4%D0%BB%D1%8F-%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D1%85-javascript-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2-cb8732bd78b6
Сегодня общался с разработчиками в одном из профессиональных чатов и вот так легко, спонтанно, в естественной форме, у меня взяли интервью…
06:03:02 ПП
User 196895
User 4627228
Сегодня общался с разработчиками в одном из профессиональных чатов и вот так легко, спонтанно, в естественной форме, у меня взяли интервью про SM. Получилось так по делу, что решил опубликовать. https://medium.com/@DenisIzmaylov/startup-makers-%D0%B4%D0%BB%D1%8F-%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D1%85-javascript-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2-cb8732bd78b6#.dwucb5bgb
medium.com/@DenisIzmaylov/startup-makers-%D0%B4%D0%BB%D1%8F-%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D1%85-javascript-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2-cb8732bd78b6
Сегодня общался с разработчиками в одном из профессиональных чатов и вот так легко, спонтанно, в естественной форме, у меня взяли интервью…
ну шикарно же )))
06:09:58 ПП
User 4627228
Like. Share. Repost!🔥
06:13:52 ПП
User 111624951
User 4627228
Сегодня общался с разработчиками в одном из профессиональных чатов и вот так легко, спонтанно, в естественной форме, у меня взяли интервью про SM. Получилось так по делу, что решил опубликовать. https://medium.com/@DenisIzmaylov/startup-makers-%D0%B4%D0%BB%D1%8F-%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D1%85-javascript-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2-cb8732bd78b6#.dwucb5bgb
medium.com/@DenisIzmaylov/startup-makers-%D0%B4%D0%BB%D1%8F-%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D1%85-javascript-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2-cb8732bd78b6
Сегодня общался с разработчиками в одном из профессиональных чатов и вот так легко, спонтанно, в естественной форме, у меня взяли интервью…
Сколько тебе лет? В каждом посте у тебя читаю про 15 лет разработки.
06:14:17 ПП
User 4627228
Уже более :)
06:15:01 ПП
User 111624951
А с какого момента ты отсчет ведешь?
06:16:05 ПП
User 4627228
С того момента, когда написал свою первую ОС на Assembler :)
06:16:20 ПП
User 111624951
а, круто
06:16:34 ПП
User 111624951
ну тогда у меня 17 лет разработки
06:16:56 ПП
User 111624951
только я обычно считаю с того момента, как мне начали за это платить
06:17:08 ПП
User 162236709
User 4627228
С того момента, когда написал свою первую ОС на Assembler :)
как тот парень на хабрахабре?
06:17:16 ПП
User 162236709
просто люди так не скатываются
06:18:18 ПП
User 196895
@DenisIzmaylov у тебя для backend/operations/server engineer - ничего нет? )))
06:18:20 ПП
User 4627228
Некоторым платят и без опыта :) Мамонт. Нас таких единицы во Front-end.:)
06:20:18 ПП
User 111624951
Ну я не про фронтенд
06:20:23 ПП
User 111624951
И я ошибся
06:20:30 ПП
User 111624951
я вспомнил самую первую программу
06:20:34 ПП
User 111624951
она была еще раньше
06:20:48 ПП
User 111624951
во времена диалапа и quake ii
06:22:40 ПП
User 111624951
интересно, на вторую кваку есть какой-нибудь эмулятор?
06:22:44 ПП
User 4627228
Оно у всех в разное время началось. В Сибири по традиции позже Москвы. Где-то в 98-99 году я начал с Basic, потом Pascal, Assembler, Delphi, Win32 API, COM+/DCOM и понеслось)
06:23:10 ПП
User 111624951
а я на Урале
06:23:55 ПП
User 196895
я так и знал, никому бэкенд уже не нужен )))
06:24:43 ПП
User 111624951
User 196895
я так и знал, никому бэкенд уже не нужен )))
у нас .net-разработчики нужны
06:25:33 ПП
User 196895
я просто почитал статью Дениса, сказка, песня, прям захотелось работать с ними )))))
06:25:50 ПП
User 196895
.net не моё 😊 C# почти что Java, но нет
06:26:04 ПП
User 196895
платформа угнетает. хотя в целом очень даже не сложно, как оказалось )
06:26:47 ПП
User 111624951
User 196895
я просто почитал статью Дениса, сказка, песня, прям захотелось работать с ними )))))
опыт заставляет быть более скептичным
06:27:02 ПП
User 111624951
User 196895
платформа угнетает. хотя в целом очень даже не сложно, как оказалось )
чем?
06:27:16 ПП
User 196895
User 111624951
опыт заставляет быть более скептичным
о да )))) о да. я уже давно в сказки не верю, я их создаю ))
06:29:40 ПП
User 196895
User 111624951
чем?
мне это сложно объяснить в двух словах. это еще с тех самых времён, когда для простого действия нужно было подключать неведомую библиотеку, а при компиляции файл либо весил нехило так, либо требовал какой-нибудь загадочной версии .net, а обычно - и то и другое сразу. и казалось бы, ну что такого то? обычная утилита, к примеру, на питоне или go сейчас решается вообще в пару десятков строк. ну ладно, в полсотни. тем не менее...
06:29:49 ПП
User 196895
я не спорю ни в коем случае, многое изменилось скорее всего
06:38:27 ПП
User 4627228
Да ладно вы, .NET хорошая платформа. Я правда с ней всего пару лет работал. Она 5 лет назад была популярна в Европе. Мы тогда запилили пару проектов для Nokia-Siemens Network, там был классный WPF, который прямо как React, ещё дажее больше на него похож, чем Delphi.
06:42:20 ПП
User 162236709
User 196895
.net не моё 😊 C# почти что Java, но нет
пиздеж
06:42:26 ПП
User 162236709
они только по синтаксису похожи
06:49:36 ПП
User 164870167
User 4627228
Да ладно вы, .NET хорошая платформа. Я правда с ней всего пару лет работал. Она 5 лет назад была популярна в Европе. Мы тогда запилили пару проектов для Nokia-Siemens Network, там был классный WPF, который прямо как React, ещё дажее больше на него похож, чем Delphi.
А сейчас вообще ого-го, опенсорс технология
06:50:02 ПП
06:50:29 ПП
User 162236709
developers in 2016
08:02:18 ПП
User 1294634
^ что вообще говоря не так и плохо :)
08:02:38 ПП
User 162236709
довольно слабоумно
08:04:40 ПП
User 1294634
ну хз-хз. Тут все равно работает теория дарвина, вначале есть интерес к любой ерунде, а потом они сами собой умирают
08:04:46 ПП
User 1294634
т.е. как таковой проблемы нет
09:12:44 ПП
User 86922735
Парни  заметил в что на githube некоторые компоненты, роутеры, главные родительские компоненты стали выносить в папки containers, для чего это делают? Почему их не хранить в папке components? Если роутеры я могу как то для себя обяснить, то зачем туда выносить родительские компоненты  не понятно
09:20:11 ПП
User 61730194
containers - "умные" компоненты хандлят некотрую логику, redux-specific и тд
components - "глупые" компоненты, ничего не знают о внешнем мире, замкнуты в своих пропсах
09:22:19 ПП
User 61730194
разделяй и властвуй, это все причины
09:24:47 ПП
User 86922735
ясно, а я создавал для каждого умного компонента свою папку в components, и глупые ложил ряждом
09:24:53 ПП
User 4627228
Do what Abramov said to do
09:29:15 ПП
User 40529464
User 4627228
Do what Abramov said to do
what was it that he said?
09:42:20 ПП
User 108543364
User 86922735
Парни  заметил в что на githube некоторые компоненты, роутеры, главные родительские компоненты стали выносить в папки containers, для чего это делают? Почему их не хранить в папке components? Если роутеры я могу как то для себя обяснить, то зачем туда выносить родительские компоненты  не понятно
у меня три папочки pages, containers, components
09:45:32 ПП
User 40529464
User 108543364
у меня три папочки pages, containers, components
то есть получается, что сначала by type разделение, а внутри уже by feature/
09:45:33 ПП
09:46:49 ПП
User 108543364
User 40529464
то есть получается, что сначала by type разделение, а внутри уже by feature/
да. pages - это синглтоны, containers - могут использоваться в разных частях ui, components - могут спокойно перекочевать на другой проект
09:55:04 ПП
User 137707545
Парни, в двух словах можете подсказать, есть список новостей, как пеализовать детальный просмотр новости ?
10:01:08 ПП
User 108543364
User 137707545
Парни, в двух словах можете подсказать, есть список новостей, как пеализовать детальный просмотр новости ?
что именно тебе подсказать?
10:01:52 ПП
User 137707545
Сам механизм
10:02:36 ПП
User 108543364
С точки зрения работы с данными или UI?
10:40:05 ПП
User 309556
мы тут сегодня про релей с фалькором беседовали
https://twitter.com/roman01la/status/735549513302200320
twitter.com/roman01la/status/735549513302200320
Трансляция хенгаута по GraphQL https://t.co/kgTkDyOt5Y
10:40:41 ПП
User 309556
но смотреть надо с 5й минуты примерно
11:02:26 ПП
User 153807368
User 4627228
Сегодня общался с разработчиками в одном из профессиональных чатов и вот так легко, спонтанно, в естественной форме, у меня взяли интервью про SM. Получилось так по делу, что решил опубликовать. https://medium.com/@DenisIzmaylov/startup-makers-%D0%B4%D0%BB%D1%8F-%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D1%85-javascript-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2-cb8732bd78b6#.dwucb5bgb
medium.com/@DenisIzmaylov/startup-makers-%D0%B4%D0%BB%D1%8F-%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D1%85-javascript-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%BE%D0%B2-cb8732bd78b6
Сегодня общался с разработчиками в одном из профессиональных чатов и вот так легко, спонтанно, в естественной форме, у меня взяли интервью…
👍
а что за чат то? у меня такого нет
11:04:01 ПП
User 153807368
User 86922735
Парни  заметил в что на githube некоторые компоненты, роутеры, главные родительские компоненты стали выносить в папки containers, для чего это делают? Почему их не хранить в папке components? Если роутеры я могу как то для себя обяснить, то зачем туда выносить родительские компоненты  не понятно
имхо вкусовщина, не обязательно так делать
11:17:25 ПП
User 153807368
User 4627228
Оно у всех в разное время началось. В Сибири по традиции позже Москвы. Где-то в 98-99 году я начал с Basic, потом Pascal, Assembler, Delphi, Win32 API, COM+/DCOM и понеслось)
начинал где-то в 94-95 со Spectrum-овского бейсика и asm в школе, потом pascal + asm в вузе
Delphi, MS SQL, Oracle, опять немного асма, немного Си, C#, Python, далее Ruby и Javascript
а деньги за программирование начал получать всего то 10 лет назад)
11:25:56 ПП
User 4627228
Круто) Молодец. Я же говорил, нас по пальцам пересчитать можно. Лет через 10 соберёмся все на Кубе 🌴
11:27:18 ПП
User 656567
Там еда на любителя
11:27:53 ПП
User 656567
Я на Daewoo cpc-400 начинал 🙈 msx2
11:30:03 ПП
User 309556
завтра не забываем про http://www.meetup.com/BeerJS-Moscow/events/231310923/
meetup.com/BeerJS-Moscow/events/231310923
Unfortunately, everyone's favorite MoscowJS Meet-up will not happen this month.But don't despair. We're welcome you to the next meeting of beer lovers and holy warriors! Free entrance, but each pays f