Как в React сделать Layout систему? Есть у кого-нибудь ссылка (не гугл), я уже пошарил

Как в React сделать Layout систему? Есть у кого-нибудь ссылка (не гугл), я уже пошарил

смотря что ты юзаешь если styled-components, то react-styled-flexboxgrid, styled-grid

для JSS тоже думаю найдется

если CSS-modules то можешь скопипастить откуда нить или заюзать обычный CSS-грид

Всем привет. Вопрос по react-router (v4 alpha). Пытаюсь из этого примера https://reacttraining.com/react-router/examples/auth-workflow переделать const PrivateRoute = ({ component, ...rest }) ... в компонент. Вопрос: как получить ...rest ? component вроде получаю через props.component а как ...rest?

Всем привет. Вопрос по react-router (v4 alpha). Пытаюсь из этого примера https://reacttraining.com/react-router/examples/auth-workflow переделать const PrivateRoute = ({ component, ...rest }) ... в компонент. Вопрос: как получить ...rest ? component вроде получаю через props.component а как ...rest?

ты знаешь что такое rest-spread в es6?

нет

прочитай, тогда поймешь

... в объекте имеет свой смысл

спасибо!

условно, эти выражения равны

получше, но мне кажется на React.createElement это выглядело бы лучше

Соответственно без логики можно просто писать const Chevron = applyStyles(() => <i styleName='chevron-icon' /> )

получше, но мне кажется на React.createElement это выглядело бы лучше

В каком плане?

вот в этом примере JSX портит код немного

ща покажу

Ну тут компонент очевидно не фонтан, это что первое в качестве примера попалось

Тут возможно да, так лучше)

можешь показать applyStyles?

Не, camelCase в css не стоит)

import CSSModules from 'react-css-modules' export const fixedCSSModules = (styles: Object, options?: CssOptions) => (Comp) => CSSModules(Comp, styles, options) // обертка над react-css-modules, короче ... import {fixedCSSModules} from '../../utils' import styles from './dropdown-plus.module.less' const applyStyles = fixedCSSModules(styles)

Это короче способ ссылаться на css modules классы просто текстом, без className={styles['very-uncomfortable']}

я че-то подумал, ты jss юзаешь

Я так и понял)) Юзаю, но только когда это требуется

Я себя чувствую ортодоксом ? Но реально, учитывая приёмы выше, для jss остаётся довольно небольшая доля кейсов

Я себя чувствую ортодоксом ? Но реально, учитывая приёмы выше, для jss остаётся довольно небольшая доля кейсов

какие в твоём случае?

Ну стандартно, когда есть прямая связь данных из js и стилей. Параметрические цвета, размеры, ссылки, вот это всё

А вот просто логику / паттерн-матчинг уже можно делать просто оперируя строками стилей в classNames

можешь ещё одну функцию кинуть? fixedCSSModules

import CSSModules from 'react-css-modules' export const fixedCSSModules = (styles: Object, options?: CssOptions) => (Comp) => CSSModules(Comp, styles, options) // обертка над react-css-modules, короче ... import {fixedCSSModules} from '../../utils' import styles from './dropdown-plus.module.less' const applyStyles = fixedCSSModules(styles)

?

а блин

просто curry с переносом первого параметра вперед)

Причём до этого я слышал не айс отзывы о react-css-modules, но оказалось, что вполне ок

он на лету css компилит?

или в вебпаке сначала css лоадер

Второе

Это по сути хелпер для ассоциаци значений (названий классов) с объектом (import style from 'style.css') и присвоения результата в className

где-то уже видел такое

он проходит по child'ам?

Увы, нет

но у тебя там styleName же

Всё, что напрямую написано в этом компоненте — транспилируется, но в дочерние компоненты не залезет

Можно по другому делать, если внутри такого компонента написать например <MyButton styleName='btn' /> то в MyButton передаётся уже готовое привычное поле className

давно кстати имею проблему с css-модулями и именами анимаций

'css-loader?&modules&importLoaders=1&localIdentName=[name]__[local]' вот подключены, и там при задани animation-name из кейфрейма того же компонента чет не заводится

ибо оно добавляет localIdentName как анимациям и из за этого все плохо. в хроме можно задавать имя анимации строково типа 'Component__animationName', в лисе так не выйдет

в issues на гитхабе единственный разумный выход - вынести анимации в отдельный css который не связан с модулями, ничего лучше не нашел

печально..

ну возможно я прост криво настраиваю но вроде видел немало похожих кейсов от чуваков

Всем привет! У меня тут кретинский вопрос весьма! Возможноли на реакте сделать бота в тг? Спасибо!

да

только реакт это реакт

а бот это бот

?

Ну связка 1с реакт Тг в приницпе вомзожна. Да, по стуи ТГ бот-это фронт

Правильно все понимаю?

Вообще идея сумасшедшая конечно))

Я просто не разраб, а сейчас вот надо бы совсеми иэтими делами разобраться)

нет. неправильно

Я про рендеринг интерфейса бота реактом))

ERROR: S client not available

потому что тг-боты пишутся сервер-сайд https://core.telegram.org/bots/samples

а реакт это фреймворк для рендера клиент-сайд

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

нет. неправильно

Хм. Тогда я в татольном анусе непонимания)

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

можно можно)

а реакт это фреймворк для рендера клиент-сайд

они вынесли рендер для браузера в отдельную либу под названием react-dom, а сам реакт можно где угодно использовать

только рендерить нечем, хе-хе

вот наркоманы: https://github.com/keithpops/jeoparty

вот еще, музыку можно на реакте писать https://github.com/FormidableLabs/react-music

Я просто не разраб, а сейчас вот надо бы совсеми иэтими делами разобраться)

ты там случайно не вакансию составляешь?)

вот еще, музыку можно на реакте писать https://github.com/FormidableLabs/react-music

Нормальные музыкальные приложения ждут имплементации webassembly

ты там случайно не вакансию составляешь?)

В яблочко!)

Нормальные музыкальные приложения ждут имплементации webassembly

в целом да, но все равно можно будет продолжать на реакте писать, какая разница, во что jsx транспайлить?

в целом да, но все равно можно будет продолжать на реакте писать, какая разница, во что jsx транспайлить?

Ну webassembly тут скорее для движка нужен

Я давно на досуге размышляю, какая реализация интерфейса / модели данных годится для музыкального софта. Прихожу к выводу, что на реакте пока сложновато будет

думаю, ты прав

Жду пока придумают подход, в котором будет ещё меньше бойлерплейта) Как по интерфейсу, так и по модели данных

Promise.prototype.then всегда через event loop работает?

const promise = new Promise((resolve, reject) => { console.log(1); resolve(); }); console.log(2); promise.then(() => console.log(3)); console.log(4); 1 2 4 3

привет всем! Есть вопрос, кто как реализовывает loader в компонентах, я в плане дублируете ли их в тех компонентах, где он нужен или это 1 глобальный, который висит в рутовом компоненте и перендерит все приложение, если его запустит или это hoc или еще что-то, кто что использует?

Есть глобальный для глобальных релоадов, есть отдельные внутри компонентов, по типу всяких кнопок и подобных вещей

ну вот допустим лоадер для загрузки какого-то списка в компоненте, но а так же лоадер для апдейта елемента списка или создания нового или удаления

это получается разные лоадеры, ну в структуре, или один и тот же?

В таком кейсе скорее всего это фейд всего списка + лоадер поверх этого фейда, пока список не обновится. Если только нет каких-то особых требований по их разделению на разные.

я понимаю, но как это структурно выглядит? То есть hoc или просто в компоненте стейт есть isLoading или все-таки глобально на приложение isLoading какой-то(этот вариант вообще мне не нравится, т.к. перерендер всего приложения происходит) или еще как-то

просто допустим у меня есть 5 табок и допустим какие-то еще данные в хедере или сайдбаре, которые 1 раз за приложение грузятся, с разными данными на каждом и при переключении мне нужно подгружать данные или на какой-то табке я добавляю/удаляю елемент, а внутри каждой из табок в списках, допустим, есть еще подсписки, которые можно так же менять

какого-то универсального лоадера судя по всему не выйдет, допустим hoc, я просто склоняюсь к этому, но не уверен, может еще есть варианты

есть какие-то либы упрощающие обход ast? нужно узнать содержит ли выражение переменные

не хочется свич писать на каждый тип выражения

нашел какой-то https://github.com/estools/estraverse

Что именно? Компилить фишки в es5?

Ну например, как указать что переменная может содержать только строку в определенном формате? Ну например строковая переменная должна содержать только числа. Или только дату в определенном строковом представлении?