React TypeScript ПОЛНЫЙ КУРС 2021. Props, Events, Router, Hooks, Requests.
Вставка
- Опубліковано 15 чер 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 минин тот же инфоцыган, только более полезнее будет
Это лучший канал по программированию. Без воды, только по сути и то что нужно. Автору огромный респект!
а я что говорил?) этот канал - самый крутой по веб разработке, в рунете точно. Все остальные влогеры просто курят в стороне, имхо.
@@smoozydrinker172 Спасибо ребят))
Спасибо!)
@@smoozydrinker172 ещё Владилен Минин неплохой, но этот канал мне в последнее время больше нравится
До этого смотрел Ulbi TV не так часто, в основном других блогеров. Изучил TS и решил посмотреть его в связке с React. Все блогеры только инфоцыганят и больше ничего. Снимают ролики по одному React, а пишут + TS. Тут доходчиво и понятно все изложили без воды. Автору здоровья и огромное спасибо. Подпишусь пожалуй)
Как раз изучаю сейчас typescript с react и тут вышел это видос 20 минут назад. Спасибо!
Привет давай общаться я тоже учу кстати) для работы самое то) я разработчик react
@@fallenstar358 Я тоже учусь, так что можем пообщаться
Прям Вселенная угадала над чем я сейчас работаю и от чего у меня голова взорвалась. Спасибо тебе большое за такой актуальный контент.
А ты случайно не учил 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 react redux был очень полезный, уверен и этот такой же, контент топ, ты делаешь так, что все понятно, на практике потыкать и все, знания усвоились, не мусолишь по 15-20 уроков одно и тоже
Отдельное спасибо за лакончиность подачи информации! Без лишней демагогии и подвисаний в размышлениях. Всё чётко и по делу.
Наконец-то подружу знания из видоса по редакс тс и реакт тс. Теперь полная картина будет. Спасибо!
Без сомнений один из самых коротких и всеобъемлющих роликов по React TypeScript.
Очередное видео, которое доказывает, что непревзойденный талант автора объяснять сложное за считанные минуты, доступным языком, с ходу понятным даже для неискушенной аудитории, делает вас, Тимур, абсолютно недосягаемым по результатам полезного действия.
На канале 10 тысяч!!!! Поздравляю 🥳
Чувак у тебя уникальный контент среди русскоязычных it ютуберов . Без воды , максимум полезной информации ! Пора уже делать курсы , я думаю будет много желающих! Удачи тебе !)
Спасибо дружище!) Рад слышать!) Успехов!
паддерживаю, крутой чувак!
согласен, при этом умеет как-то понятно поднести и что-то обьяснить. в отличии от, например, владилена, который будто просто бубнит себе под нос аля "ну вот существует react lazy, чето там оптимизирует вот я написал, замечательно идем дальше."
@@VSsovietя его смотрел и мне было понятно хммм...
Хоть я и бэкенд разработчик, но обязательно поставлю лайк в поддержку канала!!!
Спасибо!)
Без лишних слов - нашел этот канал, подписался, через пару месяцев устроился фронтом. Лучший среди лучших :)
Продолжай в том же духе)
Крутой видос! Поздравляю с 10к!✨✨🎁
Ребята на работе уже рекомендуют , вангую скоро будет 100к подписчиков
Очень нравятся твои уроки, всегда коротко и точно по делу, нет размусоливание на пару часов с ненужной болтологией. Спасибо!
Посмотрю обязательно
Одно из самых толковых видео по TS. Полученные знания можно сразу юзать на практике. Спасибо!
Как раз учу TS! Спасибо
Спасибо тебе большое !!!
,никакой воды нет,четко ,ясно, мне надо было посмотреть основу , как пишут ,где пишут ,и что активизируют , только и всего ,документацию почитаю потом, всегда так делаю , а у других открываешь и спать хочется ,лекцию читают ,ужас
Контент крутой) человек подготовился, впихнул много инфы в относительно короткий промежуток времени, спасибо)
Подача огонь! Смотрится не скучно, на одном дыхании, без напряжения
Да ладно, только вчера писал об этом в посте сообщества. И тут на тебе, спасибо, лучший!
Блин, просто от души! Круто, понятно, по ходу решаешь задачки, так как библиотеки немного обновляются, просто огонь! Автору благодарность!)
Все, теперь тоже перехожу на тайпскрипт, осталось разобраться со всеми енумами, типами, интерфейсами и дженериками
Ахаха, как же вовремя выходит это видео)
Это именно то, что я искал!
Спасибо. Отличный туториал, без воды, все по делу. Не для новичков, для тех кто имеет опыт с Реакт, но не работал с TypeScript.
Ulbi прекрати, ты заставляешь меня отвлекаться от работы на пробном периоде. Конечно же шутка, продолжай. :D Как всегда лайк сразу, просмотр потом, за чашкой чаю
Комментарий для алгоритмов ютуба и поддержки автора!
Спасибо автору огромное! Формат и подача для меня - максимально удобные, учиться одно удовольствие!
ооо, то что доктор прописал, спасибо, Тимур! React Typescript урок 2021. Props, Events, Router, Hooks, Requests
Благодарю!)
TypeScript пошел в ход)
Годно Кеп!
Просто топчик, как нашел твой канал так перестал смотреть Минина, Арчакова и прочих, пометил их как деприкейтед!)))
Angular tutorial 🔥
Мозги разжижаются от количества информации, большое спасибо!:)
Это просто дар, простым языком объяснять сложные вещи! побольше контента! и успеха Вам!
Спасибо. Максимально полезный контент без воды и прочих рассуждений.
Как всегда познавательное и своевременное видео!! А и с 10к подписчиками!!!))
Супер насыщеное видео, никакой тягомотины, наоборот замедляю скорость чтобы вкурить!!! Молодец!!! Спасибо за твой труд!!!
Вечером посмотрю, а пока держи лайк.
Спасибо БРО за ГОДНЫЙ, ПОДРОБНЫЙ, БЕСОПЛАТНЫЙ контент !!!!😎
Спасибо. Перешел на просмотр только твоего канала.
Коротко,быстро,понятно,спасибо))Кто жалуется на css,слава богу,что его тут нет:))
Спасибо)
О мой `Один, я в шоке.. когда ты работаешь вообще =)
Я не успеваю даже челленджи просто повторить =)))
Именно такого формата видео про typescript я и хотел
Топово!
Спасибо, давно ждал гайд по тс
Спасибо за этот курс! Поздравляю с 1️⃣0️⃣ 0️⃣0️⃣0️⃣ ‼️ Ты молодец!
React Typescript урок 2021. Props, Events, Router, Hooks, Requests немного продвижного комментария тебе на канал, чтобы максимум выхлопа было. Ну а дльше бесполезный текст типа а-ля лонрен ипсун-фигипсун, чтобы ранжирование сработало как надо))) В общем удачи, наблю даю за it каналом для программистов и всех видео для начинающих разработчиков фронтенд реакт разработка и вот еще тайпскрипт уроки
Добрый вечер. Хочу выразить благодарность за контент. Нравится уровень сложности подачи материала, без дополнительной читки сразу можно не разобраться что может выступать стимулом к изучению материала, но общая концепция ясна и проста, помогает в обучении. Желаю удачи!
Спасибо! То, что нужно! Буду смотреть позднее, но лайк по дефолту
комментарий не глядя) но смотреть буду ; D
Тимур, желаю тебе процветания во всех сферах жизни! Здоровья тебе и твоим близким! Спасибо за труды!
Спасибо 🙏 и вам желаю здоровья и успехов!
Каждые 5-10 минут ищу кнопку "лайк", и вижу, что уже поставила. Нужно больше лайков)) прекрасный структурированный материал, спасибо 🙏
Кратко и понятно рассказал о базовом TypeScript в React, спасибо!
Вырожаю огромную благодарность за твои труды!
Шикарнейшая подача материала! Помню, совсем недавно было несколько тысяч подписчиков, сейчас уже почти 30к!
Как же классно, что вот оно уже есть и очень классно всё объясняешь. Мне как раз для работы быстро влететь прям каэф
Рукопожатный ютубер. Низкий поклон.
Спасибо большое ! Ваши уроки это большая ценность для меня! Продолжайте !
Благодарю вас!)
Очень круто , всё по делу и без воды) Спасибо за материал и знания)
Как всегда вовремя подъехал бесценный контент)
React и Typescript это супер! Поздравляю с 10к подписчиков! Летим к 100 тысячам :)
За пол года плюс 40к подписоты
100к)
Подскажите, что в VSCode устанавливали для сниппетов чтобы разворачивать сразу компонент. Я уже устал о руки писать их)
Чувак круто объясняешь) Сразу по делу и без воды, продолжай в том же духе! Успехов)
Все по делу, вез "воды". Хорошая дикция. Спасибо за курс.
Комент от души)
Спасибо за TS!
наконец-то дошли руки до этого урока) спасибо
Благодарю за контент!
Насчёт объявления arrow functional component с дженериком, я так объявляю
const FC = (props: ITestProps)
чтобы не отходить от использования синтаксиса стрелочных функций
Наверное это самое лучшее канал, которое может передать качественное информацию за короткое время
Спасибо большое!
Супер, спасибо Тимур!
Тимур, огромное спасибо за проделанную работу над этим роликом, за весь канал в целом! Очень доходчиво, в меру сложно, супер!
Ну ты просто огонь, признайся, ты читаешь мои мысли?)
Мэн я благодарен тебе за это чудо которое ты для всех нас проварачиваешь из ролика в ролик!^^
Вернулся к ролику, поскольку это лучший урок по react и typescript
Спасибо!)
Чувак, ты восхитителен. Не просто хорош, а восхитителен. Работаю разработчиком 6 лет, никогда не слышал такой хорошей подачи материала в рунете. Не вздумай останавливаться, черт возьми!
Еще коммент и благодарность за труд, опыт и знания, которыми делишься.
Очень ценю! Спасибо!
Спасибо за ролик, всё классно объяснил и показал. Наверное ты единственный, кто так хорошо подходит к работе
БОЖЕЕ! ТЫ ЛУЧШИЙ! НУ ПРОСТО АХРИНЕТЬ КАК ПОДРОБНО! Я ЕЩЕ СТОЛЬКО ИНТЕРЕСНОГО НАШЕЛ, УЗНАЛ И ПРИМЕНИЛ!
ЛАЙК! 100 ИЗ 10 ТОПОВЫХ УРОКОВ! БЛАГОДАРЮ.
Ульби, спасибо! У тебя один из лучших каналов по программированию!
Коммент в поддержку, видео просто топ, отдельное спс за generic interface и типы ивентов:)
Спасибо!
Больше комментариев богу комментариев! Спасибо тебе добр человек :)
Отличный туториал! Максимально компактно, информативно, логично, понятно. Странно, почему у канала столь мало подписчиков: контент ведь шикарен! Желаю успехов в продвижению и минимум 1М+ подписчиков!
Лично я многому здесь научился, за что искренне благодарен автору :)
Спасибо тебе, дальнейших успехов!
Сразу скажу спасибо! и поставлю лайк, уверен контент как всегда🔥🔥🔥, Успехов во всем!
Курс Пушка !!!
Как всегда крутой контент!!! Было бы еще круто запилить урок по тестированию React-Redux.
ТОП!
Большое спасибо за это видео. Побольше бы гайдов по ТайпСкрипту и Реакту!
Крутой курс. Спасибо за работу! Комент для продвижения
Долго привыкал к твоей манере подачи информации, но теперь могу сказать: не зря. Всё четко по полочкам, никакой воды и самое важное - после курса про React от А до Я c TypeScript проблем не было вообще, кроме как мои кривые руки(пара забытых импортов или скобок). Прогресс на лицо и это очень радует. Спасибо большое за твой труд 😌👍
🤝🤝👏
Так кратко и так понятно, лучший
Привет! Спасибо за видос) лучший канал по количеству информативности в секунду)
Просто все просто, как он просто объясняет ? У тебя талант чел. Не болей