Не делайте так в React!

  Рет қаралды 14,169

PurpleSchool | Anton Larichev

PurpleSchool | Anton Larichev

Күн бұрын

Пікірлер: 116
@PurpleSchool
@PurpleSchool Жыл бұрын
🔗 Ссылки: 🎉 Курсы по React, React Router и Redux: purpleschool.ru/course/react-redux 🎓 Мои курсы по разработке: purpleschool.ru 💬 Telegram канал с полезными советами: t.me/purple_code_channel
@WinchesterD
@WinchesterD 2 ай бұрын
Спасибо, про расширение интерфейса и затем деструктуризацию пропса в инпут вообще пушка.
@PurpleSchool
@PurpleSchool 2 ай бұрын
@@WinchesterD спасибо
@АлександрКасатов
@АлександрКасатов Жыл бұрын
Видео в целом полезное) Но по поводу последнего пункта я бы добавил еще, что если isAuthed вычисляется не в самом компоненте, а приходит в пропсах (как в вашем примере), то проще и нагляднее сделать условный рендеринг этого компонента в родителе, и пропс isAuthed нам не понадобится вовсе.
@PurpleSchool
@PurpleSchool Жыл бұрын
👍
@alexeybakushev1932
@alexeybakushev1932 Жыл бұрын
Вот хороший материал! Понятный и полезный не только самым начинающим. До сих пор встречаются люди, что пренебрегают правильной типизацией при написании React-компонентов. Побольше бы таких видео в интернетах. Рекомендую.
@PurpleSchool
@PurpleSchool Жыл бұрын
Спасибо!
@WorldCount
@WorldCount Жыл бұрын
Ой как этой информации не хватало, когда только начинал. Спасибо за труд.
@PurpleSchool
@PurpleSchool Жыл бұрын
Пожалуйста 👍
@snatvb
@snatvb Жыл бұрын
1 - про пропсы просто крик души, согласен с тобой полностью, ток лучше type вместе interface юзать, ибо мы на большом проекте похавали за счет merging declaration :) 2 - про форвард реф еще один плюс в карму про мутации по моему это база, в каждом утюге это есть) для новичков оч полезное видео, а первые два пункта и мидлам как мантру надо показывать
@PurpleSchool
@PurpleSchool Жыл бұрын
Спасибо) да, type не имеют данного недостатка, но я как заядлый ООПшник любою интерфейсы)
@mvttofficial
@mvttofficial Жыл бұрын
​@@PurpleSchoolмне кажется заядлый оопшник не будет интерфейсы смешивать с функциональным подходом. Перфекционист негодует.😂
@mikokz2329
@mikokz2329 Жыл бұрын
​@@mvttofficial заядлый ООПшник в вебе это бэкендер на спринге)
@LRXAORLOV
@LRXAORLOV Жыл бұрын
Чтобы не писать такой дженерик с HtmlAttrs и тд можно использовать другой) ComponentProps )
@PurpleSchool
@PurpleSchool Жыл бұрын
Да, верно
@engelknight2059
@engelknight2059 Жыл бұрын
спасибо очень полезно
@PurpleSchool
@PurpleSchool Жыл бұрын
Пожалуйста!
@DonExCode
@DonExCode Жыл бұрын
Хорошая подборка. Когда только начинал работать с реактом, условные выражения ставил выше хуков и в какой-то момент начали происходить проблемы с отображением компонентов. Антон, подскажите пожалуйста. Какой фреймворк для React лучше подойдет, для реализации PWA, с учетом того, что клиент имеет нестабильное сетевое подключение? Видя, что Next движется в SSR, возник вопрос, будет ли дальнейшая поддержка Page Router. В специфичных задачах, как у меня, не всегда подходит SSR. Иногда необходимо, чтобы приложение локально хранило информацию и потом выполнялась синхронизация.
@PurpleSchool
@PurpleSchool Жыл бұрын
Для Next сейчас лучше использовать AppRouter. А для PWA, если не нужен SSR, то можно использовать не обязательно Next
@aboba86468
@aboba86468 Жыл бұрын
Page router в 13.4 уже всё кажись(
@PurpleSchool
@PurpleSchool Жыл бұрын
Нет, он будет и дальше поддерживаться.
@TheLazarev88
@TheLazarev88 Жыл бұрын
Мне очень нравится что вы делаете. После ваших роликов иду рефакторить свои проекты всегда. Теперь столкнулся с проблемой и вот интересно было бы узнать как это правильно делать. Вот например таблица обновляет данные по сокету каждые 100мс, а в ячейке есть состояние поп апа. И вот при каждом рендере он сбрасывается.
@PurpleSchool
@PurpleSchool Жыл бұрын
Хранить состояние не в ячейке. Возможно использовать глобальный state
@TheLazarev88
@TheLazarev88 Жыл бұрын
@@PurpleSchool да можно в redux, но появляется сложность нужно ид ячейки хранить ведь их много может быть а потом сравнивать. А если еще popper позиционировать. Для новичков не особо тривиальная задача.
@xxcrypt234
@xxcrypt234 Жыл бұрын
брал у тебя немного курсов по докеру и ноде, вроде норм
@PurpleSchool
@PurpleSchool Жыл бұрын
Спасибо)
@mr_adw
@mr_adw Жыл бұрын
Спасибо, хорошая инфа.
@PurpleSchool
@PurpleSchool Жыл бұрын
Пожалуйста!
@dripfeeder666
@dripfeeder666 Жыл бұрын
спасибо
@PurpleSchool
@PurpleSchool Жыл бұрын
Пожалуйста!
@truedivan
@truedivan Жыл бұрын
как всегда чётко, спасибо!
@PurpleSchool
@PurpleSchool Жыл бұрын
Пожалуйста!
@romanryaboshtan9270
@romanryaboshtan9270 Жыл бұрын
5:18 это будет работать и без ForwardRef. Не es6 синтаксис(ключевое слово function)
@PurpleSchool
@PurpleSchool Жыл бұрын
Не очень понял. Что будет работать?
@romanryaboshtan9270
@romanryaboshtan9270 Жыл бұрын
@@PurpleSchool ладно, долго объяснять, хочу спросить, есть ли у тебя курсы повышения квалификации для разрабов уровня middle или же программа менторства, к примеру, если можешь менторить, какой rate за час, к примеру, если удалённо менторить команду разрабов уровня strong junior/middle??
@PurpleSchool
@PurpleSchool Жыл бұрын
Напишите мне в Telegram @AlariCode, обсудим
@TheMrDrell
@TheMrDrell Жыл бұрын
Антон спасибо за видео. Первый же момент с типизацией помог исправить ошибку в компоненте инпута моего пет проекта. Я как раз сделал свой интерфейс, а оно вон как можно было. И еще вопрос. Может кто подскажет. Как можно лучше использовать Zustand и React-Query. Я новичок. Делаю свой пет-проект учебный. Решил попрактиковать данные технологии. Увидел или услышал уже не помню где, что вроде они хорошо в связке работают. Вот сижу думаю с точки зрения правильности архитектуры или порядка как лучше их вместе использовать. React-Query тут понятно для асинхронных запросов. Вот запросил я к примеру массив тудушки - а дальше их как то в созданный массив store zustanda на хранение отправлять? Так то мы же можем вызвать useQuery в любом месте в приложении. Есть ли какие то рекомендации на этот счет по их совместному использованию? Допустим асинхронные запросы через React-Query, а что тогда на zustand остается?
@ruslan_mart
@ruslan_mart Жыл бұрын
А есть ли смысл использовать два этих инструмента вместе? React-Query вполне должно хватить для запросов и кеширования данных. Если какие-то общие данные нужно хранить, например, текущую тему, то вполне хватит react context. Еще можно посмотреть в сторону redux-toolkit, там есть rtk-query (аналог react-query), только в совокупности можно будет использовать и как общий стор, и как инструмент для кеширования запросов.
@АлексейСоколов-у3к
@АлексейСоколов-у3к Жыл бұрын
Антон спасибо за ролик! А как быть, если например форма на 200 полей ввода? Делать один стейт на все(объект) или на каждый инпут стейт или через рефы?
@PurpleSchool
@PurpleSchool Жыл бұрын
Использовать либу для работы с формами. Самое эффективное
@АлексейСоколов-у3к
@АлексейСоколов-у3к Жыл бұрын
React-hook-form подойдёт? Получается Стейт не нужен? Всё будет хранится а стейте либы?
@unknown-im8kj
@unknown-im8kj Жыл бұрын
да@@АлексейСоколов-у3к
@DmitriyDev
@DmitriyDev Жыл бұрын
​@@АлексейСоколов-у3кда
@ivanminyaev3383
@ivanminyaev3383 Жыл бұрын
Антон, подскажите пожалуйста: во многих ваших видео, можно заметить что, при работе в IDE VSCode, в тот момент, когда вы печатаете (например вызов метода), у вас появляются всплывающие окна, которые подсказывают: какие параметры принимает этот метод и какого типа данные. Как мне сделать так-же ?
@PurpleSchool
@PurpleSchool Жыл бұрын
Это все работают и коробки
@ИмяФамилия-э4ф7в
@ИмяФамилия-э4ф7в Жыл бұрын
Юзать тайпскрипт. Это работает из коробки, но если ты пишешь на JS, то IDE часто просто не знает, с чем ты работаешь. Допустим, ты объявляешь функцию foo(str) {...} Откуда IDE знать, что аргумент - строка? Для неё это просто любой тип данных. Соответственно, в подсказках методов не будет. Но если написать вот так foo(str = "") {...} то теперь IDE поймет, что это строка и предложит все методы строк в подсказках. Когда ты используешь тайпскрипт, то это вообще применяется для всех аргументов, где указаны типы. В js же только для тех мест, где можно понять, какие типы данных используются: нативные и библиотечные методы.
@STELLS541
@STELLS541 Жыл бұрын
То есть правильно ли я понимаю, что когда делаем кастомные инпут, селект и прочее, то всегда надо типы расширять от базовых типах инпута, селекта и прочее, а указывать руками только те типы, что нужны?
@PurpleSchool
@PurpleSchool Жыл бұрын
да, если расширяете базовый элемент HTML, всегда делаем extends
@STELLS541
@STELLS541 Жыл бұрын
@@PurpleSchool, понял и спасибо))))
@SYVlive
@SYVlive Жыл бұрын
нет, не всегда) порой важно ограничить использование тех или иных свойств элемента. Например, когда вы делаете дизайн-систему на проекте, давать возможность прокинуть все что душе угодно - зло. Смысла тогда в дизайн-системе проекта - нет.
@STELLS541
@STELLS541 Жыл бұрын
Я уже не оч новичок, но все равно посмотреть было полезно. 🙏🏻💪🏻
@PurpleSchool
@PurpleSchool Жыл бұрын
Спасибо!
@АндрейАнищенко-п7и
@АндрейАнищенко-п7и Жыл бұрын
Всё знал, но голос приятный)
@PurpleSchool
@PurpleSchool Жыл бұрын
Спасибо!
@brechkoio
@brechkoio Жыл бұрын
Когда ждать курс на Udemy?
@PurpleSchool
@PurpleSchool Жыл бұрын
Думаю что не ждать. Все курсы можно купить на моей платформе.
@plan-4D
@plan-4D Жыл бұрын
Так как правильно - инпут или инпут?
@PurpleSchool
@PurpleSchool Жыл бұрын
инпут)
@ИмяФамилия-э4ф7в
@ИмяФамилия-э4ф7в Жыл бұрын
Однозначно инпут. Если хочешь указать ударение, то это делается так: и́нпут или инпу́т
@plan-4D
@plan-4D Жыл бұрын
@@ИмяФамилия-э4ф7в открой окно.
@cdeblog
@cdeblog Жыл бұрын
Как-то не хорошо постоянно пересоздавать объект для состояния. Нет более красивого варианта пнуть ререндер?
@PurpleSchool
@PurpleSchool Жыл бұрын
Можно использовать сторонние библиотеки типы immer
@cdeblog
@cdeblog Жыл бұрын
​@@PurpleSchool, забавно, кажется будто должен быть какой-то нативный способ😊
@НиколайВладимирович-к5ф
@НиколайВладимирович-к5ф Жыл бұрын
@@cdeblogsetState ((state) => { return { count: state.count + 1 } }) ;
@kimanowka
@kimanowka Жыл бұрын
А можно практики поинтереснее для более опытных?) а то такое чувство, что все одни и те же практики записывают) solid для реакта на практике с реальными компонентами было бы круто посмотреть)
@PurpleSchool
@PurpleSchool Жыл бұрын
Хорошо. Сделаю думаю видео про FSD
@chirkov
@chirkov Жыл бұрын
@@PurpleSchool интересно было бы увидеть FSD вместе с Next. Да, это ролик на час или два, но было бы очень интересно
@AleksandrNeo
@AleksandrNeo Жыл бұрын
У Михаила Непомнящего есть хорошие видео с примерами на эту тему
@andrei-psyhelp
@andrei-psyhelp Жыл бұрын
Зачем использовать forwarRef, если можно просто прокинуть ref пропсом?
@PurpleSchool
@PurpleSchool Жыл бұрын
Можно, но оно может трирегить дополнительный rerender. Подробнее тут: stackoverflow.com/questions/58578570/value-of-using-react-forwardref-vs-custom-ref-prop
@TheLevius
@TheLevius Жыл бұрын
так пропсы только для чтения
@al77ex1
@al77ex1 Жыл бұрын
в доках пишут так не делать т.к. ref предопределенная переменная реакта именно поэтому нужен метод forwardRef().
@PurpleSchool
@PurpleSchool Жыл бұрын
Можно прокинуть другим кастомным props, но это тоже не очень
@unknown-im8kj
@unknown-im8kj Жыл бұрын
11:13 сначала показал что неправильно работать с состоянием, которе вернул хук и надо пользоваться коллбэком из функции-сеттера, а теперь сам же ссылаешься на замкнутое состояние внутри функции.
@PurpleSchool
@PurpleSchool Жыл бұрын
Да, тут правильнее было был сделать аналогично предыдущем состоянием, но в попыхах записи хотел показать именно работу с объектами
@unknown-im8kj
@unknown-im8kj Жыл бұрын
было бы полезно как раз показать как работать с коллбэком и объектом состояния, так как у новичков запись рода setState( prevState => ( { ...prevState, count: prevState.count + 1 } ) ) вызывает страх и много вопросов@@PurpleSchool
@stanislav_ovv
@stanislav_ovv Жыл бұрын
Музыка практически как у Пивоварова в новостной повестке.
@xeleos
@xeleos Жыл бұрын
Не мог понять почему у тебя ошибка на true и null, а это просто тема оказывается
@PurpleSchool
@PurpleSchool Жыл бұрын
Да, такая подсветка)
@DubinArtur
@DubinArtur 3 ай бұрын
Очень не люблю forwardRef, он очень контринтуитивный, как будто чужеродный и совсем не из реакта
@kokoc58
@kokoc58 Жыл бұрын
useState не понимает что объект изменился - это явно баг, который все воспринимают как фичу)))) вон в mobx меняешь любое поле объекта и react всё понимает, даже если поле вложенного объекта
@PurpleSchool
@PurpleSchool Жыл бұрын
Это не баг, а работа JS. Mobx это делает за счёт дополнительных механизмов под капотом.
@ruslan_mart
@ruslan_mart Жыл бұрын
mobx "прослушивает" объект через Proxy (раньше через декораторы/обёртки над дескрипторами). В реакте такого нет, потому что это сильно будет тормозить работу JS. Да и в целом, можно было бы тогда словить много сайдэффектов, когда объекты прокидываются в другие компоненты и там могут мутироваться. В общем, в реакте как раз сделано все вполне логично.
@ИмяФамилия-э4ф7в
@ИмяФамилия-э4ф7в Жыл бұрын
Это не баг, а концептуальное решение. Можно было сделать так или так, на этапе разработки самого реакт было принято решение использовать иммутабельный подход. И за и против есть свои аргументы, для команды реакта тогда аргументы за перевесили. Ты же не думаешь, всерьез, что команда реакта просто не смогла сделать мутируемый стейт? 😂
@spray-laughter
@spray-laughter Жыл бұрын
Поработав с реактом два года, я определённо могу сделать вывод, что начинать работать с ним уже и было самой ошибкой ;)
@PurpleSchool
@PurpleSchool Жыл бұрын
Очень критично) Я 4 года работал с Angular, год со Svelte, но React люблю)
@Icanfly-
@Icanfly- Жыл бұрын
За 2 года не осилить реакт это мощно
@PurpleSchool
@PurpleSchool Жыл бұрын
На проде Vue не использовал
@radikovichkz2470
@radikovichkz2470 Жыл бұрын
Разве есть какие то аналоги? В чем именно для вас было сложно?
@nan1000
@nan1000 Жыл бұрын
Не надо делать такие заголовки. Бесят же
@PurpleSchool
@PurpleSchool Жыл бұрын
Зато CTR хороший)
@int3rhard
@int3rhard Жыл бұрын
Какой же все-таки реакт убогий в плане шаблонов, во вью они намного более читабельнее получаются.
@PurpleSchool
@PurpleSchool Жыл бұрын
Всё зависит от привычки)
@jmksm
@jmksm Жыл бұрын
А ангуляр ещё лучше)
@PurpleSchool
@PurpleSchool Жыл бұрын
Смотря для чего)
@jmksm
@jmksm Жыл бұрын
@@PurpleSchool для коммерческой разработки) А петы можно и на ванильном js писать)
@PurpleSchool
@PurpleSchool Жыл бұрын
Я 4 года писал на Angular и скажу что для CRM и прочих вещей да, а вот для SSR сайтов и прочего - не самое оптимальное решение
@dmitriy4415
@dmitriy4415 Жыл бұрын
Реакт ужасен своей кашей. Плюс ирония в том, что реакт не реактивен.
@radikovichkz2470
@radikovichkz2470 Жыл бұрын
А что тогда рекомендуете взамен? Vue думаете лучше ? Может дело не в самом реакт?
@АртёмСенькевич-ы5с
@АртёмСенькевич-ы5с Жыл бұрын
​@@radikovichkz2470он наверное, как большинство людей жалуются, а сами технологию освоили на минимальный уровень и ничего нормального сделать не могут
@arturseu
@arturseu Жыл бұрын
Каша у тебя в голове. Реакт всего лишь библиотека. Все остальное пожалуйста сам.
@АртёмСенькевич-ы5с
@АртёмСенькевич-ы5с Жыл бұрын
@@arturseu ну он просто не понимает, что такое React
@dmitriy4415
@dmitriy4415 Жыл бұрын
@@arturseu у тебя каша в голове
@w1png_alt
@w1png_alt Жыл бұрын
Уважаемый Антон, я очень разочарован вашим поведением. Почему используете это противное детище Microsoft вместо православного neovim Видео бомбовое кстати
@PurpleSchool
@PurpleSchool Жыл бұрын
Уважаемый @w1png_alt, VSCode вполне достоин того, чтобы его демонстрировать в целях обучения. Neovim на месте)
@remiku-play
@remiku-play Жыл бұрын
Какой мерзкий реакт после Свелта, смотрю и тошнит
@PurpleSchool
@PurpleSchool Жыл бұрын
Кому что нравится)
@dmitriy4415
@dmitriy4415 Жыл бұрын
Он ужасен и после Vue, и после angular
@radikovichkz2470
@radikovichkz2470 Жыл бұрын
@@PurpleSchoolне обращайте внимание на html программистов
@ИмяФамилия-э4ф7в
@ИмяФамилия-э4ф7в Жыл бұрын
Не вижу проблемы, пиши на свелте 🤷🏿‍♂️
Hook useId в React - зачем нужен?
9:40
PurpleSchool | Anton Larichev
Рет қаралды 6 М.
小丑教训坏蛋 #小丑 #天使 #shorts
00:49
好人小丑
Рет қаралды 54 МЛН
黑天使只对C罗有感觉#short #angel #clown
00:39
Super Beauty team
Рет қаралды 36 МЛН
Quilt Challenge, No Skills, Just Luck#Funnyfamily #Partygames #Funny
00:32
Family Games Media
Рет қаралды 55 МЛН
Собеседование на Junior Frontend разработчика на React
34:15
PurpleSchool | Anton Larichev
Рет қаралды 68 М.
From Junior To Senior React Developer - Best Practices
13:33
CoderOne
Рет қаралды 151 М.
Разбор Next 13 - урок по работе с app, turbopack, font, SSR
29:07
PurpleSchool | Anton Larichev
Рет қаралды 21 М.
Goodbye, useEffect - David Khourshid
29:59
BeJS
Рет қаралды 504 М.
Zod: валидация Nestjs и контракты для React
17:06
PurpleSchool | Anton Larichev
Рет қаралды 8 М.
Знакомство с Zustand - лучшей заменой Redux
29:35
Михаил Непомнящий
Рет қаралды 33 М.
小丑教训坏蛋 #小丑 #天使 #shorts
00:49
好人小丑
Рет қаралды 54 МЛН