@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 г.

12:17:57 ДП
User 64005178
User 97154162
Ну привет
07:29:04 ДП
User 98883639
/angular_js
07:31:18 ДП
User 98883639
eto obman! :<
07:32:50 ДП
07:42:06 ДП
User 64005178
/stat@comstatbot
07:51:34 ДП
User 63410639
Всем привет
07:53:35 ДП
User 63410639
Подскажите, пожалуйста, делаю подобную штуку 
http://jsfiddle.net/kennis/JTvFZ/

Только нужно вывести более сложный хтмл, и ~10 000 записей, как правильно оптимизировать все это? Я так понимаю, нужно разбить данные на группы и всем невидимым в данный момент элементам сделать display none
jsfiddle.net/kennis/JTvFZ
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
07:58:15 ДП
User 63410639
С телефона фидл не работает, там фишка в скролле
07:58:51 ДП
User 39182759
дисплей нон не стоит, ведь ты можешь просто не рисовать их.
а высота элемента известна и фиксирована?
08:06:57 ДП
User 63410639
Да, можно зафиксировать
08:07:23 ДП
User 63410639
А в како момент лучше перерисовывать?
08:34:53 ДП
User 39182759
1) вешаешь на скролл контейнера эвент (на самом деле, лучше по таймауту проверять каждые 200-500мс).
2) по позиции скролла, зная высоту элемента, определяешь, какие элементы влезут в экран
3) прибавляешь по десятку сверху и снизу.
4) рисуешь необходимое количество элементов, верхнему ставишь марджин-топ, так, чтобы сохранить его позицию внутри скролла
08:49:02 ДП
User 63410639
Те перерисовываешь элементы при каждом событии скролла? Или  надо отслеживать какие-то точки определённые? Спасибо, примерно понял, буду пробовать!
08:53:26 ДП
User 39182759
не, лучше все же по таймауту, а то утонешь в эвентах. давай уточню.
1) по таймауту считаешь в контейнере скролл оффсет, кладешь его в стейт контейнера.
2) в функции рендер контейнера определяшь минимальный и максимальный индексы элементов, которые видны на экране, с небольшим запасом
3) рисуешь только эти элементы, указав первому смещение относительно контейнера, равное его индексу, помноженному на высоту элемента
08:55:15 ДП
User 39182759
4) не забываешь снять таймаут на компонентдидмаунте
08:55:49 ДП
User 39182759
5) идешь и проламываешь голову человеку, который придумал на одном экране показывать 10000 элементов
08:57:15 ДП
User 63410639
=) спасибо), я denounced использую
08:57:22 ДП
User 39182759
6) чтобы не дергать рендер лишний раз, на самом деле можно индексы тоже по таймауту пересчитывать и падейтить стейт только если они изменились
08:57:25 ДП
User 63410639
Debounced
08:57:29 ДП
User 56924675
может пейджинг или подгрузку по скроллу
08:58:12 ДП
User 39182759
подгрузка по скроллу не особенно спасет, если кто-то во что бы то ни стало решит доскроллить до конца
08:59:47 ДП
User 39182759
дебаунс не спасает от того, что функция будет часто дергаться, лучше таймаут:)
09:00:20 ДП
User 39182759
то есть дебаунсед-функция - это тоже функция, с логикой
09:00:57 ДП
User 39182759
не таймаут, а сетинтервал, конечно, что это я...
09:01:10 ДП
09:02:10 ДП
User 63410639
Вот, кстати, спасибо
09:04:30 ДП
User 63410639
Как-то я этот момент упустил
09:07:29 ДП
09:09:07 ДП
User 187276728
ребят, а существует какая-нибудь обертка на webpack? очень уж не очевидно все получается, особенно если делаешь монорепу и нужно мерджить конфиги
09:10:18 ДП
User 4274761
User 39182759
не таймаут, а сетинтервал, конечно, что это я...
кокрастоке же таймаут лучше — управляемее и лучше работает со временем. ну тот таймаут, который сам себя ставит в конце
09:14:41 ДП
User 39182759
ну не знаю, в задаче риалтаймовой точности не нужно, а код с таймаутом и код с интервалом будут оличаться только вот этим самоставом в конце
09:16:56 ДП
User 4274761
если происходят затупы, то таймауты могут пачкой выполниться. т.е. если у нас таймаут на секунду, затуп на пять секунд, то после пятой коллбек сразу выполнится подряд пять раз
09:17:40 ДП
User 4274761
я же ничего не напутал?)
09:24:31 ДП
User 39182759
http://javascript.info/tutorial/settimeout-setinterval#the-real-delay-of-setinterval
09:25:04 ДП
User 39182759
очень хороший поинт, но в данной задаче пофиг на самом деле
09:26:14 ДП
User 4274761
да, я про это
09:26:54 ДП
User 39182759
ну вот пачкой в сетинтервале не вызываются, один запрос втает в очередь и выполняется когда можеи
09:27:38 ДП
User 198292089
facebookver это почти как semver только 0.13.x, 0.14.x, 15.0.x...
09:30:01 ДП
User 4274761
User 39182759
ну вот пачкой в сетинтервале не вызываются, один запрос втает в очередь и выполняется когда можеи
а, максимум еще раз
10:04:13 ДП
User 141822776
рендерю на сервере в тестах реакт компонентв в jsdom, вижу изменение в html. Меняю состояние компонента, html не меняется. Что может быть?
10:04:50 ДП
User 141822776
нашел вот такую штуку, но не помогло http://stackoverflow.com/questions/26867535/calling-setstate-in-jsdom-based-tests-causing-cannot-render-markup-in-a-worker
stackoverflow.com/questions/26867535/calling-setstate-in-jsdom-based-tests-causing-cannot-render-markup-in-a-worker
I'm testing my React components under jsdom using my own tiny "virtual browser" utility. Works just fine, until I'm trying to setState. For example, when testing a children ages input control:
10:06:29 ДП
User 141822776
метод render вызывается два раза, но в доме результат первого вызова
10:07:38 ДП
User 141822776
Чё делать? На ангуляр переходить не хочется.
10:22:55 ДП
User 92932416
/stat@comstatbot
10:49:42 ДП
User 198292089
/stat@comstatbot
11:15:04 ДП
11:24:01 ДП
11:27:58 ДП
User 162236709
/angular_js
11:30:23 ДП
11:31:11 ДП
User 121351531
/angular_js
11:39:31 ДП
11:39:34 ДП
11:40:07 ДП
User 198292089
/ls@telewitterbot
11:41:24 ДП
User 199126836
/ls@telewitterbot
11:41:25 ДП
User 198292089
/stat@comstatbot
11:53:00 ДП
User 182495393
когда вы создаете компоненты с синтаксисом jsx, какое расширения вы даете файлам: js or jsx?
11:57:43 ДП
User 656567
Я js создавал. Хотя, используя правила airbnb для eslint, следовало бы тогда и jsx писать, но.. Короче, "так исторически сложилось"
11:58:14 ДП
User 656567
Кстати, боты - зло в чатах. Они провоцируют на флуд
11:58:53 ДП
User 198292089
User 182495393
когда вы создаете компоненты с синтаксисом jsx, какое расширения вы даете файлам: js or jsx?
Сначала давал js, а сейчас больше jsx. Это не принципиально
12:00:28 ПП
User 198292089
User 182495393
когда вы создаете компоненты с синтаксисом jsx, какое расширения вы даете файлам: js or jsx?
С моими настройками webpacka транспилятся они все равно одинаково
12:00:39 ПП
User 162236709
User 198292089
С моими настройками webpacka транспилятся они все равно одинаково
да
12:00:43 ПП
User 162236709
я .js юзаю
12:01:11 ПП
User 656567
User 198292089
С моими настройками webpacka транспилятся они все равно одинаково
Да они у всех так. Просто это больше вкусовщина, на мой взгляд
12:01:27 ПП
User 182495393
с моими тоже, хотелось бы понять если какая нибудь тендеция в обществе кто есть гуд а что зло
12:06:18 ПП
User 198292089
User 182495393
с моими тоже, хотелось бы понять если какая нибудь тендеция в обществе кто есть гуд а что зло
Последнее время пишу jsx для того, чтобы просто в дереве проекта броском глаз можно было понять где что. Ну и плюс можно, например, react-hot только для jsx юзать и тем самым немного разгрузить сервер hot reloadinga. Правда я его последнее время все равно не юзаю, так как мне не удалось завести хор релоадинг стилус файлов
12:07:34 ПП
12:08:26 ПП
User 198292089
Может, кстати, кто знает как можно завести хот релоадинг стилуса?
12:35:26 ПП
User 141822776
а что у тебя не получилось? У меня работает, я правда gulp'ом стили собираю в бандл, а бандл уже рекварю, чтобы в каждом компоненте стили не рекварить
12:36:48 ПП
User 141822776
вот тебе пример приложения https://github.com/amelisa/amelisa-crud-example
github.com/amelisa/amelisa-crud-example
amelisa-crud-example - CRUD example for Amelisa
12:39:36 ПП
User 198292089
User 141822776
а что у тебя не получилось? У меня работает, я правда gulp'ом стили собираю в бандл, а бандл уже рекварю, чтобы в каждом компоненте стили не рекварить
А я как раз в каждом компоненте реквайрю, когда проект очень большой это гораздо удобнее
12:40:09 ПП
User 198292089
А потом экстракт плагином их все в один файл извлекаю
12:41:27 ПП
User 198292089
Тогда стили каждого конкретного компонента лежат в его папке, а в бандле потом один css файл и все
12:42:39 ПП
User 141822776
Ну у меня тоже стили рядом с компонентом лежат, просто require('./style.styl') не пишу каждый раз
12:44:59 ПП
User 141822776
я еще два велосипеда написал для автопрефиксирования стилей (изоляция) https://github.com/vmakhaev/postcss-filename-prefix и https://github.com/vmakhaev/react-prefix-loader . в том же приложении можно посмотреть, как использовать
github.com/vmakhaev/postcss-filename-prefix
postcss-filename-prefix - Postcss plugin for prefixing css classes with corresponding file names
12:46:20 ПП
User 198292089
User 141822776
Ну у меня тоже стили рядом с компонентом лежат, просто require('./style.styl') не пишу каждый раз
А у тебя вебпак за изменениями следит или нет? Я не нашел
12:47:42 ПП
User 141822776
gulp пересобирает, webpack переподгружает стили
12:49:26 ПП
User 198292089
Просто в твоем варианте получается надо или в галпе вебпаковский watch запускать дополнительно или два вотчера делать. У меня в проектах поосто полный перебилд вебпаком занимает 15-17 секунд, а когда watch вебпаковский только кусочек пересобирает, то где-то секунда, так как целая куча чанков
12:51:12 ПП
User 141822776
gulp вотчит стили компонентов и собирает их в бандл, webpack вотчит бандл
12:52:21 ПП
User 198292089
То есть два вотча паралельно работают?
12:53:06 ПП
User 141822776
может быть в gulp можно какой-то кэш засунуть, чтобы собирал инкрементально, я не в курсе
12:53:34 ПП
User 141822776
ну получается паралельно
12:55:30 ПП
User 198292089
В принципе такой вариант имеет право на жизнь, но я уже привык реквайрить стили, да и если реквайрить, то есть один плюс: можно контролировать порядок их подключения. В каком порядке реквайрятся компоненты в том и стили
12:58:02 ПП
User 141822776
Расскажи как ты подменяешь require в юнит-тестах на сервере?
01:00:46 ПП
User 198292089
А зачем при серверном рендеринге стили реквайрить? В изоморфных приложениях я просто оборачиваются реквайр в что-то типа if(BROWSER === true) и в вебпаке задаю эту константу
01:02:44 ПП
User 141822776
понятно
01:05:02 ПП
User 187276728
есть монорепа с несколькими группами пакетов:
1) аппа (client/server)
2) packages (пакеты, ui-kit для аппы, например и все такое прочее)
3) всякие побочные проекты, типа доков, плейграунда

хочется монорепу и, по возможности, максимально шарить конфиг сборки всего этого
01:05:02 ПП
User 187276728
с вебпаком, конечно
01:05:02 ПП
User 187276728
чтобы все няшно было и удобно
01:05:02 ПП
User 187276728
а получается дичь
01:05:02 ПП
User 187276728
например, можно делить так:

common:
   base
      client
      server
   development
      client
      server
   production
      client
      server

app1:
   base
   development
     client
     server
   production

...etc
01:05:02 ПП
User 187276728
и мерджить потом каким-нибудь webpack-merge
дичь? – дичь
01:06:32 ПП
User 4627228
1.5 года назад, когда я только обнаружил вебпак была мысль о таком решении - https://github.com/DenisIzmaylov/smart-builder

Но в итоге отказался. Лишний слой абстракции => когнитивная нагрузка => потенциальные ошибки.
github.com/DenisIzmaylov/smart-builder
smart-builder - Build wrapper with configurations based on best practices
01:07:53 ПП
User 162236709
Uncaught TypeError: React.unmountComponentAtNode is not a function
почему так?
01:12:44 ПП
User 198292089
User 162236709
Uncaught TypeError: React.unmountComponentAtNode is not a function
почему так?
Может ReactDOM?
01:12:56 ПП
User 162236709
точно, спасибо
01:15:23 ПП
User 4627228
Как вам? https://github.com/mozilla-services/react-jsonschema-form
github.com/mozilla-services/react-jsonschema-form
A React component for building Web forms from JSON Schema. - mozilla-services/react-jsonschema-form
01:18:34 ПП
User 198292089
User 4627228
Как вам? https://github.com/mozilla-services/react-jsonschema-form
github.com/mozilla-services/react-jsonschema-form
A React component for building Web forms from JSON Schema. - mozilla-services/react-jsonschema-form
Я б юзал
01:20:31 ПП
User 141822776
ништяк, json-schema. я такое же пилил для другого фреймворка только
01:20:34 ПП
01:21:09 ПП
User 4627228
yep :) у меня тоже где-то архивы старые с json-schema-renderer
01:21:20 ПП
User 4627228
это как Flux, видимо
01:22:55 ПП
User 141822776
помнится я свою json-schema навелосипедил как-то тоже давненько :-)
01:24:59 ПП
01:25:14 ПП
User 4627228
Реакт Амстердам стайл)
01:30:33 ПП
User 198292089
https://github.com/aleksei0807/react-adaptation
Делаю один проект, как побочный эффект возникла вот такая небольшая библиотечка, потом еще какого-нибудь функционала добавлю
github.com/aleksei0807/react-adaptation
Contribute to react-adaptation development by creating an account on GitHub.
01:33:08 ПП
User 141822776
Подскажите что-то подобное для реакта https://gojs.net/latest/samples/entityRelationship.html
gojs.net/latest/samples/entityRelationship.html
Interactive entity-relationship diagram or data model diagram implemented by GoJS in JavaScript for HTML.
01:49:58 ПП
User 4627228
User 187276728
например, можно делить так:

common:
   base
      client
      server
   development
      client
      server
   production
      client
      server

app1:
   base
   development
     client
     server
   production

...etc
https://github.com/tj/react-fatigue-dev
github.com/tj/react-fatigue-dev
react-fatigue-dev - Module of modules for making modules
01:51:21 ПП
User 97154162
User 64005178
Ну привет
ну здарова )
01:52:21 ПП
User 187276728
ну у него там browserify
01:52:44 ПП
User 187276728
я хочу все webpack'ом собирать
01:52:48 ПП
User 187276728
мне надо развернуть мысль, сделаю репку с примером, чтобы было понятно что за дичь я втираю)
02:14:42 ПП
User 983348
http://www.slideshare.net/x00mario/es6-en
slideshare.net/x00mario/es6-en
ECMAScript 6, in short ES6, has been boiling in a copper pot for many years by now and step-by-step, browser vendors come forward to taste the first sips of th…
03:14:50 ПП
03:36:31 ПП
User 160533651
Так что, кто хочет пописать реактовых приложений в составе крупной корпорации?
03:37:12 ПП
User 39182759
А чо есть чо?
03:51:57 ПП
User 185980313
Кто использовал React Storybook ?
03:54:39 ПП
User 1340580
User 185980313
Кто использовал React Storybook ?
От кадиры? Не завелась нормально.
03:54:59 ПП
User 185980313
да, от них
03:55:47 ПП
User 1340580
User 185980313
да, от них
Метеорщик штоле? :D
03:57:02 ПП
User 185980313
в storybook не используется метеор =) А так интересна концепция, когда пишутся изолированные компоненты
03:57:22 ПП
User 185980313
правда так я и не понял, что именно дает Storybook, только оболочку для просмотра?
03:58:36 ПП
User 160533651
User 39182759
А чо есть чо?
Есть, пиши в личку
03:58:50 ПП
User 1340580
User 185980313
в storybook не используется метеор =) А так интересна концепция, когда пишутся изолированные компоненты
Да, ну а вдруг. Просто кадира плотно разрабатывают под метеор, думал что увидел у них реп.
03:59:11 ПП
User 1340580
User 185980313
правда так я и не понял, что именно дает Storybook, только оболочку для просмотра?
Да.
04:01:09 ПП
User 185980313
Тогда печаль. Хотелось бы, что бы давал архитектуру построения компонентов и взаимодейтсвий между ними
04:01:45 ПП
User 185980313
а так да, реально только просмотр, при этом нужно будет еще писать под каждый компонент отдельный файл с обверткой для сторибука )
04:35:18 ПП
User 181923858
Всем привет. Подскажите идею как организовать структуру store в redux для работы фотографий и комментариев к ним? {photos:[{photo:photo,comments:[]}]} я вижу это так. Но не ясно как сделать подгрузку комментариев к фото если я хочу сначала показывать 2 последних а остальные по желанию
05:21:11 ПП
User 4627228
песочница реакт компонентов прямо в браузере с возможностью отслеживания стейта компонента http://www.react.run/EkkWCc4lW/1
06:36:16 ПП
06:55:35 ПП
User 4627228
Парни, а можете попиарить эту группу в других чатах, Twitter и группах ВК? Давайте сделаем её центром общения на темы React, Redux, React Native и Relay.
06:55:48 ПП
User 4627228
Ссылка: https://telegram.me/react_js
telegram.me/react_js
Обсуждаем 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
07:04:41 ПП
User 141822776
за одно, Парни, чтобы два раза не приседать, попиарьте везде амелису. Сделаем ее центральным движком для React, Redux, React Native и Relay. http://amelisajs.com/
amelisajs.com
Amelisa is CRDT based Offline-First and Real-Time synchronization data engine with React and Mongo support
07:07:23 ПП
07:12:34 ПП
07:45:33 ПП
07:50:19 ПП
User 89478045
Коллеги, мне до сих пор не понятна ситуация с flux,  я уже больше полугода пишу по этому паттерну проекты, но каждый раз, когда мы релизим проекты, то в наших хранилищах происходит трэш, т.е там мы как то преобразуем данные пришедшие из API, сохраняем их в наши state и с увилечением бизнес логики все становится хуже. Если у нас были Модели данных, то во flux это обошли стороной и как то очевидно описывать данные стало в разы сложнее. Как этим бороться? Какие есть кейсы? Если посмотреть на те примеры, что в офф. репе redux, то там похуже треш
07:54:17 ПП
User 63637623
а что мешает флаксовые сторы писать в удобном для себя формате?
07:57:04 ПП
User 89478045
User 63637623
а что мешает флаксовые сторы писать в удобном для себя формате?
Юзаем redux. И в голову ничего не приходит, как только делать ModelRecord for item of data. Но разве это правильно?
08:00:18 ПП
User 4627228
https://github.com/mobxjs/mobx
github.com/mobxjs/mobx
Simple, scalable state management. Contribute to mobxjs/mobx development by creating an account on GitHub.
08:01:19 ПП
User 27532125
User 4627228
https://github.com/mobxjs/mobx
github.com/mobxjs/mobx
Simple, scalable state management. Contribute to mobxjs/mobx development by creating an account on GitHub.
Кинь инвайт ссылку на этот чат
08:02:07 ПП
User 63637623
User 89478045
Юзаем redux. И в голову ничего не приходит, как только делать ModelRecord for item of data. Но разве это правильно?
Так попробуйте не редакс, а что-нибудь на "классическом" event emitter'е — и тогда при обновлении стэйта можно свободнее решать, оповещать всех об изменениях или нет

Впрочем отличие редакса в данном аспекте в том, что он строже настаивает на плоской структуре данных, что как раз "очевидно", ну или должно быть так )
08:02:11 ПП
User 4627228
https://telegram.me/react_js
telegram.me/react_js
Обсуждаем 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
08:16:30 ПП
User 124442878
как готовить реакт + редакс чтобы было удобно в плане хот релоадинг/тайм тревел и прочая красота?
08:18:21 ПП
User 141822776
а тайм тревел кто-то пользуется, вообще?
08:20:32 ПП
User 124442878
я не знаю, но хочу красоту
08:21:55 ПП
User 124442878
дополнительная инфа сейчас на проекте компилю все это дело с webpack+babel es2015 jsx stage-0 пресеты. Но это в принципе не критично, могу поменять.
08:23:38 ПП
User 125547436
дак ничего же не надо готовить
08:23:50 ПП
User 125547436
webpack-dev-server и опоп
08:23:59 ПП
User 125547436
все работает
08:24:39 ПП
User 125547436
+redux-devtools
08:25:00 ПП
08:29:46 ПП
User 124442878
Спасиб, а на какой магии оно пашет?
08:30:39 ПП
User 125547436
хехе. Ребята не стоит вскрывать эту тему. Вы молодые, шутливые, вам все легко. Это не то. Это не Чикатило и даже не архивы спецслужб. Сюда лучше не лезть. Серьезно, любой из вас будет жалеть. Лучше закройте тему и забудьте что тут писалось. Я вполне понимаю что данным сообщением вызову дополнительный интерес, но хочу сразу предостеречь пытливых - стоп. Остальные просто не найдут.
08:37:02 ПП
User 27532125
Мне предлогают работу, за взнос 600 руб, но говорить сама оплачу и каждый день можно по 300+, 400+ руб заработывать
08:37:03 ПП
08:37:07 ПП
User 89478045
User 125547436
хехе. Ребята не стоит вскрывать эту тему. Вы молодые, шутливые, вам все легко. Это не то. Это не Чикатило и даже не архивы спецслужб. Сюда лучше не лезть. Серьезно, любой из вас будет жалеть. Лучше закройте тему и забудьте что тут писалось. Я вполне понимаю что данным сообщением вызову дополнительный интерес, но хочу сразу предостеречь пытливых - стоп. Остальные просто не найдут.
08:37:09 ПП
User 27532125
Думаешь стойт?
08:38:20 ПП
User 125547436
User 89478045
Интернет-шутки, все в порядке!
08:38:40 ПП
User 125547436
User 27532125
Думаешь стойт?
Стоит конечно! Заработывай!
08:39:54 ПП
08:41:53 ПП
User 86311207
Доброго времени суток. Можете помочь мне соберать все чатик в одной доке https://github.com/A-gambit/awesome-telegram-chats, что бы потом было легче искать нужное место когда будут появлятся вопросы по той или иной теме)
github.com/A-gambit/awesome-telegram-chats
Contribute to awesome-telegram-chats development by creating an account on Github.
08:45:26 ПП
08:50:04 ПП
User 89478045
Коллеги, у кого есть опыт использования reselect?
08:50:48 ПП
08:52:19 ПП
User 89478045
User 4627228