React JS + TypeScript. Введение в Типизацию (+ React Router DOM)

Исходники тут: t.me/js_by_vladilen/98
Получить профессию Frontend разработчика -
bit.ly/3NGnBln
Подробнее узнать об обучении в Result School -
bit.ly/3NtJO5T
Бесплатный курс HTML & CSS - bit.ly/3OIZumM
Сделать 5 проектов на JavaScript - bit.ly/3yqRYb1
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
React JS + TypeScript. Введение в Типизацию (+ React Router DOM)
React + TypeScript
В видео показываю работу с типизацией в React на примере приложения
Так же рассматриваю @types + React Router DOM
Приятного просмотра)

[@VladilenMinin]

Исходники тут: t.me/js_by_vladilen/98 Получить профессию Frontend разработчика - bit.ly/3NGnBln

[@dm.hol.3624]

Ставьте лайки, чтобы все видели TS-моменты: 9:24 - тип React.FC 22:29 - простая типизация UseState 25:54 - типизация синтетических событий 29:45 - null в рефе 33:36 - интерфейс для пропсов компонента 37:06 - еще один интерфейс пропсов 42:24 - интерфейс для массива todos 59:10 - declare для window.confirm 1:02:40 - конструкция as 1:11:43 - пакет типов для react-router-dom

[@stasy_lo]

У кого возникнут проблемы с toggleHandler попробуйте так: const toggleHandler = (id: number) => { setTodos(prev => prev.map(todo => { if (todo.id === id) { return { ...todo, completed: !todo.completed } } return todo })) }

[@vskorohod]

Знай, что не ты один бился с этой проблемой последние минуты))

[@stasy_lo]

@@vskorohod ахаххаах)

[@alexandershirokov6705]

Заработало, спасибо огромное! А в чем, собственно дело? Почему такой эффект?

[@vskorohod]

Alexander Shirokov каждый раз нужно возвращать новый объект, чтобы избежать мутации данных. Так работает React и JS - habr.com/ru/company/ruvds/blog/346998/

[@alexandershirokov6705]

@@vskorohod Спасибо огромное! Хорошая статья! 😊

[@MrAntonforce]

Ну вы прям реально мысли читаете! Прям как по заказу) Спасибо огромное за ваш труд!

[@VladilenMinin]

Ребят, при рендере видео были небольшие проблемы. Вы их можете наблюдать в виде маленькой размытости зеленого шрифта. На днях все исправлю. Прощу прощения за неудобства PS Если полезен контент, поставь колокольчик, это будет лучшей поддержкой :)

[@user-dw9no3ht7j]

Владилен Минин подобные видео даже с некоторыми техническими огрехами переоценить сложно! Спасибо за ваш труд!

[@user-rh3ji8xf5l]

спасибо за уроки! подскажите, какая визуальная тема стоит в VSCode ?

[@user-sq1lc2sm3b]

Спасибо огромное, потрясающее видео. Отдельная просьба... Пожалуйста, дайте скрины Ваших плагинов VS code, и настроек. Очень шустро срабатывает автокомплит, да и интересно как настроена работа с TS

[@hogvarts]

Та хоть он весь размытый будет ) Я вообще *Нихера* не шарю. (html css) не в счёт. _Посмотрел как Триллер._ *Спасибо за труд.* Соответственно комментарий лайк колокольчик. !

[@Storkz0re]

Размытость еще есть

[@_Black_Mirror_]

Хотелось бы увидеть в будущем типизацию с редаксом и асинхронными запросами

[@romankhudovekov5145]

Поддерживаю. Благодарю за контент!

[@xwhiskasx1]

Поддерживаю, редакс + TS

[@VitalyLiber]

Божественное видео - все, что я хотел узнать в одном флаконе. Однозначно благодарствую Владилен!

[@CELTRIX88]

Очень круто, спасибо! Хотелось бы еще увидеть typescript с redux.

[@Rapterlol]

Как всегда ТОП!! Владилен, очень жду Вашего курса по Next.js!

[@siarheilabetsik5658]

Спасибо тебе, Владилен, за труды. Все повторяю руками и веду конспект - через неделю перечитываю - запоминается отлично. Всем рекомендую того же!

[@William_clark]

Спасибо за видео очень полезно, надеюсь в будущем увидеть урок по Next JS

[@user-be7jw6nl1p]

Владилен, спасибо за уроки по TS , Очень помогли, мне стал React гораздо более понятным, когда стал прописывать типы.

[@user-gx7kf9um9x]

Огромное спасибо! Емко, все по сути, без воды.

[@Maratreason]

Спасибо Владилен! Классный урок!

[@dispeltr1183]

ЕЕееее бой! Давно ждал подобный ролик! Благодарочка!

[@aleksandrgradov7859]

Спасибо огромное за видео и за Ваши труды!!!

[@user-dm6mk5wh4o]

Очень классно! Информативно, все по делу. Спасибо!

[@myroadtodream]

Как всегда качество контента на высоте, приятно смотреть

[@user-hy7uu2yf9z]

Спасибо Владилен, всё четко!)

[@user-on9ul4zx6n]

Круто, отличный урок по React + TypeScript !

[@stanislavzakarlyuka3653]

Спасибо Вам огромное. Очень круто и понятно(все по полочкам). Respect

[@ruslanaskarov5393]

Спасибо за хороший курс по данной теме!

[@egorpobylets6597]

Огромное спасибо за Ваш труд. React, typeScript, useEffect, useHistory

[@user-kp2rb5ef9s]

Очень полезное и информативное видео! Спасибо!

[@rybiizhir]

Очень классно все объяснил, помог переключиться на функциональные компоненты, до этого не мог понять, все писал классами.

[@nikitaundefined8549]

Хочется поддержать за хороший контент, но уже не знаю, где еще лайк поставить)

[@kaparzhekshen2897]

Спасибо за труд, respect!

[@dychkos]

Огромное спасибо! Очень информативно и полезно.

[@dimalukashenko4865]

Второй раз пересматриваю! Очень круто!

[@user-ic4dk4sp3y]

Круто, спасибо всё доступно и качественно

[@user-yg7zl3lp3k]

Капеец. Неделю назад только искал видос, - связку реакта и тс. Владиден, респект тебе)

[@KipaUA]

Отличный гайд! Спасибо!

[@wisehannel9190]

Огромное спасибо за контент) Я не успеваю разбирать весь материал :D

[@VladilenMinin]

На этой неделе будет еще материал, так что успевай!) Продуктивного обучения)

[@eugenegavrilov2618]

@@VladilenMinin на Udemy по typescript курсов не планируется?

[@VladilenMinin]

Пока не планирую. Будет в открытом доступе на ютубе

[@alexeylysenko7380]

полезнейший контент и в свободном доступе, мое почтение!

[@VladilenMinin]

Все для подписчиков! Приятного просмотра)

[@sergeyplotnikov5031]

Большое спасибо! Очень доходчиво!

[@user-cd1sr5sx2r]

Спасибо! Отличный урок. Показать, что есть хорошее преимущество использоваyния TS в проектах и это не сложно!

[@nazarromanchuk6080]

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

[@Polite_person_]

Я еще твой курс по реакту не разобрал по винтикам, а тут уже такое)

[@123qMike]

Большое спасибо, все очень понятно)

[@denisvradiy8503]

Очень круто, спасибо!

[@italianpinguin]

Спасибо! Отличный урок)

[@user-pd4gt9zz9c]

Афигенно! Спасибо!

[@379sanek]

Низкий поклон!

[@evgeny9242]

ты так быстро делаешь новые видео, я про вопросы react интервью еще даже не досмотрел 😂но спасибо огромное

[@VladilenMinin]

Обязательно посмотри)

[@DanReksar]

Огонь, спасибо)

[@chocopaay8164]

Просто потрясающе :) Все по делу : коротко, ясно и предельно понятно Спасибо огромное за такие классные видео!!!

[@user-jw1pc9ls1x]

все это есть в доках, он просто цитирует доки и все, восхваляют блть как гения

[@dm.hol.3624]

@@user-jw1pc9ls1x Норм, он считай пережевывает для самых тупых и тех кто не воспринимает текст

[@FireORcolD]

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

[@alenagritsiuk6499]

Thank you for this video. It was really helpful. Just want to note that I had a trouble with a checkbox input. It was reserved by applying z-index for the checkbox otherwise it would not listen to event.

[@floky1342]

Спасибо за контент!

[@uracan7872]

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

[@ingvarr6235]

Отличное видео, спасибо!

[@HOTBOY9961]

вижу новое видео... лайк не глядя

[@izograph]

Спасибо, Владилен! Помимо самого TypeScript'а в связке с React еще раз показаны многие интересные моменты в работе с хуками и формами

[@serdargurbanmyradow287]

Спасибо за годный контент

[@Helen-do2og]

Как всегда - прекрасный контент! Хотелось бы увидеть Typescript в связке с Mobx или хотя бы просто Mobx)

[@ftbllthrll]

Спасибо тебе, ты очень помогаешь.

[@dimitro.cardellini]

Отличное видео. Но, есть немного замечаний: 1. Лучше не писать перехватчики для нажатия Enter -- используйте form.onSubmit. Да, кстати, кнопку для сабмита тоже добавить. Это решение позволит работать с формой не только с клавиатуры, но и с помощью мыши (copy/paste etc). 2. toggleHandler -- должен был вернуть новые, изменненый todo. в данном проекте, мы этого не заметили, но если где-то этот todo будет пробрасываться, как значение в пропс, то React может этот компонент и не перерендерить (т.к. ссылка не поменяется, а детали переданного объекта Реакт проверять не будет) 3. Как показал рефакторинг с большим числом копи-паста (кстати, проще было сразу файл перенести) -- изначально все положили не очень удачно. Кроме того, файл с объявлением интерфейса ITodo, как-то по-сиротски оказался в корне ...). Правильный подход -- это было создать кастомную хуку: useTodos, в которую положить управление состоянием и хуки для персистенса. Объявление ITodo отлично было бы положить как раз в том же файле, где такая кастомная хука объявляется. Ну и сам Реакт поощрает создание кастомных хуков. 4. Из-за того, что мы не делали кастомную хуку, мы смешали код, который управляет состоянием с кодом, который отвечает за взаимодействие с пользователем -- это есть плохо. Например, если где-то мы захотим удалить туду без подтверждения, то уже не сможем.

[@mokkamokka4097]

Огромное спасибо!

[@ammoney159]

Спасибо за видео)

[@hatamsoyunov]

Спасибо большое!

[@user-vu9pp3bm8f]

Супер урок!!!

[@creemer]

Благодарб за видео! Есть пожелание: - Было бы мега интересно посмореть как работает TS в связке с MobX/Redux

[@Zadorozhniy39]

От души👍🏼

[@viktoriaryndina4830]

отлично. спасибо. все получилось

[@vyvaida]

Спасибо вам за видео

[@user-cl8hi9jw3b]

спасибо за видео)

[@anatoliyburdasov4035]

Владилен было бы интерестно посмотреть как ты будешь стилизовать через styled components.Заранее спасибо!

[@user-rh1ty5rx3h]

Почему то уведомление не пришло. Хотя колокольчик есть. Спасибо за видео.

[@VladilenMinin]

Колокольчик важен, но его надо настроить, чтобы уведомления приходили)

[@itdimk]

Пасибки за видео. Кстати, на 26 минуте еще возможен такой вариант указания типов: const changeHandler: ChangeEventHandler = (event) => { setTitle(event.target.value); } Мне почему-то нравится больше

[@max_mgtow]

Владилен, смотрю сейчас в новой версии React нет файла tsconfig.json... Разобрался, надо писать --template typescript, а не typescript

[@GDmit]

Using good looking visuals, clearly seen

[@sivkaburka1062]

Досмотрел до конца

[@vladyslavvovk]

очень жду урока по react + ts + redux saga прям очень очень

[@chkpg4317]

Спасибо!

[@user-ko3ue2ov6p]

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

[@VladilenMinin]

На следующей неделе будет еще приятность для тех, кто занимается TypeScript)

[@disconnect355]

@@VladilenMinin Ну как же это всё вовремя! Спасибо, очень круто. Жду!

[@nikitaosadchuk1467]

Владилен спасибо за видео! Случайно заметил небольшой брак) в функции togleHandler вы изменяете текущий стэйт на прямую .В методе map вы получили объект todo по ссылке ,и изменяете его на прямую ,на сколько мне известно так делать нельзя)Думаю правильнее будет сделать вот так) if (todo.id === id) { return { ...todo, completed: true };

[@bulo4ka680]

Спасибо, а то не мог долго найти в чем была проблема

[@sayonara17155]

completed: !todo.completed

[@vlad-zf1ev]

спасибо за ваш комментарий, в 2021 году работает только с вашими изменениями. Если писать как автор видео, то функция togleHandle работать не будет. (конкретно у меня, не срабатывало нажатие на чекбокс. )

[@ilyaprotsenko1023]

@@vlad-zf1ev Разобрались, почему так происходило? Дело в том, что если данный код, как у автора, писать без ts, то всё работает. Владилен записывал видео, где разрабатывал туду-лист без ts, логика и код почти идентичны.

[@user-sn5nu8mz7f]

46:40 ...ну такой хитрой записи class-а, я не видал :) А по видео... ну ты хорош, однозначно

[@MarinYehor]

@Девственник-инвестор по тс не имеется у него платных, купил по React и Node и перевариваю драгоценные знания эти, собираюсь переписать курс по React используя одни хуки)

[@natali1085]

Спасибо)

[@davmovsesyan7726]

огонь!

[@hutoryanin]

*Л. а. й. к. о. с.* за видос.

[@zerocool14pvo]

Спасибо

[@AndranikArshakyan]

спасибо

[@user-ye3vi2ss4i]

1:04:10 "А ты любишь рисковать!" :)))

[@AndrewGrinchak]

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

[@VladilenMinin]

А это и есть вся теория. Дальше только вариация типов

[@user-fb6fr5nx9u]

Слышал многие советуют вместо "const FC: React.FC = props" использовать интерфейс на пропс "const FC = (props: Props)", мол возможны какие-то issues в первом случае. Что скажешь по этому поводу? Есть ли существенная разница между этими походами?

[@UserSo4reUsu75ry]

Если в процессе работы что-то меняется может получится, что придется переписывать интерфейсы у компонентов по цепочке. Еще проверки на null задалбают. В итоге не понятно удобно это или мешает ))

[@user-od6hi8we5p]

отлично

[@morphine3016]

если после обновления страницы данные не сохраняются в localStorage, попробуйте заменить один useEffect на переменную (React 18): const savedTodos = JSON.parse(localStorage.getItem('todos') || '[]') const [todos, setTodos] = useState(savedTodos); useEffect(() => { localStorage.setItem('todos', JSON.stringify(todos)) }, [todos])

[@igormaksymiv113]

Спасибо тебе, добрый человек😅 Двое суток мучался с это проблемой)

[@user-br2br5it8f]

Всё супер, но только один вопрос: если это форрма то почему нет тега form + onSubmit?

[@stanislavndreev2831]

Спасибо за видео! А как сделать чтобы внутри jsx работало комментирование посредством //... ?

[@timurgolovinov]

Пушка

[@user-bh6mc8pd8g]

прекрасно, как раз для меня, как новичка в изучении Тайп Скрипта

[@srt2046]

Спасибо, Владилен! Запили пожалуйста курс по реакт для новичков. По реальному проекту. Crm система или интернет-магазин. Главное(!) с готовой вёрсткой, чтобы не тратить время на вёрстку этого приложения

[@VladilenMinin]

Все ссылки в описании

[@MrTofi63]

Отличный урок, спасибо! Владилен, а если в реакте возможность защищенный роут? Что то вроде canActivate в ангуларе

[@volodymyrshaposhnikov4300]

Что мешает сделать HOC PrivatеRoute в котором описать логику входа

[@vikalindeman9315]

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

[@KomarovPavel-if8ud]

на 58-ой минуте в removeHandler можно ведь просто из замыкания взять todo.id. По сути и стрелочная функция (та, что в jsx) и removeHandler определены в одной и той же области видимости. Не вижу смысла так сложно прокидывать значение.

[@ilnurryazhapov9377]

Лайк

[@andygr1n1]

Отличный материал, на мой взгляд лучший в русскоязычном сообществе. Спасибо, очень помогло разобраться с основами в TSX.

[@michaeldevichenskiy4588]

5 из 5 баллов

[@Doktornikita]

А где моно смотреть эти типы? Я например про React.ChangeEvent. Как узнать, что там?