React TypeScript ПОЛНЫЙ КУРС 2021. Props, Events, Router, Hooks, Requests.
HTML-код
- Опубликовано: 12 май 2024
- В этом ролике мы рассмотрим основным нюансы связанные с типизацией React Typescript. Уроки по React Typescript. Typescript react router dom. Typescript react props. Typescript React hooks. React ts
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
В продолжение к этому курсу смотреть:
React Redux Typescript - • React & Redux & TypeSc...
Fullstack Разработка на TypeScript - • Nest js & Next js ПОЛН...
Исходный код - github.com/utimur/React-types...
Таймкоды:
00:00 - Введение.
02:10 - Разворачиваем приложение.
03:10 - Первый компонент. Типизация пропсов. Interface CardProps
06:00 - React.FunctionComponent. React.FC
11:30 - Компонент UserList. IUser, IAddress
16:35 - Компонент UserItem.
17:55 - Типизация запроса axios. Типизация хука UseState()
20:30 - Переиспользуемый компонент List. Generics, Обобщенные типы в typescript
26:30 - Типизация событий. MouseEvents, DragEvents, ChangeEvents
34:25 - Типизация хука useRef. Неуправляемый компонент
36:00 - Типизация react-router-dom. UseHistory, useParams, BrowserRouter
44:35 - Время ставить лайки и писать комментарии =))
Поддержать меня и мой канал вы можете по ссылкам ниже.
Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469
#React #TypeScript #JavaScript 
Наука
боже, для тебя в раю уже приготовлены 2 грудастые эльфийки! тупо лайк не глядя!
😂😂😂
Ахахах)) Спасибо дружище) поднял настроение
Огромное спасибо за ролик! Разбирать его как обычно в 2-3 раза дольше, чем сама длина ролика)
Кто смотрит сейчас, вышел react-router-dom 6-той версии, синтаксис роутинга чуть изменился:
1) exact писать не надо, все роуты сразу такие
2) Вместо используем
3) На смену (его в ролике не использовали) пришёл . Все нужно обернуть в компонент
4) Компонент в теперь передаём в пропсе element как компонент
Пример кода:
5) Вместо useHistory используем useNavigate;
Пример кода:
const navigate = useNavigate();
navigate("/users");
Или можно просто установить пятую версию react-router-dom: npm i react-router-dom@5.2.0
Да, писал на 6 версии, мне зашла, не надо писать пропс router для прокладки пропсов, предсказуемое поведение и прекрасная работа с параметрами с помощью хука useParams.
А то ранее надо было hoc фишки типа props.match.params и т.д.
только что разобрался, хотел отписать , смотрю ты уже опередил на 2 месяца, а так чел спасибо)
" " users вместо user надо , а то пустая страница будет.
Спасибо!
Для тех у кого были проблемы с useParams, тип присваиваем следующим образом:
type UserItemPageParams = {
id: string;
};
После чего уже приписываем его к useParams так же как и автор видео
Спасибо, это работает. Провел небольшое расследование - почему вдруг в дженерике для хука useParams нельзя использовать интерфейс, а только тип объекта (type object), хотя ранее по видео всегда было можно, и вообще по идее это почти все одно и то же. Так вот, смотрим на определение типа useParams: export function useParams(): Params;. Далее обращаем внимание на ограничение в дженерике extends { [K in keyof Params] - как оказалось, в интерфейсе нельзя использовать вычисляемые свойства [K in keyof ...] (а в типе объекта можно). Собственно именно на это typescript и ругается таким странным образом.
спасибо
@@ray84851 Продолжайте вести наблюдения. Мы с Вами свяжемся! 🤝
Thanks
Огромное тебе спасибо бро!
Среди инфоцыган, заполнивших ютуб своим говнокодом, твой канал - просто кладец чистого знания. Спасибо тебе большое за твою прекрасную душу, что ты вкладываешь в каждый ролик. Мы ценим! Обязательно буду поддерживать канал на патреоне, как получу первую работу.
Такие комментарии наивысшая степень поддержки! Спасибо:)
Друзятки, если вы это видео будете смотреть в 2022, и дойдёте до роутинга, то знайте, что с 6-й версии react-router-domу рутов нет пропса exact, рут должен выглядеть так: и быть завернутым в .
этот канал - самый крутой по веб разработке, в рунете точно. Все остальные влогеры просто курят в стороне, имхо.
ну еще Арчаков хорошо обьясняет и делает свое дело
@@snobou12 ++ арчаков, улбитв, Минин , димыч самурай, евгееий ковальчук , верстка фрилансер по жизни и Гаврилов, это топы 2021, этот канал молодой но качество оч крутое, дай бог ему успеха
✊🏻✊🏻
@@sharkman6434 а причем тут вообще инфоциган Гаврилов? Всё что он делает, это клепает из заготовок простейшие макеты, а потом 1/3 роликов - это реклама его конторы. Не ставь таких людей в ряд с Ульби, Арчаковым и Фрилансером по жизни.
@@goodman4493 минин тот же инфоцыган, только более полезнее будет
React Typescript урок 2021. Props, Events, Router, Hooks, Requests немного продвижного комментария тебе на канал, чтобы максимум выхлопа было. Ну а дльше бесполезный текст типа а-ля лонрен ипсун-фигипсун, чтобы ранжирование сработало как надо))) В общем удачи, наблю даю за it каналом для программистов и всех видео для начинающих разработчиков фронтенд реакт разработка и вот еще тайпскрипт уроки
Просто топчик, как нашел твой канал так перестал смотреть Минина, Арчакова и прочих, пометил их как деприкейтед!)))
Хоть я и бэкенд разработчик, но обязательно поставлю лайк в поддержку канала!!!
Спасибо!)
Это лучший канал по программированию. Без воды, только по сути и то что нужно. Автору огромный респект!
а я что говорил?) этот канал - самый крутой по веб разработке, в рунете точно. Все остальные влогеры просто курят в стороне, имхо.
@@smoozydrinker172 Спасибо ребят))
Спасибо!)
@@smoozydrinker172 ещё Владилен Минин неплохой, но этот канал мне в последнее время больше нравится
До этого смотрел Ulbi TV не так часто, в основном других блогеров. Изучил TS и решил посмотреть его в связке с React. Все блогеры только инфоцыганят и больше ничего. Снимают ролики по одному React, а пишут + TS. Тут доходчиво и понятно все изложили без воды. Автору здоровья и огромное спасибо. Подпишусь пожалуй)
Да ладно, только вчера писал об этом в посте сообщества. И тут на тебе, спасибо, лучший!
Как раз изучаю сейчас typescript с react и тут вышел это видос 20 минут назад. Спасибо!
Привет давай общаться я тоже учу кстати) для работы самое то) я разработчик react
@@fallenstar358 Я тоже учусь, так что можем пообщаться
Angular tutorial 🔥
Именно такого формата видео про typescript я и хотел
О мой `Один, я в шоке.. когда ты работаешь вообще =)
Я не успеваю даже челленджи просто повторить =)))
Без сомнений один из самых коротких и всеобъемлющих роликов по React TypeScript.
Очередное видео, которое доказывает, что непревзойденный талант автора объяснять сложное за считанные минуты, доступным языком, с ходу понятным даже для неискушенной аудитории, делает вас, Тимур, абсолютно недосягаемым по результатам полезного действия.
Ребята на работе уже рекомендуют , вангую скоро будет 100к подписчиков
Комментарий для алгоритмов ютуба и поддержки автора!
Прям Вселенная угадала над чем я сейчас работаю и от чего у меня голова взорвалась. Спасибо тебе большое за такой актуальный контент.
А ты случайно не учил React и Node js? Хочу также научиться, просто не знаю откуда лучше брать информацию.
@@rabyth6871 Я Реакт сейчас учу. Ноду на потом отложил. Мой совет - это 80% теории и 20% практики, как Тимур сказал. Начинаешь с простой задачи 1.Счетчик с кнопками +1 и -1 2. Приложение с заметками 3. Приложение с заметками на полном CRUD,обязательно с апдейтом 4. То же TODO уже с модалкми 5. TODO где для криейт и апдейт идет форма с многими инпутами, чекбоксами, радиобатонном, селектом. 6. Todo приложение на useSelector 7. Todo приложение на useSelector + useContext 8. Todo с Redux и так далее. Главное довести все эти задач до своболного написания и возращаться к ним через 1-2 недели. Так ты из кратковременной памяти в долговременную будешь переносить знания и навыки. И потом на собесе на онлайн кодинге всех порвешь.
@@yuryitikhonoff9631 наоборот! 20% теории
@@yuryitikhonoff9631 спасибо огромное, но он же говорил 80% практики и 20% теории, нет?
@@rabyth6871 да, я опечатался. 80% практики
Все, теперь тоже перехожу на тайпскрипт, осталось разобраться со всеми енумами, типами, интерфейсами и дженериками
Как раз учу TS! Спасибо
Можно поправить под новую версию БравзерРоутера v6
также вместо useHistory теперь useNavigate
а вот с такой ошибкой не сталкивался?
Type 'UserItemPageParams' does not satisfy the constraint 'string | Record'.
Type 'UserItemPageParams' is not assignable to type 'Record'.
Index signature for type 'string' is missing in type 'UserItemPageParams'.
хз вообще что не так, сверяюсь с кодом из видео, различия нет
в гугле не могу найти решение. тайпскрип меня убивает казел драный
@@nenahod_nogi Да, та же проблема, у него все работает у меня такая же херня, эта же ошибка
@@Amourphys если найдешь решение, отпиши пж
const navigate = useNavigate();
() => navigate("/users")
На канале 10 тысяч!!!! Поздравляю 🥳
Наконец-то подружу знания из видоса по редакс тс и реакт тс. Теперь полная картина будет. Спасибо!
Спасибо. Перешел на просмотр только твоего канала.
Без лишних слов - нашел этот канал, подписался, через пару месяцев устроился фронтом. Лучший среди лучших :)
Продолжай в том же духе)
Вечером посмотрю, а пока держи лайк.
Прошлый ролик по ts react redux был очень полезный, уверен и этот такой же, контент топ, ты делаешь так, что все понятно, на практике потыкать и все, знания усвоились, не мусолишь по 15-20 уроков одно и тоже
Спасибо, давно ждал гайд по тс
Подача огонь! Смотрится не скучно, на одном дыхании, без напряжения
Супер, спасибо Тимур!
Чувак у тебя уникальный контент среди русскоязычных it ютуберов . Без воды , максимум полезной информации ! Пора уже делать курсы , я думаю будет много желающих! Удачи тебе !)
Спасибо дружище!) Рад слышать!) Успехов!
паддерживаю, крутой чувак!
согласен, при этом умеет как-то понятно поднести и что-то обьяснить. в отличии от, например, владилена, который будто просто бубнит себе под нос аля "ну вот существует react lazy, чето там оптимизирует вот я написал, замечательно идем дальше."
@@VSsovietя его смотрел и мне было понятно хммм...
Спасибо тебе большое !!!
,никакой воды нет,четко ,ясно, мне надо было посмотреть основу , как пишут ,где пишут ,и что активизируют , только и всего ,документацию почитаю потом, всегда так делаю , а у других открываешь и спать хочется ,лекцию читают ,ужас
Посмотрю обязательно
Вернулся к ролику, поскольку это лучший урок по react и typescript
Спасибо!)
Вырожаю огромную благодарность за твои труды!
Рукопожатный ютубер. Низкий поклон.
комментарий не глядя) но смотреть буду ; D
Ахаха, как же вовремя выходит это видео)
Это именно то, что я искал!
Контент крутой) человек подготовился, впихнул много инфы в относительно короткий промежуток времени, спасибо)
Спасибо большое, за то, что ты делаешь!
TypeScript пошел в ход)
Больше комментариев богу комментариев! Спасибо тебе добр человек :)
ооо, то что доктор прописал, спасибо, Тимур! React Typescript урок 2021. Props, Events, Router, Hooks, Requests
Благодарю!)
Как всегда познавательное и своевременное видео!! А и с 10к подписчиками!!!))
Коротко,быстро,понятно,спасибо))Кто жалуется на css,слава богу,что его тут нет:))
Спасибо)
Мозги разжижаются от количества информации, большое спасибо!:)
Как всегда вовремя подъехал бесценный контент)
Очень круто , всё по делу и без воды) Спасибо за материал и знания)
Спасибо. Максимально полезный контент без воды и прочих рассуждений.
наконец-то дошли руки до этого урока) спасибо
Спасибо большое. Очень информативно, как всегда 😃👍🔥🔥🔥
Крутой видос! Поздравляю с 10к!✨✨🎁
Мэн я благодарен тебе за это чудо которое ты для всех нас проварачиваешь из ролика в ролик!^^
Спасибо за труд и качественный контент!
Спасибо! То, что нужно! Буду смотреть позднее, но лайк по дефолту
Шикарнейшая подача материала! Помню, совсем недавно было несколько тысяч подписчиков, сейчас уже почти 30к!
Спасибо автору огромное! Формат и подача для меня - максимально удобные, учиться одно удовольствие!
Так кратко и так понятно, лучший
Отдельное спасибо за лакончиность подачи информации! Без лишней демагогии и подвисаний в размышлениях. Всё чётко и по делу.
Спасибо за труд!
Спасибо за этот курс! Поздравляю с 1️⃣0️⃣ 0️⃣0️⃣0️⃣ ‼️ Ты молодец!
Спасибо, каждый видос просто шедевр! Главное не останавливайся!!!
Большое спасибо за это видео. Побольше бы гайдов по ТайпСкрипту и Реакту!
Очень нравятся твои уроки, всегда коротко и точно по делу, нет размусоливание на пару часов с ненужной болтологией. Спасибо!
Комент от души)
Спасибо тебе, дальнейших успехов!
Годно Кеп!
Кратко и понятно рассказал о базовом TypeScript в React, спасибо!
Классный урок!!! Четко, лаконично и концентрировано🙌 Спасибо 👍
Огромное спасибо за очередное круто видео. React и typescript круто совмещаются
Ну ты просто огонь, признайся, ты читаешь мои мысли?)
Чувак круто объясняешь) Сразу по делу и без воды, продолжай в том же духе! Успехов)
Спасибо! Отличные уроки Reactjs + typescript.
Автор, добра тебе!
Спасибо БРО за ГОДНЫЙ, ПОДРОБНЫЙ, БЕСОПЛАТНЫЙ контент !!!!😎
Как же классно, что вот оно уже есть и очень классно всё объясняешь. Мне как раз для работы быстро влететь прям каэф
Как всегда топчик!!!!))))
Это просто дар, простым языком объяснять сложные вещи! побольше контента! и успеха Вам!
Спасибо Тимур за видео!!! Лучшее что есть по вэб-программированию!!!
Привет! Спасибо за видос) лучший канал по количеству информативности в секунду)
Ульби, спасибо! У тебя один из лучших каналов по программированию!
Блин, просто от души! Круто, понятно, по ходу решаешь задачки, так как библиотеки немного обновляются, просто огонь! Автору благодарность!)
коммент для продвижения! спасибо тебе 😎✌️. Я почти трудоустроился - так что скоро закину денежку))
Спасибо за отличный контент.
Топово!
Одно из самых толковых видео по TS. Полученные знания можно сразу юзать на практике. Спасибо!
Ето то что нужно!))) Спасибо тебе добрый человек)))
Как всегда крутой контент!!! Было бы еще круто запилить урок по тестированию React-Redux.
Все по делу, вез "воды". Хорошая дикция. Спасибо за курс.
21 секунду назад! Вовремя я). Ts must have
как и все другие ролики топчик! Спасибо тебе за информацию и за твой вклад в библиотеку знаний)
Классный контент спасибо за уроки очень познавательно! Успехов тебе, у тебя это получается лучше всех!
Очень сильный контент, спасибо.
И этот курс осилил! Неплохое продолжение. Ошибки уже знакомы. Легче становится и быстрее. Спасиб Тимур
Супер ультра полезно. С наскока самостоятельно понять встроенные типы в реакте нереально. Видос очень помог заложить базу в этом вопросе, благодарю 👍
Крутой курс. Спасибо за работу! Комент для продвижения
Спасибо за видео, всё очень понятно и при этом быстро)
Спасибо! Очень помогло в понимании, как работать с тайпскриптом в реакте.
Успехов и процветания каналу)
Комментарий для продвижения ролика и канала в целом, спасибо за топовое видео!
Отличный туториал! Максимально компактно, информативно, логично, понятно. Странно, почему у канала столь мало подписчиков: контент ведь шикарен! Желаю успехов в продвижению и минимум 1М+ подписчиков!
Лично я многому здесь научился, за что искренне благодарен автору :)