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

12:10:27 ДП
User 152745946
есть кто еще?
02:10:44 ДП
User 4627228
Кстати, как-то обсуждали тут тему встраиваемых виджетов и более "легкой" версии React. Кто-нибудь пробовал https://github.com/anthonyshort/deku ?
github.com/anthonyshort/deku
Render interfaces using pure functions and virtual DOM - anthonyshort/deku
03:06:04 ДП
User 128801948
deku - отличный пример как не стоит писать на javascript такие проекты. Хочешь научиться писать тормозной код - советую посмотреть исходники deku :)
03:17:16 ДП
03:18:10 ДП
User 4627228
Не смотрел, но задумка нормальная, как я себе увидел - облегченная версия React, за счёт вырезание локального стейта и переноса его в Redux Store
03:33:25 ДП
User 128801948
облегченная она за счёт других вещей, например за счёт забивания на кучу эдж кэйсов, но точно не за счёт вырезания локального стэйта. Хотя если под облегчённой понимать только API, то наверно да, может показаться что апи попроще.
04:21:45 ДП
User 4627228
Сама библиотека тут может даже не так важна, как концептуальная идея
04:32:35 ДП
User 4627228
Даня ссылочку подкинул ) http://benchling.engineering/performance-engineering-with-react/
benchling.engineering/performance-engineering-with-react-e03013e53285
This is the first half of a 2-part series on performance engineering in React. Part 2 — A Deep Dive into React Perf Debugging is now up!
04:46:21 ДП
User 4627228
О, вот кажется хорошее решение https://github.com/developit/preact
github.com/developit/preact
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM. - developit/preact
05:31:17 ДП
User 128801948
если задача написать какой-то лёгкий виджет, то уж лучше взять snabbdom, он очень простой и его можно легко модифицировать и подгонять под свой юзкэйс.
06:41:37 ДП
User 101934369
Ещё есть mithril, bobril, inferno
06:53:57 ДП
User 128801948
mithril наконец-то переписывается с нуля, ато прежняя реализация была совсем печальной. Bobril наиболее стабильный из полноценных вдом либ с компонентами, используется в достаточно тяжёлом приложении. А inferno уже в который раз опять переписывается с нуля на данный момент :)
06:57:58 ДП
User 128801948
У inferno главная цель победить во всех бэнчмарках :) у него даже dom recycling работает так что в реальных приложениях не имеет никакого смысла так делать, зато в моих бэнчах у него будет отображаться крутая цифра в initial render кэйсах
07:00:35 ДП
User 23384802
Вышел mobX 2.2
07:00:46 ДП
User 23384802
https://medium.com/@mweststrate/mobx-2-2-explicit-actions-controlled-mutations-and-improved-dx-45cdc73c7c8d#.nn4gdaryo
medium.com/@mweststrate/mobx-2-2-explicit-actions-controlled-mutations-and-improved-dx-45cdc73c7c8d
MobX had an amazing few weeks! It has just hit 2000 stars on GitHub. There’s been tremendous interest from the React Amsterdam talk. In…
07:03:17 ДП
User 89478045
Докер запустил бетку для OS X и Windows, Коллеги. Прощай virtualbox
07:04:26 ДП
User 119754639
Да, запустил, я даже качнул уже. Оказалось нужен вин10 с его Hyper-V
07:04:51 ДП
User 89478045
Я под OS X, взлетело без проблем
07:05:01 ДП
User 119754639
Ну OS X понятно)
07:05:13 ДП
User 119754639
Я живущий под окном)
07:39:09 ДП
User 213704994
@nestepura а у меня сейчас Sanyo MPC-2500FD (MSX2) на полке лежит
07:40:10 ДП
User 213704994
А начинал я в 92 с asm, правда на Speccy
07:41:18 ДП
User 656567
в спектрум я только играл (6 лет было)
08:04:16 ДП
User 23384802
Вчера, товарищ @trashgenerator выложил очень крутую либу
reduceless, после которой задумался "как я жил без этого всего". Многим из чатика она тоже приглянулась. Она я, надеюсь, будет и дальше развиваться.

Но для своего проекта немного переделал её, а т.к. там применение сильно изменилось, то сделал отдельной репой с указанием оригинала
https://github.com/anorudes/reduceless-connect
По сути это замена стандартного коннекта redux'а. Позволяет также приконнектить метод для быстрого изменения стейта.
Юзается для ui (открытый попап, открытая шапка, выпадайки и так далее). В качестве примера значения расположены в settings. Также этот декоратор @connect повторяет функционал обычного connect у react-redux, чтобы прокидывать в пропсы обычные actionCreator'ы duck модуля. (там можно хранить допустим получение постов, удаление постов и так далее)

Вдруг кому-то пригодится. В actionCreators просто импорт actionCreaters'ов из обычного redux ducks
github.com/anorudes/reduceless-connect
Contribute to reduceless-connect development by creating an account on GitHub.
08:12:26 ДП
User 1682650
User 23384802
Вчера, товарищ @trashgenerator выложил очень крутую либу
reduceless, после которой задумался "как я жил без этого всего". Многим из чатика она тоже приглянулась. Она я, надеюсь, будет и дальше развиваться.

Но для своего проекта немного переделал её, а т.к. там применение сильно изменилось, то сделал отдельной репой с указанием оригинала
https://github.com/anorudes/reduceless-connect
По сути это замена стандартного коннекта redux'а. Позволяет также приконнектить метод для быстрого изменения стейта.
Юзается для ui (открытый попап, открытая шапка, выпадайки и так далее). В качестве примера значения расположены в settings. Также этот декоратор @connect повторяет функционал обычного connect у react-redux, чтобы прокидывать в пропсы обычные actionCreator'ы duck модуля. (там можно хранить допустим получение постов, удаление постов и так далее)

Вдруг кому-то пригодится. В actionCreators просто импорт actionCreaters'ов из обычного redux ducks
github.com/anorudes/reduceless-connect
Contribute to reduceless-connect development by creating an account on GitHub.
круто!
08:13:54 ДП
User 202047214
Закончу с прототипом и хочу тоже попробовать, по описанию звучало как то, чего очень не хватало в редаксе
08:34:17 ДП
User 53722498
лайкните пулл реквест плиз, чтобы его приняли по-быстрее https://github.com/facebook/react/pull/6886
github.com/facebook/react/pull/6886
React crash when default object prototype is modified.
08:44:40 ДП
User 160315072
http://dl1.joxi.net/drive/2016/05/26/0006/3825/458481/81/144badff31.jpg
Ребят, посоветуйте как забабахать такую подсказку? Без картинки, на чистом CSS
dl1.joxi.net/drive/2016/05/26/0006/3825/458481/81/144badff31.jpg
08:46:35 ДП
User 185980313
бордер + бэкграунд - основной бокс
и бордер-топ/лефт/боттон - прозрачность - райд цвет
08:46:39 ДП
User 202047214
border-style: dashed и стрелку через before с ротейтом
08:46:45 ДП
User 213704994
добавить повернутый квадратный элемент с dashed border
08:47:03 ДП
User 202047214
2 квадрата*
08:47:21 ДП
User 202047214
1 под боксом с бордером, второй над боксом с фоном, чтобы перекрывал бордер бокса
08:47:30 ДП
User 156544965
http://www.cssarrowplease.com/
08:50:54 ДП
User 213704994
@sbekrin dashed border не работает с этим хаком
08:51:16 ДП
User 160315072
а  как вы after и before делаете? не очень понял
08:53:15 ДП
User 213704994
.arrow-box {
 position: relative;
}

.arrow-box:after {
content: "";
position: absolute;
....
}
08:53:36 ДП
User 160315072
так это же реакт..
08:53:46 ДП
User 160315072
к чему там :after рендериться то будет?
08:53:56 ДП
User 160315072
когда ещё нету оригинального элемента
08:56:38 ДП
User 202047214
Оно никак со стилями же не связано?
09:23:28 ДП
User 130174893
Ребят, подскажите начинающему реакт-подавану как правильно реализовать фильтр поиска. У меня есть два компонента родительский ProductsPage и ProductSearch , в ProductSearch передаю onSearch={this.handleSearch} и в самом ProductsSearch в инпуте указываю onChange={onSearch}. Где логику поиска реализовать в родительском компоненте или в дочернем и из дочернего возвращать новый объект с продуктами из поиска ?
09:24:09 ДП
User 983348
https://github.com/treasure-data/redux-search
github.com/treasure-data/redux-search
redux-search - Redux bindings for client-side search
09:25:58 ДП
User 130174893
я про редукс ничего не знаю )
09:26:12 ДП
User 143141567
Тогда делай в родительском)
09:26:20 ДП
09:26:26 ДП
User 130174893
выглядит примерно вот так )
09:27:36 ДП
User 143141567
А зачем тебе products в компоненте productSearch
09:28:08 ДП
User 983348
Родительская вьюшка (в которой вся логика) + вьюшка списка + вьюшка сёрчбара.
09:28:29 ДП
User 130174893
ну я сначало думал в productSearch фильтровать и возвращать новый объект к родителю
09:28:36 ДП
User 130174893
и менять state
09:28:53 ДП
User 143141567
Зачем, по идее productSearch должна только возвращать текущий фильтр
09:29:37 ДП
User 143141567
а ProductsPage уже фильтровать продукты и все остальное
09:29:39 ДП
User 143141567
в данном случае
09:30:39 ДП
User 130174893
User 143141567
а ProductsPage уже фильтровать продукты и все остальное
спасибо ) буду делать
09:42:08 ДП
User 111839249
User 156544965
http://www.cssarrowplease.com/
чёт не очень http://joxi.ru/Drlp81dI4DYWxr.jpg
dl1.joxi.net/drive/2016/05/26/0007/0543/471583/83/6a3183657f.jpg
09:43:10 ДП
User 164696606
А как по твоему оно должно отображаться?
09:43:36 ДП
User 111839249
как минимум по высоте контейнера растягиваться
09:43:48 ДП
User 164696606
Если написать хуйню, то в результате получится хуйня
09:43:58 ДП
User 111839249
ну было б ещё неплохо если б и по ширине разбивалось
09:44:09 ДП
User 156544965
в демке у блока фиксированные размеры
09:44:25 ДП
User 111839249
User 164696606
Если написать хуйню, то в результате получится хуйня
ты наверное с Тестировщиками не работал)
09:45:05 ДП
User 111839249
если тебе нужно много таких тултипов на одной страници, то каждому будеш править Стили?
09:45:06 ДП
User 164696606
User 111839249
ты наверное с Тестировщиками не работал)
ну не сделали они защиту от дурака
09:45:12 ДП
User 111624951
Это назвается "проверка на экстримальные данные"
09:45:31 ДП
User 111839249
у нас это называлось Баг "многобукв"
09:45:33 ДП
09:45:49 ДП
User 164696606
Я не думаю что подобные вещи, это задача этого сервиса
09:46:19 ДП
User 111839249
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_js_word-wrap
09:46:21 ДП
User 111624951
User 164696606
Я не думаю что подобные вещи, это задача этого сервиса
Нет, конечно, но докопаться же хочется.
09:46:21 ДП
User 156544965
задача этого сервиса — на коленке сделать хвост блоку, чего вы докопались до него?
09:46:26 ДП
User 156544965
доверстайте под свои нужды
02:15:45 ПП
User 86922735
где на backlogJS подписаться? что бы не пропустить?
02:20:48 ПП
User 86922735
а нашел
02:20:59 ПП
User 86922735
https://gitter.im/backlog-js/questions
gitter.im/backlog-js/questions
BacklogJS questions during a stream
02:26:24 ПП
User 1191918
User 86922735
где на backlogJS подписаться? что бы не пропустить?
а в чем профит по сравнению с системой контроля версий?
02:46:55 ПП
02:53:47 ПП
User 309556
backlogjs — это хенгауты
02:54:09 ПП
User 309556
профит по сравнению с системой контроля версий в том, что можно смотреть и пить пивко
02:54:42 ПП
User 309556
еще есть профит по сравнению с утюгом и дождем
02:55:35 ПП
User 309556
ваще проще подписаться на ютюб канал, но там пока ничего не готово
02:56:03 ПП
User 309556
но следующий хэнгаут 8го числа — это могу заранее сказать точно
02:57:21 ПП
User 4274761
вы о чем сейчас вообще? %)
02:57:38 ПП
User 309556
не важно короче)
02:58:59 ПП
User 309556
есть хэнгауты
https://www.youtube.com/watch?v=C3OqbN-Rtro
называются беклогжс. вчера первый был. о чем Дмитрий я не знаю
youtube.com/watch?v=C3OqbN-Rtro
Ссылка на Gitter-чат: https://gitter.im/dev-ua/frontend-ua/hangout Темы: Meteor vs. Apollo. GraphQL cases. Real-life data mutation, real-time updates Relay, ...
02:59:21 ПП
User 309556
но Виктор явно ими интересовался
03:06:22 ПП
User 138612574
ребят. вопрос. чисто реакт и верстка =)
03:06:28 ПП
User 138612574
есть таблица
03:06:54 ПП
User 138612574
при клике на одну из строк нужно чтоб под ней делался так называемый slideToggle
03:07:05 ПП
User 61730194
User 4274761
вы о чем сейчас вообще? %)
сколько нахожусь в этом канале, столько и не втыкаю =)
03:07:12 ПП
User 138612574
строки, которая не существует
03:07:25 ПП
User 138612574
ткнул. добавилась в дом и начала анимироваться
03:08:16 ПП
User 4274761
в чем проблема? создавай и анимируй)
03:08:21 ПП
User 61730194
сделать фейковую строку заранее?
03:08:23 ПП
User 4274761
componentDidMount
03:09:02 ПП
User 138612574
проблема в том, что когда второй раз тыкаешь - элемент моментально исчезает
03:09:09 ПП
User 4274761
меня вот удаление больше волнует
03:09:11 ПП
User 138612574
он пропадает из ДОМа и уже не анимируется
03:09:55 ПП
User 4274761
ага) я тут раньше спрашивал уже, есть компоненты для этого. ну или можно просто начинать анимацию, а удалять по окончании
03:10:36 ПП
User 4274761
ReactTransitionGroup https://facebook.github.io/react/docs/animation.html
reactjs.org/docs/animation.html
A JavaScript library for building user interfaces
03:10:56 ПП
User 138612574
оно на раскрытие и есть
03:12:20 ПП
User 108543364
@chicoxyzzy https://github.com/facebook/react/issues/6166 А вот это уже работает?
github.com/facebook/react/issues/6166
PropTypes.exactly I took use case below from some gitter chat where @JustBlackBird wanted some property to be String or exactly false. So maybe he can add some comments here. Use case PropTypes....
03:12:39 ПП
User 309556
нет, и не будет
03:13:00 ПП
User 108543364
А как мне на integer провалидировать?
03:13:13 ПП
User 309556
тайпскриптом
03:13:27 ПП
User 108543364
хуева)
03:13:38 ПП
User 108543364
Написал бы либу своих PropTypes
03:14:17 ПП
User 309556
ваще на самом деле в тайпскрипте тоже нет интов
03:14:37 ПП
User 309556
я им подкидывал уже много проптайпсов, но они не хотят
03:14:48 ПП
User 309556
ваще и правильно делают
03:15:01 ПП
User 108543364
User 309556
я им подкидывал уже много проптайпсов, но они не хотят
а нахера они то? сделай отдельную либо, будут благодарны тебе)
03:15:06 ПП
User 108543364
я буду)
03:15:15 ПП
User 309556
мне не нужно
03:15:24 ПП
03:16:38 ПП
User 138612574
эх, и тут ничего не сказали((
03:17:07 ПП
User 4274761
User 138612574
эх, и тут ничего не сказали((
а какой вопрос остался?
03:17:48 ПП
User 138612574
есть компоненты для этого - что за компоненты?
03:18:04 ПП
User 309556
вот тут должна быть парочка пропозалов для проптайпсов, можно оттуда код стырить
https://github.com/pulls?q=is%3Apr+author%3Achicoxyzzy+is%3Aclosed
03:18:40 ПП
User 144169875
Vitaliy у тебя видимо анимация на скрытие не отрабатывает, поэтому и дергается
03:19:14 ПП
User 138612574
она не неотрабатывает
03:19:26 ПП
User 138612574
ей нечего анимировать, потому что элемента уже нет в доме
03:19:34 ПП
User 4274761
User 138612574
есть компоненты для этого - что за компоненты?
эм... ReactTransitionGroup https://facebook.github.io/react/docs/animation.html
reactjs.org/docs/animation.html
A JavaScript library for building user interfaces
03:19:37 ПП
User 144169875
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
Глянь ссылку выше
03:19:48 ПП
User 4274761
“ну или можно просто начинать анимацию, а удалять по окончании”
03:20:59 ПП
User 138612574
и как ты предлагаешь это сделать? 

у меня прошел рендер -> он видит, что нет стейта сигнализирующего о том, что допстроки должны показываться
03:21:09 ПП
User 138612574
вот он и убивает строку
03:21:19 ПП
User 144169875
Он удалит после того как анимация закончится
03:21:25 ПП
User 144169875
смотри пример в документации
03:23:55 ПП
User 138612574
да доку эту я уже хз скока раз видел, суть от этого не меняется.
либо же по структуре внешней что то идет не так
03:24:05 ПП
User 138612574
каждая tr - это компонент
03:24:21 ПП
User 144169875
Возможно у тебя стили на анимацию не правильные
03:24:31 ПП
User 138612574
сверху tbody который является оберткой - CSSTransitionGroup
03:24:48 ПП
User 138612574
я по дебагеру вижу, что строка исчезает
03:25:13 ПП
User 138612574
Alexander просто подход у меня не прокатит)))
03:25:20 ПП
User 144169875
Посомтри в react-router там есть примеры анимаций страниц.
03:25:22 ПП
User 138612574
тут ситуация сложнее))
03:25:46 ПП
User 138612574
о, роутер, анимация страниц, интересно
03:26:08 ПП
User 144169875
https://github.com/reactjs/react-router/tree/master/examples/animations
github.com/reactjs/react-router/tree/master/examples/animations
react-router - A complete routing library for React
03:54:20 ПП
User 138612574
спасибо
03:54:41 ПП
User 138612574
а кто то имел дело с cloneElement?
03:54:51 ПП
User 138612574
что оно есть такое?
03:54:58 ПП
User 138612574
и для чего?
03:57:44 ПП
User 4627228
React modal?
05:58:58 ПП
User 130174893
Ребят, как можно передать данные из одного child compoment в другой ? У меня есть ProductsPage '/products' который рендерит список товаров, ProductPage '/product/:productSku' который рендерить товар по отдельности, в обоих компонентах есть onClick для отправки в корзину, так вот как забрать данные по клику для компонента CartPage '/cart' ?
06:04:37 ПП
User 185980313
User 130174893
Ребят, как можно передать данные из одного child compoment в другой ? У меня есть ProductsPage '/products' который рендерит список товаров, ProductPage '/product/:productSku' который рендерить товар по отдельности, в обоих компонентах есть onClick для отправки в корзину, так вот как забрать данные по клику для компонента CartPage '/cart' ?
использовать redux или другие сторы, или прокидывать от отца фукнцию  к :productSku и в отце передать нужные данные к CartPage - но так лучше не делать =)
06:06:14 ПП
User 130174893
я смотрю курс от itvdn там по redux ничего не было ) а дз сделать типа инет-магазин, я вот уперся в корзину )
06:30:02 ПП
User 86922735
User 130174893
я смотрю курс от itvdn там по redux ничего не было ) а дз сделать типа инет-магазин, я вот уперся в корзину )
а как в целом курс? Стоит смотреть?
06:33:27 ПП
User 130174893
User 86922735
а как в целом курс? Стоит смотреть?
я только начал учить react и в целом js, по этому объективно не могу сказать ) а так мне понравился, без воды во всяком случае