смотрю и душа радуется

От чего ?)

От чего ?)

от красоты

от красоты

Лол

у меня такой стейт state = { isFormDirty: false, fields: { firstName: '', lastName: '', email: '', password: '', passwordConfirmation: '', phoneNumber: '', } } привязываюсь отдельно к каждому филду и пытаюсь менять handleChange = e => { const { value } = e.target; this.setState({ fields[value.name]: value, isFormDirty: value.length > 0 }); }; но что-то не выходит подскажите что не так))

value это стринга

handleChange = e => { const { value } = e.target; this.setState({ fields[e.target.name]: value, isFormDirty: value.length > 0 }); };

у меня такой стейт state = { isFormDirty: false, fields: { firstName: '', lastName: '', email: '', password: '', passwordConfirmation: '', phoneNumber: '', } } привязываюсь отдельно к каждому филду и пытаюсь менять handleChange = e => { const { value } = e.target; this.setState({ fields[value.name]: value, isFormDirty: value.length > 0 }); }; но что-то не выходит подскажите что не так))

fields[...] в квадратные скобки надо ещё завернуть, computed же

ребят, мне для реакта нужен роутинг как на ангуляре, чтобы был компонент, принимающий в себя некую структуру, содержащую описания роутов (массив объектов, к примеру) и генерящий определённый компонент на её основе, в зависимости от роута на котором мы находимся сейчас. кто-нибудь видел что-то похожее?

React-router не подойдёт?

React-router не подойдёт?

в голос просто

ребят, мне для реакта нужен роутинг как на ангуляре, чтобы был компонент, принимающий в себя некую структуру, содержащую описания роутов (массив объектов, к примеру) и генерящий определённый компонент на её основе, в зависимости от роута на котором мы находимся сейчас. кто-нибудь видел что-то похожее?

React router config может быть?

React router config может быть?

а вот мне не понятно, это отдельная либа? просто я такие же конфиги делал и просто с React router

React router config может быть?

Посмотрю, спасибо

а вот мне не понятно, это отдельная либа? просто я такие же конфиги делал и просто с React router

Доп либа к роутеру

А какая самая может и не любимая и хреновая, но каноничная либа для работы с формами? Ну типа стейт менеджер - редакс, роутер - реакт-роутер, а формы - ?

formik насколько я знаю

А какая самая может и не любимая и хреновая, но каноничная либа для работы с формами? Ну типа стейт менеджер - редакс, роутер - реакт-роутер, а формы - ?

https://reactjs.org/docs/forms.html#fully-fledged-solutions

Спасибо=)

Ребята, кто использует ActionCreator ? Подскажите плиз можно как то на один редьюсер подвизят два экшона ??

Или как то по другому решить проблему может можно ? Дело в том что у меня два экшона решают по сути одну задачу меняют одно поле и не хотелось бы дублировать редьюсер.

в Тайпскрипте я делал через пакет fsa-reducers там можно было сделать что то типо такого .cases( [action1, action2], () =>{}) Но есть проект без тайпскрипта и как там за юзать два экшона на один редьюсер

при чем тут тайпскрипт к редьюсерам?

Ребята, кто использует ActionCreator ? Подскажите плиз можно как то на один редьюсер подвизят два экшона ??

https://redux.js.org/basics/example#reducers-todosjs - в примере 1 редьюсер, 2 экшена.

Ребята, кто использует ActionCreator ? Подскажите плиз можно как то на один редьюсер подвизят два экшона ??

switch(x) { case action1: case action2: { return state } }

case A: case B: return state

почему бы просто не использовать один и тот же action?

А какая самая может и не любимая и хреновая, но каноничная либа для работы с формами? Ну типа стейт менеджер - редакс, роутер - реакт-роутер, а формы - ?

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

А не подскажите качественные материалы по паттернам проектирования в React, и можно ли их использовать с ним?

А не подскажите качественные материалы по паттернам проектирования в React, и можно ли их использовать с ним?

всё, что применимо к JS, можно использовать в реакте. О каких паттернах вы говорите?

всё, что применимо к JS, можно использовать в реакте. О каких паттернах вы говорите?

Фабрики, адаптеры, декораторы и вся эта дичь

почему бы просто не использовать один и тот же action?

может у него разные запросы типо, а так я даже хз, где такое может понадобиться

Народ, подскажите, как сделать авторизацию на реакт/нод через гугл? Я просто только начал это изучать и немного запутался. В какую сторону смотреть?

может у него разные запросы типо, а так я даже хз, где такое может понадобиться

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

Народ, подскажите, как сделать авторизацию на реакт/нод через гугл? Я просто только начал это изучать и немного запутался. В какую сторону смотреть?

https://www.npmjs.com/package/react-google-login

Фабрики, адаптеры, декораторы и вся эта дичь

да, всё это можно

https://www.npmjs.com/package/react-google-login

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

https://www.npmjs.com/package/react-google-login

Ну здесь чувак авторизацияю делает черещ гугл, может это поможет https://www.youtube.com/watch?v=XWz7YaI1Px0

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

так это не вопрос реакта... Смотрите в настройках гугла, там наверное где-то в консоли надо настраивать доступы.

Там только домены можно добавлять в качестве допустимых адресов. Или локалхост.

Ну здесь чувак авторизацияю делает черещ гугл, может это поможет https://www.youtube.com/watch?v=XWz7YaI1Px0

То же самое, он указывает локалхост в качестве источника(

Подскажите простую ui библиотеку для сайтов?

Подскажите простую ui библиотеку для сайтов?

Material-ui

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

нельзя потому что. вот здесь есть хорошее объяснение https://stackoverflow.com/q/14238665/#comment98925014_14262443 если нужно для локальной разработки - можно xip.io использовать https://stackoverflow.com/a/40008975

Подскажите что в TS react делает вот это readonly state: State = { count: 0, };

readonly это слово интересует

Почему все равно могу изменить значение count ?

Подскажите что в TS react делает вот это readonly state: State = { count: 0, };

@ts_ru

Почему все равно могу изменить значение count ?

как изменяешь его покажи?

Material-ui

Простую?! Это явно не про материал

Простую?! Это явно не про материал

визуально она простая

что я делаю не так? мне нужна кнопка которая при клике переходит по ссылке, переход нужен только через WebView (не через браузер)

Export default class App... А что так можно было! 😮

Простую?! Это явно не про материал

В использовании простая

Ну там нюансов много, но в принципе да

А какая самая может и не любимая и хреновая, но каноничная либа для работы с формами? Ну типа стейт менеджер - редакс, роутер - реакт-роутер, а формы - ?

есть две либы formik и final-form. Лично мне вторая больше зашла

можно сделать как-нибудь, чтобы createElement при создание каждого компонента втыкал кастомный атрибут с названием самого компонента? или надо патчить сам реакт?

Export default class App... А что так можно было! 😮

я не знаю, 2 недели только изучаю react native

как заставить стайледы работатать с флоу ?

Лучше отказаться от него)

я не знаю, 2 недели только изучаю react native

Ну может в нативе так. С ним не знаком. Я просто сам реакт изучаю 2 недели :D

Вообще-то это не реакт, а ES6 https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/export

Export default class App... А что так можно было! 😮

лучше просто export class App, а потом import { App }, ради автоимпорта и export default антипаттерн

Привет. Подскажите, а вы описываете структуру проекта, способы изменять существующий код и как его мастштабировать?

Для меня превычнее запись class App extends React { } export default App;

Привет. Подскажите, а вы описываете структуру проекта, способы изменять существующий код и как его мастштабировать?

Описываете? Доки?

Описываете? Доки?

Ну вот думаю написать где файлики создавать, откуда экспортить можно, а откуда нельзя и тд. Интересен опыт где и как это делают

Ну может в нативе так. С ним не знаком. Я просто сам реакт изучаю 2 недели :D

собрались тут серезные ребята))

Для меня превычнее запись class App extends React { } export default App;

export default class extends Component

Для меня превычнее запись class App extends React { } export default App;

А как тогда ты автоимпортом пользуешься?

export default class extends Component

Ааа мои глаза

А как тогда ты автоимпортом пользуешься?

Что, простите? Я же написал изучаю реакт только 2 недели.

Что, простите? Я же написал изучаю реакт только 2 недели.

Если будешь экспортировать без default, то в редакторе или ide при написании переменной экспорта в другом файле, выйдет выбор с тремя полосками, при нажатии который он автоматом тебе импортирует и напишет путь. Работает если файл где экспортируется переменная открыт

Ааа мои глаза

Я не говорю что это правильно

Если будешь экспортировать без default, то в редакторе или ide при написании переменной экспорта в другом файле, выйдет выбор с тремя полосками, при нажатии который он автоматом тебе импортирует и напишет путь. Работает если файл где экспортируется переменная открыт

Я не про это. А про то где стоит экспорт. Я привык видит его в конце файла, а на скриншоте он перед классом.

Всем привет, нужен совет. Есть проект, с огромным кол-вом кода, компонентов. Взаимодействие внутри осуществляется по средству Context API, useReducer и тд. Соответсвенно апп обернут в AppContext. Задача стоит максимально "вредные" места в проекте, покрыть тестами. Иду от малого к большому. Средства тестирвания: Jest, Enzyme Есть компонент Field который в тесте не хочет маунтится c помощью shellow метода, а с использованием mount просит быть обернутым в форму, у которой к слову свой контекст. На сейчас вышел из ситуации следующим образом - вынес в хелеперы "обертки" - (Апп контекст, Форму) компонента Field для корректного рендеринга и в тесте дергаю так - const wrapper = mount(getAppContextWrapper(getFormContextWrapper(<Field { ...props } />))); Но когда к примеру нужно проверить корректный сеттинг пропса в тесте, это переходит в некую утопию аля - wrapper.props().children.props.children.props.... и тд. Вопрос. Как правильно мокнуть контекст в такой ситуации, ибо тестируется один компонент а пробираться к нему получается только через дебри. Направьте куда копать, перелопатил кучу инфы, решения не нашел. Буду благодарен за любой совет.

Привет. Что не так с Jest? (React + Redux + TypeScript) Постоянно получаю вот такую ошибку:

Привет. Что не так с Jest? (React + Redux + TypeScript) Постоянно получаю вот такую ошибку:

Бабель подключи на test env

transform-es2015-modules-commonjs, начни с этого плагина

в бабел рс кинь "env": { ... "test": { "plugins": ["transform-es2015-modules-commonjs"] } ... },

Бабель подключи на test env

Спасибо за совет. У меня на test env вот такая конфигурация:

Спасибо за совет. У меня на test env вот такая конфигурация:

Та не за что пока ))