старый — v0 новый — v1

нет второго

Хай всем. Кто-то смог прикрутить MaterialUI к Create React App чтобы CSS Modules работали?

material ui next не будет работать с css modules потому что у них принципиально разный способ стилизации material работает на основе css-in-js

У них в документации описано что работает. Но меня не слушается

оно имеет интероп

У них в документации описано что работает. Но меня не слушается

а чего ты от него хочешь?

От чего?

Если что, можно вот это репо форкнуть поэксперементировать, там CRA + Material UI... по идее CSS modules должны работать kriasoft/react-firebase-starter

Если что, можно вот это репо форкнуть поэксперементировать, там CRA + Material UI... по идее CSS modules должны работать kriasoft/react-firebase-starter

Там стайлед используются

в material-ui есть хок withStyles. Он принимает объект со стилями. Можно при формировании этог ообъекта получить доступ к пропсам?

нет

Там стайлед используются

эээ jss вообще-то

import s from './Component.css'; <div className={s.className}>

Там стайлед используются

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Badge/Badge.js

В материале CSSinJS, в react-firebase-starter уже стайлед

в material-ui есть хок withStyles. Он принимает объект со стилями. Можно при формировании этог ообъекта получить доступ к пропсам?

можешь юзать инлайн стили или создать свой HOC/HOF с withStyles

В react-firebse-starter скорее всего CSS Modules должны работать, при желании можно их заюзать вместо styled components или jcss

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

https://github.com/klauscfhq/signale

https://github.com/klauscfhq/signale

воу.. офигенный. Мне нравится. Спасибо

Хай всем. Кто-то смог прикрутить MaterialUI к Create React App чтобы CSS Modules работали?

https://material-ui.com/customization/css-in-js/#css-injection-order

Вообще мне кажется дичью юзать hoc для разметки/стилей

Хотя наверное для стилей ок ?

Вообще мне кажется дичью юзать hoc для разметки/стилей

Придумай лучше

И что бы модульно

Через render prop/children, и им кинуть стили но в обертку они конечно же не попадут

Ребят только начал изучать реакт помогите плиз. У меня есть компоненты Menu и компонент Content. В менюшке кнопочки которые делаю запрос на сервак. Мне нужно в Content отобразить эти данные. Дело в том что Content не является ни дочерним ни родительским элментом а соседним. Как мне туда передать параметры? Я конечно понимаю что можно хранить данные как то выше например в App <App><Menu/><Content/></App>. Но это как то не красиво и происходит что логика сдвикается на уровень выше. Я слышал что в таких ситуация помогает глобальный store типа Redux. Но я еще реакт не познал чтобы переходит к редуксу. Как то можно сделать это более изящно?

Ребят только начал изучать реакт помогите плиз. У меня есть компоненты Menu и компонент Content. В менюшке кнопочки которые делаю запрос на сервак. Мне нужно в Content отобразить эти данные. Дело в том что Content не является ни дочерним ни родительским элментом а соседним. Как мне туда передать параметры? Я конечно понимаю что можно хранить данные как то выше например в App <App><Menu/><Content/></App>. Но это как то не красиво и происходит что логика сдвикается на уровень выше. Я слышал что в таких ситуация помогает глобальный store типа Redux. Но я еще реакт не познал чтобы переходит к редуксу. Как то можно сделать это более изящно?

redux

Это единственный способ?

ну тебе в любом случае придется с ним столкнуться

есть ещё context проброс пропс наверх другие стейт менеджеры

Не я не хочу логику как то мешать, это не красиво, лучше сразу уж редукс. Я просто думал реакт как то может общаться между компонентами.

Не я не хочу логику как то мешать, это не красиво, лучше сразу уж редукс. Я просто думал реакт как то может общаться между компонентами.

Contex

Хорошо спасибо просту

Прочту*

А чтобы babel понимал flow, нужно просто пресет поставить? Просто у меня так ошибок не выводит, хотя я их эмулирую

А чтобы babel понимал flow, нужно просто пресет поставить? Просто у меня так ошибок не выводит, хотя я их эмулирую

flow пресет

Да

babel-preset-flow

.babelrc { "presets": [ "flow", "env", "react" ], "plugins": [ "transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread" ] } index.js render( <Provider store={store}> <ThemeProvider theme={theme}> <Root name={123} /> </ThemeProvider> </Provider>, document.getElementById('root') ); Root.jsx type Props = { name: string }; export default class extends Component<Props> { render() { return ( <div>{ this.props.name }</div> ) } }

Ошибок нет

.babelrc { "presets": [ "flow", "env", "react" ], "plugins": [ "transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread" ] } index.js render( <Provider store={store}> <ThemeProvider theme={theme}> <Root name={123} /> </ThemeProvider> </Provider>, document.getElementById('root') ); Root.jsx type Props = { name: string }; export default class extends Component<Props> { render() { return ( <div>{ this.props.name }</div> ) } }

yarn add babel-preset-flow —dev

yarn add babel-preset-flow —dev

Он стоит

Флоу конфиг?

Ошибок нет

flow status что говорит?

Если я запускаю flow, то ошибки находит

А если просто девсервер, то ничего нет

Оно же параллельно должно

Оно же параллельно должно

Ну то есть если я запустил webpack-dev-server, то ошибки как получать?

Ну то есть если я запустил webpack-dev-server, то ошибки как получать?

Либа для параллельного запуска

Либа для параллельного запуска

Иначе никак?

Хз

И что предложите?

Вопросы по Реакту 50$ час

Смысл тогда в пресете?

В рамках шутки

Жаль материться нельзя

Вопросы по Реакту 50$ час

Смешная шутка

Жаль материться нельзя

Вообще-то можно

Иначе никак?

precommit hook

Да и у тебя в любом случае при билде все рассыпется

Ведь проект не соберётся

ERROR: S client not available

Есть какой нибудь готовый компонент для рисования графов на канвасе? Типа, создал объекта А, создал объект B, создал ребро между ними, переместил объект A куда нибудь (объект - картинка)

А Шо ми з очками вирішили?

1 3 5 ?

Чи 1 2 3

А Шо ми з очками вирішили?

This is russian-speaking community tho so not everyone knows english well

Да и у тебя в любом случае при билде все рассыпется

Так всё же собралось и работает

А какую нотацию flow используешь?

Комментариями или как в тс?

А какую нотацию flow используешь?

Что?

Комментариями или как в тс?

Ну пишу // @flow

Ну есть два типа. объявление типов через комментарии и кодом в стиле тайпскрипт

Можно ещё как-то?

Покажи пример кода

Покажи пример кода

https://github.com/zayalexnick/react-clean

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

Я просто хочу норм кодить научится на реакте :) Но пока туговато. Тут сказали, что у меня с редакс экшенами проблемы. Надо понять работу редакт мидлваров мне

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

Так я пропс передаю name={123}, а type Props = { name: string };

А причём тут экшны и мидлвары?

А причём тут экшны и мидлвары?

Да эт я от темы ушел

А причём тут экшны и мидлвары?

Просто у меня экшены такого вида export const signin = ({ login, password }) => { return async (dispatch) => { dispatch(authRequested()); try { const response = await axios.post('/api/auth', { login, password }); const result = response.data; if (result.ErrorCode < 0) dispatch(authFailed({ code: result.ErrorCode, message: result.ErrorString })); else dispatch(authSuccessed(result.Data)); } catch (e) { console.log(e); } dispatch(authRecieved()); } }; Знаю, что их можно почистить и основное вынести. Но пока хз как

Ну а в чем тащемта проблема

Выглядит как классический пример с мануала редакса. Только с богомерзкими асинк эвэйтами

Ну а в чем тащемта проблема

Я про флоу спрашивал. Зайди в src/index.js. Я там передаю пропс. В src/Root/index.jsx я пишу type, но всё равно проходит и ошибки никакой, если запустить webpack-dev-server

Выглядит как классический пример с мануала редакса. Только с богомерзкими асинк эвэйтами

Вот вот, богомерзкий. А как улучшить - хз

Вот вот, богомерзкий. А как улучшить - хз

dispatch(get(...)) .then(data => dispatch(resolve(data))) .catch(error => dispatch(error(error)))

dispatch(get(...)) .then(data => dispatch(resolve(data))) .catch(error => dispatch(error(error)))

Так лучше будет?

кому как нравится. работать будет абсолютно одинаково

кому как нравится. работать будет абсолютно одинаково

А что насчёт работы с flow?

ну я смотрю