лол

в остальном вникать и вправду не хочется, связка eslint и prettier явно будет нелишней

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

да, это я уже поняла лол)) вопрос, как правильно переделать с колбэком (там кстати можно вместо колбэка трушный обьект)

А вот можно и стоит ли пройти по всему дереву компонент в реакте и добавить всем у которых есть didCatch логер? Что то вроде if (component.didCatch) component.didCatch = ()=>{component.didCatch(arguments); Logger && Loogger.report(arguments)}; ? И в частности — как лучше перебрать все компоненты в таком случае?

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

А вот можно и стоит ли пройти по всему дереву компонент в реакте и добавить всем у которых есть didCatch логер? Что то вроде if (component.didCatch) component.didCatch = ()=>{component.didCatch(arguments); Logger && Loogger.report(arguments)}; ? И в частности — как лучше перебрать все компоненты в таком случае?

Эм, что мешает добавить ErrorBoundary ? Будет <ErrorBoundary><App/></ErrorBoundary>

https://medium.com/@sgroff04/2-minutes-to-learn-react-16s-componentdidcatch-lifecycle-method-d1a69a1f753

да, это я уже поняла лол)) вопрос, как правильно переделать с колбэком (там кстати можно вместо колбэка трушный обьект)

если бы и вправду поняла, то не спрашивала бы. const match = new RegExp(excapeRegExp(this.state.value, 'i')); const value = event.target.value.substr(0,20); const foundedPlaces = this.state.foundedPlaces.filter(place=>match.text(place.name)).sort(sortBy('name')); this.setState({ value, foundedPlaces }, () => { this.props.getPlaces(this.state.foundedPlaces); });

если бы и вправду поняла, то не спрашивала бы. const match = new RegExp(excapeRegExp(this.state.value, 'i')); const value = event.target.value.substr(0,20); const foundedPlaces = this.state.foundedPlaces.filter(place=>match.text(place.name)).sort(sortBy('name')); this.setState({ value, foundedPlaces }, () => { this.props.getPlaces(this.state.foundedPlaces); });

плиз, го гист

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

Компонент мужского рода

плиз, го гист

ага. но я всё.

Эм, что мешает добавить ErrorBoundary ? Будет <ErrorBoundary><App/></ErrorBoundary>

В компонентах прописаны didCatch, что бы в случае сбоя не рендерился конкретный компонент а не всё До ErrorBouondary же так ошибка не поднимется, верно?

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

в остальном вникать и вправду не хочется, связка eslint и prettier явно будет нелишней

thx

В компонентах прописаны didCatch, что бы в случае сбоя не рендерился конкретный компонент а не всё До ErrorBouondary же так ошибка не поднимется, верно?

а, вот чо ты хочешь

ты можешь хок написать

ты можешь хок написать

М … могу, а зачем? Что именно он должен делать? И обернуть каждый компонент в хок это так же грустно, как пихать логер в каждый дидкач

И кстати foundedPlaces неверно, foundPlaces тогда уж

М … могу, а зачем? Что именно он должен делать? И обернуть каждый компонент в хок это так же грустно, как пихать логер в каждый дидкач

хок лучше т.к он один. Будет возвращать компонент с текстом ошибки

хок лучше т.к он один. Будет возвращать компонент с текстом ошибки

Можно подробнее? Я кажется не понимаю что должен делать хок.

Ага, убрать дидкач, добавить хок вместо него на базе эррор баундари, в нем логировать.

Ага, убрать дидкач, добавить хок вместо него на базе эррор баундари, в нем логировать.

didCatch у тебя будет в хоке

ну да.

Спасибо, это интересная мысль.

Я до неё недодумался

?

сколько видел тс + реакт, аж плакать хочется 50% кода лапша от типизации, которая мешает понимать сам код

Просто не все научились писать типы. Пишешь нормально, лапши не будет.

Просто не все научились писать типы. Пишешь нормально, лапши не будет.

вот если бы IDE умели скрывать всю эту типизацию....

Просто не все научились писать типы. Пишешь нормально, лапши не будет.

Как нормально?

Приходи к нам в контору, у нас нормально.

https://twitter.com/acdlite/status/1007062696141787136

Круть

https://twitter.com/acdlite/status/1007062696141787136

что-то в этом есть

Явно лучше чем это import FinancePageLoader from 'bundle-loader?name=FinancePage&lazy!../../Pages/FinancePage'; export const FinancePage = props => ( <Bundle load={FinancePageLoader}>{Finance => <Finance {...props} />}</Bundle> );

у нас вот такое давно юзается https://github.com/jasonslyvia/react-lazyload

у нас вот такое давно юзается https://github.com/jasonslyvia/react-lazyload

Оно умеет грузить компоненты не при рендере, а при простое network?

у нас вот такое давно юзается https://github.com/jasonslyvia/react-lazyload

https://github.com/jamiebuilds/react-loadable Это лучше

https://github.com/jamiebuilds/react-loadable Это лучше

Нет нет нет

Оно умеет грузить компоненты не при рендере, а при простое network?

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

Нет нет нет

?

?

https://t.me/react_js/427592

понятно

тогда лучше через import() ?

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

Коллеги Ктото использовал реакт финал форм. Как подключить инпут с загрухкой файла?

Коллеги Ктото использовал реакт финал форм. Как подключить инпут с загрухкой файла?

адаптер написать

адаптер написать

Какой адаптер?

Что за адаптер?

?

Прекрасное обяснение спасибо коллега.

Какой адаптер?

компонент, который прицепит твой input к final-form. И почему то я уверен что в оф доке есть примеры

компонент, который прицепит твой input к final-form. И почему то я уверен что в оф доке есть примеры

есть примеры, кто-то доку не читает

компонент, который прицепит твой input к final-form. И почему то я уверен что в оф доке есть примеры

Тоесть просто так инпут к нему не прикрипить с файликом ясно

Тоесть просто так инпут к нему не прикрипить с файликом ясно

прикрепить

это просто

кинь пример с самым обычным инпутом

ERROR: S client not available

кинь пример с самым обычным инпутом

Открой доку

кинь пример с самым обычным инпутом

оф дока final-form

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

Дак принцип то тот же самый

просто посмотри как в js обрабатывать input c type="file"

оберни это в компонент - прокинь ему пропсы от final-form

Да так и было. ({ input }) => ( <label htmlFor="contained-button-file"> <input {...input} accept="image/*" type="file" onChange={file => { input.onChange(file) }}

Странная фигня реакт =)

Странная фигня реакт =)

??

Да так и было. ({ input }) => ( <label htmlFor="contained-button-file"> <input {...input} accept="image/*" type="file" onChange={file => { input.onChange(file) }}

и чем это не устроило?

и чем это не устроило?

анонимной функцией в рендре

анонимной функцией в рендре

это один из патернов в реакте. Посмотри доку и почитай про render prop

Перечитаю ещё раз

https://reactjs.org/docs достаточно не плохой

главное пробовать руками

?

Подскажите пожалуйста, есть ли какие либо статьи или бэст практики по созданию и использованию тем в стэке react webpack, возможно с less или просто с css

кинь пример с самым обычным инпутом

https://maxfarseer.gitbooks.io/react-course-ru-v2/content/rabota-s-formoi.html

https://maxfarseer.gitbooks.io/react-course-ru-v2/content/rabota-s-formoi.html

handleNameChange = (e) => { обработчик, в котором обновляем name this.setState({ name: e.currentTarget.value }) } handleTextChange = (e) => { обработчик, в котором обновляем text this.setState({ text: e.currentTarget.value }) }

Чё рили?

Чё рили?

а “че”? не нравится отсутствие [fieldName] ?

а “че”? не нравится отсутствие [fieldName] ?

Да не, так даж веселее

Да не, так даж веселее

ну дальше по учебнику есть, если что. Вычисляемое имя поля одна из самых больных тем.

Как правильно написать? const Arrow = styled.div` &:after { background: ${<Icons.ArrowCursor />} } ` Так не работает (

Как правильно написать? const Arrow = styled.div` &:after { background: ${<Icons.ArrowCursor />} } ` Так не работает (

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

Подскажите пожалуйста, есть ли какие либо статьи или бэст практики по созданию и использованию тем в стэке react webpack, возможно с less или просто с css

темы c css боль

Добрый день. Друзья. Нужна помощь. Никак не могу понять. JSX это что? В javascript нет синтаксиса: const element = <h1>Hello, {name}</h1>; как javascript понимает что данный код это JSX по идее ошибка должна быть const element = <h1>Hello, {name}</h1>; VM317:1 Uncaught SyntaxError: Unexpected token <