Тёмный

Гайд по React + TypeScript. Основы и лучшие практики 2022. Функциональный стиль + Hooks. 

wise.js 
Подписаться 18 тыс.
Просмотров 40 тыс.
50% 1

Полный Гайд по использованию React (с его экосистемой) + TypeScript в функциональном стиле. Типы рассмотренные в видео:
✅ ReactElement | JSX.Element
✅ ReactNode
✅ FC | FunctionComponent
✅ HTMLProps
✅ ReactEventHandler
✅ React.XXXEvent
✅ CSSProperties
✅ Hooks
✅ Много других полезных фишек в TypeScript
Приятного просмотра! Буду благодарен за поддержку в виде комментария и лайка!
👉 Исходный код, чат, воркшопы и поддержка канала: / wisejs
✔️ Если хочешь изучать программирование со мной, не забудь подписаться :)
www.youtube.co....
✔️ Мой телеграм канал: t.me/joinchat/...
#react #typescript #реакт #тайпскрипт #reacttypescript #урокитайпскрипт #typescripthooks #тайпскриптхуки #reactjs #reactts

Опубликовано:

 

3 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 84   
@wisejs
@wisejs 2 года назад
Кто-то еще пишет на классах? Нужно ли видео по типизации классов и HOC в React?
@joker202
@joker202 2 года назад
Вот про типизацию хоков было бы очень интересно. При типизации нужно ещё учесть чтобы статические поля класса тоже правильно выводились тайпскриптом
@konstantinvoronin4687
@konstantinvoronin4687 2 года назад
Я пишу, иногда это требуется
@wisejs
@wisejs 2 года назад
@@konstantinvoronin4687 в каких случаях?
@wisejs
@wisejs 2 года назад
@Кристина Шмелева Здравствуйте, да, в таком формате: www.patreon.com/posts/davai-vmeste-v-61411404?
@Андрей-в6д2ь
@Андрей-в6д2ь 2 года назад
@@wisejs Как минимум, для старых проектов
@MykhailoSova
@MykhailoSova Год назад
Обходил видео стороной, думал такую комплексную тему сложно объяснить за 20 минут. По факту, полезности в этом видео больше чем в "Гайдах" на просторах ютуба.
@Zubbol
@Zubbol 2 года назад
Лучший видос на эту тему. Мне даже поиск в гугле не особо помог на тему типизации элементов и компонентов в React, а здесь всё по полочкам.
@konstantinvoronin4687
@konstantinvoronin4687 2 года назад
У тебя отлично получается объяснять достаточно сложный материал. TypeScript - это моя боль. С радостью бы научился у тебя еще чему-нибудь интересному. Уже порекомендовал твой канал своим коллегам. Спасибо за твой труд!
@wisejs
@wisejs 2 года назад
спасибо большое) у меня на патреоне есть воркшопы , в которых можно получить код ревью либо получить объяснение сложной для себя темы. Если будет желание - присоединяйся www.patreon.com/wisejs
@MrDima123123
@MrDima123123 2 года назад
Месяц назад смотрел - ничего не понял. Сегодня посмотрел - всё понял. Аж удивился
@maks8669
@maks8669 Год назад
Спасибо за новую информацию, полезно, доступно и интересно)
@noname1999x
@noname1999x 2 года назад
Наконец появляются на русскоязычном ютубе крутые туториалы по react + typescript
@wisejs
@wisejs 2 года назад
спасибо))
@noname1999x
@noname1999x 2 года назад
@@wisejs вам спасибо за годноту!) ❤️
@leninzhiv6180
@leninzhiv6180 2 года назад
Ulbi tv уже пару лет есть
@РусланА-ф2н
@РусланА-ф2н 2 года назад
Спасибо вам за видео!
@romankrytski8687
@romankrytski8687 Год назад
Ну ты и стелишь... Спасибо за контент, очень мощно)
@egorbann8452
@egorbann8452 Год назад
Большое спасибо за проделанную работу. Помог понять много нового материала. Надеюсь что не запросил канал и продолжишь и дальше радовать новым контентом
@mykhailostepanishchev6472
@mykhailostepanishchev6472 2 года назад
Спасибо,шикарное видео ! Было бы супер увидеть более сложные концепции react + typescript. Hooks
@doctormaxin3989
@doctormaxin3989 2 года назад
Супер!!!
@Аннанежная-м8я
@Аннанежная-м8я 2 года назад
Очень круто! Спасибо огромное за такой полезный контент про React, Typescript и Hooks
@Camelot1399
@Camelot1399 11 месяцев назад
Посмотрел ролик, все очень понятно, доступно, благодарю 🙏 подписался
@CHEBURAT0OR
@CHEBURAT0OR 2 года назад
Просто отличный видос, спасибо большое!
@notsure8175
@notsure8175 2 года назад
спасибо
@NZXTUA
@NZXTUA 2 года назад
Давно пишем с использованием TS, но познание типов и лучших практик продолжается. Typescript это и боль, но в тоже время лайф-сэйвер. Спасибо за материал и грамотную подачу. Даёшь адвансед туториалов по теме!
@maksymradchenko4889
@maksymradchenko4889 2 года назад
Блин очень вовремя, спасибо !!!
@swartex92
@swartex92 2 года назад
Как же круто объясняешь! лайк и спасибо!
@wisejs
@wisejs 2 года назад
Спасибо за поддержу!
@fl1pp1x
@fl1pp1x 2 года назад
В цілому дізнався трохи нового, дякую
@vadicus6534
@vadicus6534 2 года назад
Ух ты, спасибо за классный контент) Действительно полезные и актуальные темы у тебя на канале. Рад что обнаружил тебя) В качестве конструктивной критики хотелось бы отметить что скорость повествования очень быстрая и после разбора какой нибудь штуки не хватает секундной паузы чтобы это осознать что сейчас произошло и приготовиться идти дальше. и тугл тугл прям режет слух) Зато очень круто что нет воды и такой концентрат полезного материала прикладного характера. Без каких то рассуждений и длинных видеовставок в начале ролика)) в общем лайк подписка) спасибо!
@max_mgtow
@max_mgtow 2 года назад
Спасибо 🤝👍 Как раз юзал уже React.FC
@aslankorpeev7809
@aslankorpeev7809 2 года назад
жду полный стек MERN + JWT/GOOGLE AUTH
@АлинаЧередниченко-п9ъ
Как всегда все максимально просто и доступно! Спасибо ☺️
@wisejs
@wisejs 2 года назад
спасибо большое)
@KarasikHelen
@KarasikHelen 2 года назад
Боже, спасибо. Недавно начали использовать его в проекте, и иногда доставляет боль. Спасибо за разъяснения 🙏
@ГерриПитт
@ГерриПитт 2 года назад
годная инфа, хотелось бы еще материала на эту тему
@VVSTru
@VVSTru 2 года назад
в react 18 надо явно указывать reactNode или иcпользовать PropsWithChildren
@AntonYatsenkoRU
@AntonYatsenkoRU 2 года назад
Это очень долго, чтобы научиться. Потом посмотрю
@mrFighter924
@mrFighter924 2 года назад
i don't understand russian but what i can see u are very, maybe the best content on RU-vid
@Romul3003
@Romul3003 2 года назад
було б гарно запілити відос щодо автогенерації типів даних api із бекенду, щоб не пілити руками на фронті, як ти зробив на universal-match-flow на турнірці
@jamjam3337
@jamjam3337 Год назад
👏👍
@MrDima123123
@MrDima123123 2 года назад
Крутые туториалы у вас. Если будет время - сделайте про перезагрузку функций видео, пожалуйста.
@mercury_2379
@mercury_2379 2 года назад
если смотреть в х2, то можно научиться в 2 раза быстрее)
@МаксимНырков-у6г
@МаксимНырков-у6г 2 года назад
блэт, кэп)))) я угарнул!!!!
@yakut54
@yakut54 2 года назад
а если ускорить в 10 раз.... 🤭
@vladimirivanov4756
@vladimirivanov4756 2 года назад
Обычно смотрят дважды по х2
@dmitrykorovin4356
@dmitrykorovin4356 2 года назад
Жирный лайк!
@katada
@katada 2 года назад
Отличный урок!
@wisejs
@wisejs 2 года назад
Спасибо)
@serhiiverba4
@serhiiverba4 2 года назад
Спасибо👍👍
@ЕвгенийЧернавин-х9ц
Лучший!
@ИмяФамилия-э4ф7в
@ИмяФамилия-э4ф7в 2 года назад
2:21 по моему, в корне неправильный совет. Чего мы хотим добиться, чтобы typescript не ругался? Так есть any, unknown, или вообще отключить его можно, чтобы не ругался. Смысл то в другом. Например, у нас есть компонент, который рендерит список айтемов с пагинацией. Он на вход ожидает именно массив реакт элементов, и его children нужно так и типизировать: React.Element[]. ,Тогда, если другой разработчик, или мы сами, попытаемся передать в него что-то другое, то TS нас подстрахует, скажет, не, дядя, сюда нужно массив элементов. В этом смысл: типизация должна быть максимально узкой, чтобы проходило только то, что нужно. Другое дело, если мы пишем общий компонент, которому, в принципе, не важно, что у него в children. Т.е. решаемая им задача никак не зависит от детей. Тогда да, можно писать ReactNode. Итого, нам нужно думать не о том, как заткнуть TS, чтобы не ругался, а о том, что это свойство должно из себя представлять, чтобы код работал как надо.
@wisejs
@wisejs 2 года назад
Верно, я как раз таки имел ввиду случай с любым содержимым
@НиколайДмитриев-т7н
Спасибо))
@MrDima123123
@MrDima123123 2 года назад
Функцию toggle можно реализовать получше. Сейчас она меняется каждый раз, когда меняется currentTheme. Если убрать эту зависимость из useCallback, а в setCurrentTheme передать функцию, которая принимает предыдущее состояние, то ф-я toggle не будет изменяться при ререндере.
@ВладимирГугин-ш7щ
@ВладимирГугин-ш7щ 2 года назад
Если на onChange навести в инпут, то среда разработки подсказывает какое событие можно навесить. PS Хочется конечно поболее видосов по типизации React with Typescript
@gorodiskiy4
@gorodiskiy4 2 года назад
С большим удовольствием посмотрел бы гайд по Angular + TS /
@alex-karpov-dev
@alex-karpov-dev 2 года назад
только не ТУГЛ, А ТОГГЛ :)
@ВсеволодРусинский
👉 Этот комментарий создан в качестве уважения автору и для продвижения его канала.
@МаксимБалемба
@МаксимБалемба 2 года назад
Typescript react, спасибо
@its_daim
@its_daim 2 года назад
все классно, спасибо. но не могу не сказать )) Моргни если тебе угрожает опасность
@wisejs
@wisejs 2 года назад
😂😂😂
@Ростислав-м1е
@Ростислав-м1е 2 года назад
топ!
@Giri-16108
@Giri-16108 2 года назад
Все круто, но ты сам от куда это все узнал? Не понятно, где можно узнать о готовых типах в Реакте.
@wisejs
@wisejs 2 года назад
Читать исходники :)
@JonDoe-l9c
@JonDoe-l9c Год назад
Привет. Не могу разобраться в одном моменте. Проект на React+Typescript. Есть одна карточка продукта для разных типов продуктов. Есть интерфейсы для каждого продукта свой. Как передавать нужный интерфейс в карточку продукта ?
@ДаниилТрофимов-з1ы
Привет, пригодились бы best practice по типизации стейт менеджеров в связке с React.
@erxweo
@erxweo 2 года назад
Привет, указал как на видео тип FC но children всё равно ругается. Пока как generic не передашь в FC свой тип c указанным children: ReactNode ошибка не проходит.
@kisavisa
@kisavisa 2 года назад
В 18 версии убрали children из FC
@Кирилл-ю8ж9л
@Кирилл-ю8ж9л Год назад
Кто столкнулся с такой же проблемой, в версиях React'а 18 >= можно решить так: const Component React.FC = ({ children }) => {}
@sergeyplotnikov5031
@sergeyplotnikov5031 2 года назад
Да, по всем хукам прокачаться бы в тайпскрипте + Redux. А то у меня проблемы с типизацией Redux - не получается сделать её идеальной.
@CJIu3eHb
@CJIu3eHb 2 года назад
С чистым redux вообще жопа на мой взгляд, сейчас проще rtk использовать - и писанины меньше, и с типизацией проще.
@madarasan0
@madarasan0 Год назад
Только начал изучать реакт и из видео почти ничего не понятно
@ИльяЛекомцев-п4б
@ИльяЛекомцев-п4б 2 года назад
👍
@Rostyslav-hv9un
@Rostyslav-hv9un Год назад
не очень понял при чём тут лучшие практики
@mirandal9987
@mirandal9987 2 года назад
супер. типично российское объяснение материала, когда сначала нужно понять объяснятеля. поучись у сударя как объяснять
@d0paminer
@d0paminer 2 года назад
+
@АлександрДми
@АлександрДми 2 года назад
🗾
@faizulla5838
@faizulla5838 2 года назад
если у тебя cocmponent is Компонент а не Ком-поо'нэнт..... то можно посто сказать элемент а не аэээлэмнт.... как то дико режет слух, или надо все слова "юзать" в инглиш с ПРАВИЛЬНЫМ произношением, или все говорить как обычно. тема интересная но изголяние в произношении отталкивают на многих каналах.... как и это ффем в them.... хотя кроме британцев многие экспаты просто говорят "зээм " [zem], бриты чисто говорят межзубное С а не наше фффф
@wisejs
@wisejs 2 года назад
А кому надо юзать все слова с правильным произношением? тебе? вот и юзай) у себя на канале я буду говорить так как хочу. Если мы уже говорим про правильное произношение, то вот ПРАВИЛЬНОЕ произношение слова |kəmˈpəʊnənt|. Иди ошибки исправляй на обучающих канал по английскому) Мы тут прогу учим
Далее
Китайка стучится Домой😂😆
00:18
iPhone 16 & beats 📦
00:30
Просмотров 157 тыс.
小路飞嫁祸姐姐搞破坏 #路飞#海贼王
00:45
Что такое keyof typeof в TypeScript.
8:46
Просмотров 19 тыс.
TypeScript in React - COMPLETE Tutorial (Crash Course)
53:21
📝 TODO LIST React + Typescript - ЗА 30 минут
55:35
React-приложение на TypeScript
41:29
Просмотров 67 тыс.