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

в prevState

в prevState

о, дааа, чет не подумал.. пасиб

вот именно вдруг с сервером что-то и ничего не удалиться а 200 по ошибке вернулось)

ты еще скажи "вдруг сервер вернул список, и лиш после обработал запрс с ответом статус 200"!!!

Друзья, протестируйте мое приложение. Рад конструтивной критике. android - https://play.google.com/store/apps/details?id=com.edison.MisterMario ios - https://itunes.apple.com/ru/app/мистер-марио/id1334827091?l=ru&ls=1&mt=8

react native исполозую

Доброе утро, парни. Для перевода react-i18next - стандарт?

Доброе утро, парни. Для перевода react-i18next - стандарт?

есть еще react-intl

Доброе утро, парни. Для перевода react-i18next - стандарт?

Стандарта нет

Хорошо, а что порекомендуете?

react-intl

Хорошо, а что порекомендуете?

я юзаю react-intl

еще есть react-intl-universal

А в чём разница между последними двумя?

А в чём разница между последними двумя?

в api)

Ну а в чём плюсы юниверсала? Его же не просто так сделали? ?

Ну а в чём плюсы юниверсала? Его же не просто так сделали? ?

я не пробовал, так что не скажу

Приятного дня. Подскажите, пожалуйста, что смотреть. есть элемент LINK c пропсами https://pasteboard.co/HsIaW1d.png при клике генерируется экшен https://pasteboard.co/HsIba6p.png урл меняется страница — нет при повторном клике / -> /32342/ -> /32342/32342/ -> … блок который должен меняться с withRoute, раньше работало, не могу понять где нахреначил

withRoute всмысле import { withRouter } from 'react-router-dom';

Если просто ввести в строку url то нужный роут открывается

роуты в принципе перестали работать

роуты в принципе перестали работать

Сделай репродьюс

Все, нашел

Лучше убери jq, меньше зависимостей - лучше

внутри ConnectedRouter поставил обертки контекста

@js_ru

похоже надо что бы коспонент в котором роуты был непостредственным потомком роутера

https://vc.ru/41174-kak-zapustit-shkolu-programmirovaniya-za-poltora-mesyaca-itogi-pervogo-zaezda-v-hutorium >В общем, оказалось возможным за шесть дней освоить верстку до уровня создания сложных страниц и использования CSS-фреймворков, интерактива на чистом JavaScript, повторение того же интерактива на ООП, а затем — на React, основы сервер-сайда на чистом Node и создание динамических веб-страниц на EJS. Челик жоский

export default function SmartMenuList(props) { const {items, ...p} = props; return ( <ul {...p} className="main_menu-list"> {items.map((item) => <NavMenuItem item={item} key={item._id}/>)} </ul> ) }

почему в NavMenuItem рендеры не происходят?

странно, но рендерится только при старте приложения

в сам SmartMenuList приходят разные данные, но NavMenuItem рендер не дергает

в сам SmartMenuList приходят разные данные, но NavMenuItem рендер не дергает

scu в нём не прописан?

неа

покажи еще menu item (всем привет)

там говнокод чужой

но щас скину

https://pastebin.com/hig9zE9V

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

а там не надо return в map поставить?

там он есть

Как определять какие ноды в доме обновились при обновлении стейта а какие нет? чтобы вешать что-то наподобие анимации

а там не надо return в map поставить?

нет

Как определять какие ноды в доме обновились при обновлении стейта а какие нет? чтобы вешать что-то наподобие анимации

https://reactjs.org/docs/react-component.html#componentdidupdate ?

кто нибуть сталкиволся со многими vulnerabilities от node-sass? последней версии? https://jmp.sh/l01MiKW

Всем доброе утро. Ребята, может кто кинуть пример логин формы через Axios на Реакте или мб с проекта разшарить код ? Первый раз пытаюсь прикрутить логин форму с рабочим бекендом, ни как вкурить не могу. А в иннете подходящего не нашел материала.

Всем доброе утро. Ребята, может кто кинуть пример логин формы через Axios на Реакте или мб с проекта разшарить код ? Первый раз пытаюсь прикрутить логин форму с рабочим бекендом, ни как вкурить не могу. А в иннете подходящего не нашел материала.

что для форм используешь?

Хлопцы, нужно написать stateless datepicker компонент В виде карусели [<][29][30][31][_1_][2][>] _1_ - активный день, все до него - не кликабельны При клике меняется активный день Можете подсказать, как мне это сделать? Хотя-бы в плане дней к месяцам, пушо я что-то туплю

что для форм используешь?

В плане? Та в целом ничего обычно. Клик на кнопку, вылетает компонент(как ПапАп). Обычная форма с 2 инпутами и кнопкой. Ничего не накручивал.

В плане? Та в целом ничего обычно. Клик на кнопку, вылетает компонент(как ПапАп). Обычная форма с 2 инпутами и кнопкой. Ничего не накручивал.

Нативно с формами работаешь? Значения полей в стейте держишь?

Нативно с формами работаешь? Значения полей в стейте держишь?

да

Наверное буду считать такие сообщения флудом

+

да

Бекенд json принимает?

Бекенд json принимает?

угу, есть урла и передаем объект стринги логин и пароль

угу, есть урла и передаем объект стринги логин и пароль

тогда axios.post(authUrl, {auth: {username, password}})

https://github.com/axios/axios#request-config

в случае с хот релоадом это лишний геморой, а не настройка

Опять hmr с hr перепутали

auth это для Basic Auth

Опять hmr с hr перепутали

Перепутать hmr с эйчарами эт сильно

Перепутать hmr с эйчарами эт сильно

Умно ?

Подскажите пожалуйста. С новым api для ref https://reactjs.org/docs/refs-and-the-dom.html как переписать штуку вроде такой? Когда содержимое ref условно https://gist.github.com/SilentImp/aefbf92c8bbfb092bff6449a3ada7acf

Перепутать hmr с эйчарами эт сильно

hr = hot reload

hmr = hot module replacement

Горячая замена галлеры ?

ERROR: S client not available

Горячая замена галлеры ?

алиекспресс: "вы приняты"

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

1. ставишь брикпоинт 2. запускаешь код 3. дебажишь

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

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

проще в ide дебажить сразу

проще в ide дебажить сразу

хз, у меня через жопу как-то завелось

в хроме проще получилось

хз, у меня через жопу как-то завелось

сурсмэпы настроены?

Без них все плохо будет, да. Бряки едут сильно или не ставятся вовсе

в сам SmartMenuList приходят разные данные, но NavMenuItem рендер не дергает

я сдаюсь. Ничего не вижно необычного. По моему опыту это с высокой вероятностью какая-то опечатка или подобная ошибка. Может с данными что-то не то, которые приходят или которые в сторе. Надо делать то, что ты делаешь, дебажить )

сурсмэпы настроены?

конечно

я сдаюсь. Ничего не вижно необычного. По моему опыту это с высокой вероятностью какая-то опечатка или подобная ошибка. Может с данными что-то не то, которые приходят или которые в сторе. Надо делать то, что ты делаешь, дебажить )

@ethorz но return я бы поставил. У меня в проекте без него не работает именно так, как у тебя)

с return тоже не работает

а этот map вообще выполняется?

да

что думаете от таком стиле написания? import React from 'react' import FirstExternalComponent from './components/FirstExternalComponent' import SecondExternalComponent from './components/SecondExternalComponent' import NoNeedStylesExternalComponent from './components/NoNeedStylesExternalComponent' // class or function const Bla = ({ className, myProp, myAnotherProp }) => ( <div className={className}> <FirstExternalComponent myProp className={`${className}__first-external-component`} /> <span className={`${className}__delimiter`} /> <SecondExternalComponent myAnotherProp className={`${className}__second-external-component`} /> <NoNeedStylesExternalComponent /> </div> ) export default styled(Bla)` // main component style margin: 0 auto; // inner components styling &__first-external-component { padding: 1em; } &__second-external-component { color: ${props => props.theme.primary}; } &__delimiter { margin: 1em; } `

в телеграме все выглядит как говно

что думаете от таком стиле написания? import React from 'react' import FirstExternalComponent from './components/FirstExternalComponent' import SecondExternalComponent from './components/SecondExternalComponent' import NoNeedStylesExternalComponent from './components/NoNeedStylesExternalComponent' // class or function const Bla = ({ className, myProp, myAnotherProp }) => ( <div className={className}> <FirstExternalComponent myProp className={`${className}__first-external-component`} /> <span className={`${className}__delimiter`} /> <SecondExternalComponent myAnotherProp className={`${className}__second-external-component`} /> <NoNeedStylesExternalComponent /> </div> ) export default styled(Bla)` // main component style margin: 0 auto; // inner components styling &__first-external-component { padding: 1em; } &__second-external-component { color: ${props => props.theme.primary}; } &__delimiter { margin: 1em; } `

во-первых гист во-вторых не очень

что думаете от таком стиле написания? import React from 'react' import FirstExternalComponent from './components/FirstExternalComponent' import SecondExternalComponent from './components/SecondExternalComponent' import NoNeedStylesExternalComponent from './components/NoNeedStylesExternalComponent' // class or function const Bla = ({ className, myProp, myAnotherProp }) => ( <div className={className}> <FirstExternalComponent myProp className={`${className}__first-external-component`} /> <span className={`${className}__delimiter`} /> <SecondExternalComponent myAnotherProp className={`${className}__second-external-component`} /> <NoNeedStylesExternalComponent /> </div> ) export default styled(Bla)` // main component style margin: 0 auto; // inner components styling &__first-external-component { padding: 1em; } &__second-external-component { color: ${props => props.theme.primary}; } &__delimiter { margin: 1em; } `

У тебя есть пропсы, зачем тебе классы

что думаете от таком стиле написания? import React from 'react' import FirstExternalComponent from './components/FirstExternalComponent' import SecondExternalComponent from './components/SecondExternalComponent' import NoNeedStylesExternalComponent from './components/NoNeedStylesExternalComponent' // class or function const Bla = ({ className, myProp, myAnotherProp }) => ( <div className={className}> <FirstExternalComponent myProp className={`${className}__first-external-component`} /> <span className={`${className}__delimiter`} /> <SecondExternalComponent myAnotherProp className={`${className}__second-external-component`} /> <NoNeedStylesExternalComponent /> </div> ) export default styled(Bla)` // main component style margin: 0 auto; // inner components styling &__first-external-component { padding: 1em; } &__second-external-component { color: ${props => props.theme.primary}; } &__delimiter { margin: 1em; } `

styled bem?

а даже в map консоль лог сделал, он проходит, но child render'а нет

мистика

Б*М

угу

что думаете от таком стиле написания? import React from 'react' import FirstExternalComponent from './components/FirstExternalComponent' import SecondExternalComponent from './components/SecondExternalComponent' import NoNeedStylesExternalComponent from './components/NoNeedStylesExternalComponent' // class or function const Bla = ({ className, myProp, myAnotherProp }) => ( <div className={className}> <FirstExternalComponent myProp className={`${className}__first-external-component`} /> <span className={`${className}__delimiter`} /> <SecondExternalComponent myAnotherProp className={`${className}__second-external-component`} /> <NoNeedStylesExternalComponent /> </div> ) export default styled(Bla)` // main component style margin: 0 auto; // inner components styling &__first-external-component { padding: 1em; } &__second-external-component { color: ${props => props.theme.primary}; } &__delimiter { margin: 1em; } `

говно редкостное, каскад не нужен как и класснеймы

тут можно без бэма сделать

а даже в map консоль лог сделал, он проходит, но child render'а нет

а покажи код со всеми логами и ретурном

{items.map((item) => { console.log('render'); return <NavMenuItem item={item} key={item._id}/> })}

в родителе

что думаете от таком стиле написания? import React from 'react' import FirstExternalComponent from './components/FirstExternalComponent' import SecondExternalComponent from './components/SecondExternalComponent' import NoNeedStylesExternalComponent from './components/NoNeedStylesExternalComponent' // class or function const Bla = ({ className, myProp, myAnotherProp }) => ( <div className={className}> <FirstExternalComponent myProp className={`${className}__first-external-component`} /> <span className={`${className}__delimiter`} /> <SecondExternalComponent myAnotherProp className={`${className}__second-external-component`} /> <NoNeedStylesExternalComponent /> </div> ) export default styled(Bla)` // main component style margin: 0 auto; // inner components styling &__first-external-component { padding: 1em; } &__second-external-component { color: ${props => props.theme.primary}; } &__delimiter { margin: 1em; } `

да и амперсанд оператор работает не так как в sass

Ухты https://github.com/ory/editor