🔗 Ссылки: 🎉 Курсы по React, React Router и Redux: purpleschool.ru/course/react-redux 🎓 Мои курсы по разработке: purpleschool.ru 💬 Telegram канал с полезными советами: t.me/purple_code_channel
Видео в целом полезное) Но по поводу последнего пункта я бы добавил еще, что если isAuthed вычисляется не в самом компоненте, а приходит в пропсах (как в вашем примере), то проще и нагляднее сделать условный рендеринг этого компонента в родителе, и пропс isAuthed нам не понадобится вовсе.
Вот хороший материал! Понятный и полезный не только самым начинающим. До сих пор встречаются люди, что пренебрегают правильной типизацией при написании React-компонентов. Побольше бы таких видео в интернетах. Рекомендую.
Хорошая подборка. Когда только начинал работать с реактом, условные выражения ставил выше хуков и в какой-то момент начали происходить проблемы с отображением компонентов. Антон, подскажите пожалуйста. Какой фреймворк для React лучше подойдет, для реализации PWA, с учетом того, что клиент имеет нестабильное сетевое подключение? Видя, что Next движется в SSR, возник вопрос, будет ли дальнейшая поддержка Page Router. В специфичных задачах, как у меня, не всегда подходит SSR. Иногда необходимо, чтобы приложение локально хранило информацию и потом выполнялась синхронизация.
1 - про пропсы просто крик души, согласен с тобой полностью, ток лучше type вместе interface юзать, ибо мы на большом проекте похавали за счет merging declaration :) 2 - про форвард реф еще один плюс в карму про мутации по моему это база, в каждом утюге это есть) для новичков оч полезное видео, а первые два пункта и мидлам как мантру надо показывать
Антон спасибо за видео. Первый же момент с типизацией помог исправить ошибку в компоненте инпута моего пет проекта. Я как раз сделал свой интерфейс, а оно вон как можно было. И еще вопрос. Может кто подскажет. Как можно лучше использовать Zustand и React-Query. Я новичок. Делаю свой пет-проект учебный. Решил попрактиковать данные технологии. Увидел или услышал уже не помню где, что вроде они хорошо в связке работают. Вот сижу думаю с точки зрения правильности архитектуры или порядка как лучше их вместе использовать. React-Query тут понятно для асинхронных запросов. Вот запросил я к примеру массив тудушки - а дальше их как то в созданный массив store zustanda на хранение отправлять? Так то мы же можем вызвать useQuery в любом месте в приложении. Есть ли какие то рекомендации на этот счет по их совместному использованию? Допустим асинхронные запросы через React-Query, а что тогда на zustand остается?
А есть ли смысл использовать два этих инструмента вместе? React-Query вполне должно хватить для запросов и кеширования данных. Если какие-то общие данные нужно хранить, например, текущую тему, то вполне хватит react context. Еще можно посмотреть в сторону redux-toolkit, там есть rtk-query (аналог react-query), только в совокупности можно будет использовать и как общий стор, и как инструмент для кеширования запросов.
@@PurpleSchool ладно, долго объяснять, хочу спросить, есть ли у тебя курсы повышения квалификации для разрабов уровня middle или же программа менторства, к примеру, если можешь менторить, какой rate за час, к примеру, если удалённо менторить команду разрабов уровня strong junior/middle??
То есть правильно ли я понимаю, что когда делаем кастомные инпут, селект и прочее, то всегда надо типы расширять от базовых типах инпута, селекта и прочее, а указывать руками только те типы, что нужны?
нет, не всегда) порой важно ограничить использование тех или иных свойств элемента. Например, когда вы делаете дизайн-систему на проекте, давать возможность прокинуть все что душе угодно - зло. Смысла тогда в дизайн-системе проекта - нет.
Антон, подскажите пожалуйста: во многих ваших видео, можно заметить что, при работе в IDE VSCode, в тот момент, когда вы печатаете (например вызов метода), у вас появляются всплывающие окна, которые подсказывают: какие параметры принимает этот метод и какого типа данные. Как мне сделать так-же ?
Юзать тайпскрипт. Это работает из коробки, но если ты пишешь на JS, то IDE часто просто не знает, с чем ты работаешь. Допустим, ты объявляешь функцию foo(str) {...} Откуда IDE знать, что аргумент - строка? Для неё это просто любой тип данных. Соответственно, в подсказках методов не будет. Но если написать вот так foo(str = "") {...} то теперь IDE поймет, что это строка и предложит все методы строк в подсказках. Когда ты используешь тайпскрипт, то это вообще применяется для всех аргументов, где указаны типы. В js же только для тех мест, где можно понять, какие типы данных используются: нативные и библиотечные методы.
Мне очень нравится что вы делаете. После ваших роликов иду рефакторить свои проекты всегда. Теперь столкнулся с проблемой и вот интересно было бы узнать как это правильно делать. Вот например таблица обновляет данные по сокету каждые 100мс, а в ячейке есть состояние поп апа. И вот при каждом рендере он сбрасывается.
@@PurpleSchool да можно в redux, но появляется сложность нужно ид ячейки хранить ведь их много может быть а потом сравнивать. А если еще popper позиционировать. Для новичков не особо тривиальная задача.
А можно практики поинтереснее для более опытных?) а то такое чувство, что все одни и те же практики записывают) solid для реакта на практике с реальными компонентами было бы круто посмотреть)
11:13 сначала показал что неправильно работать с состоянием, которе вернул хук и надо пользоваться коллбэком из функции-сеттера, а теперь сам же ссылаешься на замкнутое состояние внутри функции.
было бы полезно как раз показать как работать с коллбэком и объектом состояния, так как у новичков запись рода setState( prevState => ( { ...prevState, count: prevState.count + 1 } ) ) вызывает страх и много вопросов@@PurpleSchool
Можно, но оно может трирегить дополнительный rerender. Подробнее тут: stackoverflow.com/questions/58578570/value-of-using-react-forwardref-vs-custom-ref-prop
useState не понимает что объект изменился - это явно баг, который все воспринимают как фичу)))) вон в mobx меняешь любое поле объекта и react всё понимает, даже если поле вложенного объекта
mobx "прослушивает" объект через Proxy (раньше через декораторы/обёртки над дескрипторами). В реакте такого нет, потому что это сильно будет тормозить работу JS. Да и в целом, можно было бы тогда словить много сайдэффектов, когда объекты прокидываются в другие компоненты и там могут мутироваться. В общем, в реакте как раз сделано все вполне логично.
Это не баг, а концептуальное решение. Можно было сделать так или так, на этапе разработки самого реакт было принято решение использовать иммутабельный подход. И за и против есть свои аргументы, для команды реакта тогда аргументы за перевесили. Ты же не думаешь, всерьез, что команда реакта просто не смогла сделать мутируемый стейт? 😂
Уважаемый Антон, я очень разочарован вашим поведением. Почему используете это противное детище Microsoft вместо православного neovim Видео бомбовое кстати
🔗 Ссылки:
🎉 Курсы по React, React Router и Redux: purpleschool.ru/course/react-redux
🎓 Мои курсы по разработке: purpleschool.ru
💬 Telegram канал с полезными советами:
t.me/purple_code_channel
Спасибо, про расширение интерфейса и затем деструктуризацию пропса в инпут вообще пушка.
@@WinchesterD спасибо
Видео в целом полезное) Но по поводу последнего пункта я бы добавил еще, что если isAuthed вычисляется не в самом компоненте, а приходит в пропсах (как в вашем примере), то проще и нагляднее сделать условный рендеринг этого компонента в родителе, и пропс isAuthed нам не понадобится вовсе.
👍
Вот хороший материал! Понятный и полезный не только самым начинающим. До сих пор встречаются люди, что пренебрегают правильной типизацией при написании React-компонентов. Побольше бы таких видео в интернетах. Рекомендую.
Спасибо!
Ой как этой информации не хватало, когда только начинал. Спасибо за труд.
Пожалуйста 👍
спасибо очень полезно
Пожалуйста!
Хорошая подборка. Когда только начинал работать с реактом, условные выражения ставил выше хуков и в какой-то момент начали происходить проблемы с отображением компонентов.
Антон, подскажите пожалуйста. Какой фреймворк для React лучше подойдет, для реализации PWA, с учетом того, что клиент имеет нестабильное сетевое подключение?
Видя, что Next движется в SSR, возник вопрос, будет ли дальнейшая поддержка Page Router. В специфичных задачах, как у меня, не всегда подходит SSR. Иногда необходимо, чтобы приложение локально хранило информацию и потом выполнялась синхронизация.
Для Next сейчас лучше использовать AppRouter. А для PWA, если не нужен SSR, то можно использовать не обязательно Next
Page router в 13.4 уже всё кажись(
Нет, он будет и дальше поддерживаться.
1 - про пропсы просто крик души, согласен с тобой полностью, ток лучше type вместе interface юзать, ибо мы на большом проекте похавали за счет merging declaration :)
2 - про форвард реф еще один плюс в карму
про мутации по моему это база, в каждом утюге это есть)
для новичков оч полезное видео, а первые два пункта и мидлам как мантру надо показывать
Спасибо) да, type не имеют данного недостатка, но я как заядлый ООПшник любою интерфейсы)
@@PurpleSchoolмне кажется заядлый оопшник не будет интерфейсы смешивать с функциональным подходом. Перфекционист негодует.😂
@@mvttofficial заядлый ООПшник в вебе это бэкендер на спринге)
Спасибо, хорошая инфа.
Пожалуйста!
спасибо
Пожалуйста!
как всегда чётко, спасибо!
Пожалуйста!
брал у тебя немного курсов по докеру и ноде, вроде норм
Спасибо)
Антон спасибо за видео. Первый же момент с типизацией помог исправить ошибку в компоненте инпута моего пет проекта. Я как раз сделал свой интерфейс, а оно вон как можно было.
И еще вопрос. Может кто подскажет. Как можно лучше использовать Zustand и React-Query. Я новичок. Делаю свой пет-проект учебный. Решил попрактиковать данные технологии. Увидел или услышал уже не помню где, что вроде они хорошо в связке работают. Вот сижу думаю с точки зрения правильности архитектуры или порядка как лучше их вместе использовать. React-Query тут понятно для асинхронных запросов. Вот запросил я к примеру массив тудушки - а дальше их как то в созданный массив store zustanda на хранение отправлять? Так то мы же можем вызвать useQuery в любом месте в приложении. Есть ли какие то рекомендации на этот счет по их совместному использованию? Допустим асинхронные запросы через React-Query, а что тогда на zustand остается?
А есть ли смысл использовать два этих инструмента вместе?
React-Query вполне должно хватить для запросов и кеширования данных. Если какие-то общие данные нужно хранить, например, текущую тему, то вполне хватит react context.
Еще можно посмотреть в сторону redux-toolkit, там есть rtk-query (аналог react-query), только в совокупности можно будет использовать и как общий стор, и как инструмент для кеширования запросов.
Чтобы не писать такой дженерик с HtmlAttrs и тд можно использовать другой) ComponentProps )
Да, верно
Антон спасибо за ролик! А как быть, если например форма на 200 полей ввода?
Делать один стейт на все(объект) или на каждый инпут стейт или через рефы?
Использовать либу для работы с формами. Самое эффективное
React-hook-form подойдёт? Получается Стейт не нужен? Всё будет хранится а стейте либы?
да@@АлексейСоколов-у3к
@@АлексейСоколов-у3кда
Я уже не оч новичок, но все равно посмотреть было полезно. 🙏🏻💪🏻
Спасибо!
5:18 это будет работать и без ForwardRef. Не es6 синтаксис(ключевое слово function)
Не очень понял. Что будет работать?
@@PurpleSchool ладно, долго объяснять, хочу спросить, есть ли у тебя курсы повышения квалификации для разрабов уровня middle или же программа менторства, к примеру, если можешь менторить, какой rate за час, к примеру, если удалённо менторить команду разрабов уровня strong junior/middle??
Напишите мне в Telegram @AlariCode, обсудим
То есть правильно ли я понимаю, что когда делаем кастомные инпут, селект и прочее, то всегда надо типы расширять от базовых типах инпута, селекта и прочее, а указывать руками только те типы, что нужны?
да, если расширяете базовый элемент HTML, всегда делаем extends
@@PurpleSchool, понял и спасибо))))
нет, не всегда) порой важно ограничить использование тех или иных свойств элемента. Например, когда вы делаете дизайн-систему на проекте, давать возможность прокинуть все что душе угодно - зло. Смысла тогда в дизайн-системе проекта - нет.
Всё знал, но голос приятный)
Спасибо!
Антон, подскажите пожалуйста: во многих ваших видео, можно заметить что, при работе в IDE VSCode, в тот момент, когда вы печатаете (например вызов метода), у вас появляются всплывающие окна, которые подсказывают: какие параметры принимает этот метод и какого типа данные. Как мне сделать так-же ?
Это все работают и коробки
Юзать тайпскрипт. Это работает из коробки, но если ты пишешь на JS, то IDE часто просто не знает, с чем ты работаешь. Допустим, ты объявляешь функцию
foo(str) {...}
Откуда IDE знать, что аргумент - строка? Для неё это просто любой тип данных. Соответственно, в подсказках методов не будет. Но если написать вот так
foo(str = "") {...}
то теперь IDE поймет, что это строка и предложит все методы строк в подсказках. Когда ты используешь тайпскрипт, то это вообще применяется для всех аргументов, где указаны типы. В js же только для тех мест, где можно понять, какие типы данных используются: нативные и библиотечные методы.
Когда ждать курс на Udemy?
Думаю что не ждать. Все курсы можно купить на моей платформе.
Мне очень нравится что вы делаете. После ваших роликов иду рефакторить свои проекты всегда. Теперь столкнулся с проблемой и вот интересно было бы узнать как это правильно делать. Вот например таблица обновляет данные по сокету каждые 100мс, а в ячейке есть состояние поп апа. И вот при каждом рендере он сбрасывается.
Хранить состояние не в ячейке. Возможно использовать глобальный state
@@PurpleSchool да можно в redux, но появляется сложность нужно ид ячейки хранить ведь их много может быть а потом сравнивать. А если еще popper позиционировать. Для новичков не особо тривиальная задача.
Так как правильно - инпут или инпут?
инпут)
Однозначно инпут.
Если хочешь указать ударение, то это делается так: и́нпут или инпу́т
@@ИмяФамилия-э4ф7в открой окно.
Как-то не хорошо постоянно пересоздавать объект для состояния. Нет более красивого варианта пнуть ререндер?
Можно использовать сторонние библиотеки типы immer
@@PurpleSchool, забавно, кажется будто должен быть какой-то нативный способ😊
@@cdeblogsetState ((state) => {
return {
count: state.count + 1
}
}) ;
А можно практики поинтереснее для более опытных?) а то такое чувство, что все одни и те же практики записывают) solid для реакта на практике с реальными компонентами было бы круто посмотреть)
Хорошо. Сделаю думаю видео про FSD
@@PurpleSchool интересно было бы увидеть FSD вместе с Next. Да, это ролик на час или два, но было бы очень интересно
У Михаила Непомнящего есть хорошие видео с примерами на эту тему
Очень не люблю forwardRef, он очень контринтуитивный, как будто чужеродный и совсем не из реакта
Музыка практически как у Пивоварова в новостной повестке.
11:13
сначала показал что неправильно работать с состоянием, которе вернул хук и надо пользоваться коллбэком из функции-сеттера, а теперь сам же ссылаешься на замкнутое состояние внутри функции.
Да, тут правильнее было был сделать аналогично предыдущем состоянием, но в попыхах записи хотел показать именно работу с объектами
было бы полезно как раз показать как работать с коллбэком и объектом состояния, так как у новичков запись рода setState( prevState => ( { ...prevState, count: prevState.count + 1 } ) ) вызывает страх и много вопросов@@PurpleSchool
Не мог понять почему у тебя ошибка на true и null, а это просто тема оказывается
Да, такая подсветка)
Зачем использовать forwarRef, если можно просто прокинуть ref пропсом?
Можно, но оно может трирегить дополнительный rerender. Подробнее тут: stackoverflow.com/questions/58578570/value-of-using-react-forwardref-vs-custom-ref-prop
так пропсы только для чтения
в доках пишут так не делать т.к. ref предопределенная переменная реакта именно поэтому нужен метод forwardRef().
Можно прокинуть другим кастомным props, но это тоже не очень
useState не понимает что объект изменился - это явно баг, который все воспринимают как фичу))))
вон в mobx меняешь любое поле объекта и react всё понимает, даже если поле вложенного объекта
Это не баг, а работа JS. Mobx это делает за счёт дополнительных механизмов под капотом.
mobx "прослушивает" объект через Proxy (раньше через декораторы/обёртки над дескрипторами). В реакте такого нет, потому что это сильно будет тормозить работу JS. Да и в целом, можно было бы тогда словить много сайдэффектов, когда объекты прокидываются в другие компоненты и там могут мутироваться. В общем, в реакте как раз сделано все вполне логично.
Это не баг, а концептуальное решение. Можно было сделать так или так, на этапе разработки самого реакт было принято решение использовать иммутабельный подход. И за и против есть свои аргументы, для команды реакта тогда аргументы за перевесили. Ты же не думаешь, всерьез, что команда реакта просто не смогла сделать мутируемый стейт? 😂
Не надо делать такие заголовки. Бесят же
Зато CTR хороший)
Поработав с реактом два года, я определённо могу сделать вывод, что начинать работать с ним уже и было самой ошибкой ;)
Очень критично) Я 4 года работал с Angular, год со Svelte, но React люблю)
За 2 года не осилить реакт это мощно
На проде Vue не использовал
Разве есть какие то аналоги? В чем именно для вас было сложно?
Какой же все-таки реакт убогий в плане шаблонов, во вью они намного более читабельнее получаются.
Всё зависит от привычки)
А ангуляр ещё лучше)
Смотря для чего)
@@PurpleSchool для коммерческой разработки) А петы можно и на ванильном js писать)
Я 4 года писал на Angular и скажу что для CRM и прочих вещей да, а вот для SSR сайтов и прочего - не самое оптимальное решение
Реакт ужасен своей кашей. Плюс ирония в том, что реакт не реактивен.
А что тогда рекомендуете взамен? Vue думаете лучше ? Может дело не в самом реакт?
@@radikovichkz2470он наверное, как большинство людей жалуются, а сами технологию освоили на минимальный уровень и ничего нормального сделать не могут
Каша у тебя в голове. Реакт всего лишь библиотека. Все остальное пожалуйста сам.
@@arturseu ну он просто не понимает, что такое React
@@arturseu у тебя каша в голове
Уважаемый Антон, я очень разочарован вашим поведением. Почему используете это противное детище Microsoft вместо православного neovim
Видео бомбовое кстати
Уважаемый @w1png_alt, VSCode вполне достоин того, чтобы его демонстрировать в целях обучения.
Neovim на месте)
Какой мерзкий реакт после Свелта, смотрю и тошнит
Кому что нравится)
Он ужасен и после Vue, и после angular
@@PurpleSchoolне обращайте внимание на html программистов
Не вижу проблемы, пиши на свелте 🤷🏿♂️