These are chat archives for dev-ua/reactjs

13th
Jan 2016
Ingvar Stepanyan
@RReverser
Jan 13 2016 05:28

короче, вы не поверите, но мне Ингвар наврал. Я уже полдня потратил. Все без результата.

O_O я?)

про що?)
Artem Zakharchenko
@blackrabbit99
Jan 13 2016 09:30
Мастера, я тут попедалил на реакте/redux и как-то мне кажется что без ramdajs, слишком уж сложно не отклоняться от функционального концепта, считаете ли вы что использование ramdajs || аналоги это хороший тон или must be ?
Denis Stoyanov
@xgrommx
Jan 13 2016 09:49
@blackrabbit99 ramda крутая, почти все аналоги из хаскелля еще можно lodash-fp
@blackrabbit99 а так глянь сюда https://github.com/xgrommx/awesome-functional-programming#javascript
Artem Zakharchenko
@blackrabbit99
Jan 13 2016 09:51
@xgrommx просто, редакс навязывает функциональный подход, после композации не хочется юзать If/&& whatever
@xgrommx спасибо обязательно гляну репозиторий
Denis Stoyanov
@xgrommx
Jan 13 2016 09:51
@blackrabbit99 композиция это и есть один из ключевых сильных моментов в fp
Artem Zakharchenko
@blackrabbit99
Jan 13 2016 09:52
да конечно, но меня беспокоит стиль написания внутри самих компонентов
если на уровне redux у тебя есть достаточное кол-во инструментов, то внутри компонента - нету
и в итоге вроде как и fp way, а вроде как и нет(когда смотришь реализацию компонента чекбокс)
Denis Stoyanov
@xgrommx
Jan 13 2016 09:54
@blackrabbit99 юзай ramda или lodash-fp ;)
Vyacheslav Slinko
@vslinko
Jan 13 2016 09:56
для компонент есть recompose
тоже функциональные хелперы
stanleer
@stanleer
Jan 13 2016 10:15

кто ить сталкивался с такой ошибкой?

Warning: Failed propType: Invalid prop component supplied to Route.

Vyacheslav Slinko
@vslinko
Jan 13 2016 10:16
очевидно, ты не передаешь component в Route
если везде component указан, значит, скорее всего, проблема в импортах
stanleer
@stanleer
Jan 13 2016 10:17
ааа, понятно
я зарезервировал несколько компонентов и забил в них пустые массивы
stanleer
@stanleer
Jan 13 2016 10:27
а почему при попадании в корень сайта добавляется #/ ?
Vyacheslav Slinko
@vslinko
Jan 13 2016 10:45
видимо ты используешь hash history
что ты передаешь в <Router history={???}
stanleer
@stanleer
Jan 13 2016 11:03
<Router history={useRouterHistory(createHashHistory)({ queryKey: false })}>
это из примера с оф сайта
Vyacheslav Slinko
@vslinko
Jan 13 2016 11:06
замени createHashHistory на createBrowserHistory
а лучше почитать документацию полностью перед использованием
stanleer
@stanleer
Jan 13 2016 11:10
@vslinko спс
stanleer
@stanleer
Jan 13 2016 11:17

еще в догонку нубовопрос на тему роутинга
есть роутер

<Route path="/" component={App}>

и

<IndexRoute component={Dashboard} />

если не указывать IndexRoute то в корне сайта отработает App, а в чем тогда смысл?

из документации не понял
Kirill Yakovenko
@blia
Jan 13 2016 11:20
Эпп отработает для заходе на любую страницу(шапка/меню/т.д.). То есть всегда. Индекс соответственно для главной только.
stanleer
@stanleer
Jan 13 2016 11:21
а, так и предполагал
спасибо
stanleer
@stanleer
Jan 13 2016 12:27
при импорте в from приходится указывать путь относительно того файле где проиходит импорт
а нельзя ли как то задать переменную и плясать от нее везде?
Kirill Yakovenko
@blia
Jan 13 2016 12:30
resolve: {
    root:  path.join(__dirname, "src")
},
в конфиге вебпака
stanleer
@stanleer
Jan 13 2016 12:30
@blia а в иморте как тогда будет?
Kirill Yakovenko
@blia
Jan 13 2016 12:31
from 'folder/in/root/file'
Terry Sahaidak
@terrysahaidak
Jan 13 2016 12:41
до речі, щойно побачив твіт, що lodash 4 is out
Maxim
@stigmat4j
Jan 13 2016 12:43
lodash v4.0.0
ага, уже доступен на npm
Denis Stoyanov
@xgrommx
Jan 13 2016 12:43
вообщето давно)
Maxim
@stigmat4j
Jan 13 2016 12:44
недавно обновлял пакеты и не было нового лодеша. Обновлял дня 3-4 назад
может в бете был?
stanleer
@stanleer
Jan 13 2016 12:58

@blia прописал root: '/public/_source/frontend/app’
все компоненты лежат в папке components
из одной компоненты вызываю другую

раньше было так

import SearchBar from '../SearchBar/SearchBar’;

вызываю так

import SearchBar from './components/SearchBar/SearchBar’;

и ниале

Eugene Zharkov
@2j2e
Jan 13 2016 14:04
ребята а вы не видели хитрожопых патернов или решений для js чтобы на сервер отсылать только diff изменений модели? при этом модели могут быть со сложной структурой?
stanleer
@stanleer
Jan 13 2016 14:05
а в чем выигрышь?
Eugene Zharkov
@2j2e
Jan 13 2016 14:37
если модель 50 полей, а редактируется одно, слать 1
stanleer
@stanleer
Jan 13 2016 14:38
а, я думал ты про изменение в коде
Kirill Yakovenko
@blia
Jan 13 2016 14:39
@stanleer без точки. Как модуль
у меня вот так
import styles from 'styles/Filters.styl'
import cx from 'classnames'
import map from 'lodash/collection/map'
stanleer
@stanleer
Jan 13 2016 14:42
@blia спс
@blia у тебя бутстрап используется?
Kirill Yakovenko
@blia
Jan 13 2016 14:45
неа
stanleer
@stanleer
Jan 13 2016 14:46
@blia кта заметил у тя lodash а зачем он в реакте если реакт сам шаблонизатор можно сказать
Kirill Yakovenko
@blia
Jan 13 2016 14:47
так лодаш же не шаблонизатор совсем.
stanleer
@stanleer
Jan 13 2016 14:47
разве, хм, мне показалоь вроде он
Kirill Yakovenko
@blia
Jan 13 2016 14:48
показалось https://lodash.com/docs
ewnd9
@ewnd9
Jan 13 2016 14:49
@blia что скажешь насчет https://github.com/lodash/babel-plugin-lodash ?
Kirill Yakovenko
@blia
Jan 13 2016 14:49
но это лишь одна из функций
ewnd9
@ewnd9
Jan 13 2016 14:49
в контексте import map from 'lodash/collection/map'
Kirill Yakovenko
@blia
Jan 13 2016 14:50
ага, но я не пользовался еще. Видел только. Пока руками. Может попробую сегодня. Как раз стартую проект
ewnd9
@ewnd9
Jan 13 2016 14:56
я сегодня заюзал, работает
stanleer
@stanleer
Jan 13 2016 15:17
подскажите на что ругается реакт такой ошибкой
Warning: Each child in an array or iterator should have a unique "key" prop.
    render() {
        return (
            <div id="listing">
                {this.state.items.map(function(item) {
                    return (
                        <div className="listingTile">...</div>
                    );
                })};
            </div>
        );
    }
Terry Sahaidak
@terrysahaidak
Jan 13 2016 15:18
ну прочитай помилку, там ж пише
крім того доки треба до реакту читати
stanleer
@stanleer
Jan 13 2016 15:18
почитал и не понял в том то и дело
Terry Sahaidak
@terrysahaidak
Jan 13 2016 15:18
кожен <div> в ітерації має мати свій ід у вигляді ключа
stanleer
@stanleer
Jan 13 2016 15:18
он ссылается на http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
там такие же примеры тока в ес5
Terry Sahaidak
@terrysahaidak
Jan 13 2016 15:19
а яка різниця?
      <ol>
        {results.map(function(result) {
          return <li key={result.id}>{result.text}</li>;
        })}
      </ol>
stanleer
@stanleer
Jan 13 2016 15:19
чета я про ключ не понял
хм
а есил мне не надо завать id?
Terry Sahaidak
@terrysahaidak
Jan 13 2016 15:20
будь-який унікальний ідентифікатор
хоч індекс в масиві
Kirill Yakovenko
@blia
Jan 13 2016 15:20
вообще это ворнинг
stanleer
@stanleer
Jan 13 2016 15:20
у меня там огромный кусок html кода
че на все теги проставлять что ли?
Kirill Yakovenko
@blia
Jan 13 2016 15:20
если ты не планируешь их менять местами - забей
в продакшене его не будет
stanleer
@stanleer
Jan 13 2016 15:20
окак
не знал
Terry Sahaidak
@terrysahaidak
Jan 13 2016 15:21
не на всі, а на батьківський
і взагалі такі речі краще винось в методи/компоненти
не круто мапити такі куски
потім фіг розгрібешся в тому гівні)
stanleer
@stanleer
Jan 13 2016 15:22
понял
буду знать
@terrysahaidak так это и есть компонента тока с небольшой оберткой внутри себя
Ingvar Stepanyan
@RReverser
Jan 13 2016 15:23

ребята а вы не видели хитрожопых патернов или решений для js чтобы на сервер отсылать только diff изменений модели? при этом модели могут быть со сложной структурой?

GraphQL вроді ж це робить, ні?

@2j2e ^
stanleer
@stanleer
Jan 13 2016 15:23
обертка заключается токлько в <div id="listing»>
че мне под это дело лепить компоненту еще )
решилс съэкономить коду
Terry Sahaidak
@terrysahaidak
Jan 13 2016 15:31
@stanleer то просто винеси в окемий метод
stanleer
@stanleer
Jan 13 2016 15:32
@terrysahaidak еще не умею )
Terry Sahaidak
@terrysahaidak
Jan 13 2016 15:34
renderItem(item) {
  return <Component {...item} />
}
render() {
  return <div>{items.map(item => this.renderItem(item))}</div>
}
або замість {...item} пиши якісь пропси
але суть зрозуміла надіюсь
stanleer
@stanleer
Jan 13 2016 21:33
ктонить испольует слайдер на сайте?
ползунок для фильтра
типа от и до
Ingvar Stepanyan
@RReverser
Jan 13 2016 21:56
@stanleer <input type="range" />?
stanleer
@stanleer
Jan 13 2016 21:58
@RReverser ага
я всего пару оиб нашел и чета они не оч
Ingvar Stepanyan
@RReverser
Jan 13 2016 22:15
краще юзай нативний всюди де можна
+ поліфіл
Kirill Yakovenko
@blia
Jan 13 2016 22:18
кому чего наврать? А то в других чатиках выгоняют.
stanleer
@stanleer
Jan 13 2016 23:07
когда вставляешь большой кусок html кода, который не соответствует реакту то при сборке валимся в ошибку
Вот и возникает вопрос а есть что то для иде чтобы оно реактовую разметку понимало и подсказывало.
а то сидишь выискиваешь как лошара эти теги незакрытые или классы )
ide шторм
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:35
@stanleer недавно бачив
ща пошукаю
а шторм має розуміти реактівську розмітку
вроді треба плагін якийсь
stanleer
@stanleer
Jan 13 2016 23:38
да мне подсветки в иде хватило бы
stanleer
@stanleer
Jan 13 2016 23:40
@terrysahaidak лан завтра почитаю
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:41
а взагалі там, коли врубуєш jsx файли, має пропонувати переключитись на jsx підсвітку
stanleer
@stanleer
Jan 13 2016 23:42

@terrysahaidak скажи как быть
есть модальное окно но оно не форма в пару строк
а там две формы и оно тостое получается по html коду

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

может вынести его в отдельную компоненту?
но тогда как будет передаваться состояние окна по клику

Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:42
емм
саму розмітку модалки перекинь в інший компонент
stanleer
@stanleer
Jan 13 2016 23:43
сейчас за его остояние отвечает такой функционал
constructor(props) {
        super(props);

        this.state = {showModal: false};
    }

    closeModal() {
        this.setState({ showModal: false });
    }

    openModal() {
        this.setState({ showModal: true });
    }
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:43
ну ось
його лиши
а розмітку перекинь в компонент
stanleer
@stanleer
Jan 13 2016 23:43
и дейсвие на закрытие
onClick={this.closeModal.bind(this)}
так а ка ктогад переавать в дуругю компоненту действввие?
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:43
ну пропсами прокинь екшени
<Modal close={this.closeModal.bind(this)} />
і в модалці буде this.props.close()
stanleer
@stanleer
Jan 13 2016 23:45
@terrysahaidak кстати а вот такой момент
когда то давно была такая тема как pajax
сейчас я вижу у всех идет перезагрузка страницы
все положили на это или как?
типа и так летает ну и хрен с ней)
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:47
не повіриш, но я не знаю шо таке pajax
видно я не застав
або шо
хз
stanleer
@stanleer
Jan 13 2016 23:48
ну итпа подгурзка контента без перезагрузки страницы
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:48
ем
ну типу SPA?
ну тобто при раута, сторінка не перегружається?
stanleer
@stanleer
Jan 13 2016 23:49
по типу но визуально смахивает как обычный сайт с перезагрузкой
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:49
а чого ти думаєш, що всі забили на це?
stanleer
@stanleer
Jan 13 2016 23:49
да типо как бы по сайту ходишь тока на самом деле не уходишь никуда
но ссылка в урле меняется
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:50
взагалі-то react+react-router і нічого не перегружається
ну це суть SPA
ну всі SPA фреймворки, певно, таке вміють, і таке роблять)
stanleer
@stanleer
Jan 13 2016 23:53
хм а ващето да
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:53
суть ж таких фреймворків в тому, щоб у тебе був один Index.html, який підключав скрипт(и), ну і весь твій ui і розмітка генерувалась динамічно
stanleer
@stanleer
Jan 13 2016 23:53
а мне показалось перегрузка идет
а ща логи посмотрел нету запроса к серверу
хм а почему тогда идет перересовка всей страницы?
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:53
насправді це не так
реакт розумний, він перемальовує тільки те, що змінилось
stanleer
@stanleer
Jan 13 2016 23:54
ну визуально видно что идет перересовка
пропадает все и снвоа появляется
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:55
якщо щось мінімальне міняється, чи ти про щось глобальне, от як весь раут?
якщо все пропадає і появляється, значить щось не так
stanleer
@stanleer
Jan 13 2016 23:55
когад я по ссылке перехожу то как на обычном сайте все пропадает потмо появляется и другой контент итпа
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:55
бо не має
а ссилки які?
stanleer
@stanleer
Jan 13 2016 23:56
<NavItem href="/login">Войти</NavItem>
ну и роутинг на это дело
<Route path="/login" component={Login} />
вроде все по ману
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:57
а в тебе ж є якийсь індекс-раут?
<Route path='/' component={Root]>
// routes
</Route>
от попробуй в перед this.props.children щось написати
і подивишся, що воно не пропадає
stanleer
@stanleer
Jan 13 2016 23:58
вот польностью
<Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Main} />

            <Route path="/login" component={Login} />

            // страница не найдена
            <Route name="not-found" path="*" component={NotFound} />
        </Route>
    </Router>
Terry Sahaidak
@terrysahaidak
Jan 13 2016 23:58
от, в App спробуй
stanleer
@stanleer
Jan 13 2016 23:59
не понял