React и TypeScript - Быстрый Курс [2022]
81 060 просмотров • 26 июля 2022 г.

249 тыс. подписчиков
Исходники React тут: https://t.me/js_by_vladilen/491
Получить профессию Frontend разработчика -
https://bit.ly/3bzTr5X
Сделать 5 проектов на JavaScript - https://bit.ly/3OGfJ47
Я в соц сетях:
Telegram: https://t.me/js_by_vladilen
VK: https://vk.com/vladilen.minin
Instagram: https://instagram.com/vladilen.minin
Мои паблики по JavaScript:
Telegram: https://t.me/result_school_it
VK: https://vk.com/result.school
Instagram: https://www.instagram.com/result.school.it
JavaScript cообщества:
Discord: https://discord.gg/jscommunity
Telegram: https://t.me/js_by_vladilen_chat
Подробнее узнать об обучении в Result School -
https://bit.ly/3QTbUKQ
Бесплатный курс HTML & CSS - https://bit.ly/3NnFUvs
Roadmap по каналу:
https://vladilen.notion.site/Roadmap-YouTube-0b917095c1ec424e9574c2ede36efab9
React JS - быстрый курс 2022. В ролике так же разберем, как React работает с TypeScript
3 746
0
C_i_K_a_D_a
06.09.22 в 10:10
Владилен! а как же Vue и TypeScript??
#Хештеги
06.09.22 в 08:16
А как программа называется в которой он пишет!? Заранее благодарю!!!
Roman Krojs
05.09.22 в 18:32
А в ВС коде както можно сделать чтоб подтягивались классы с tailwind. Может росширения есть какое то?? или в ВС коде нельзя?
Башир Мусаев
05.09.22 в 16:51
на моменте 17 :13 ошибка у меня на все три строки tailwind. Все сделал как на видео. Автор самые важные моменты вы просто проскакиваете, я минут 40 по секундам видео ловил что и откуда куда копируете !!! Чуть по медленнее, вначале проект создать не смог, копался в интернете и там сказано что имя проекта должны содержать только маленькие буквы. Очень важные и основные моменты теряются и не говорится. Другие ваши видео хорошие, а это увы какое то скоростное и куда то спешите !!!
Светлана Светлана
04.09.22 в 14:19
Думал быстрый курс по typescript в react, а оказалось по tailwind - у. Кликбейт!
Kawaki
03.09.22 в 19:05
почему он пишет справа не лево :D
Aleksandr Kobelev
31.08.22 в 13:37
на 1 00 47 Автоматически импорты добавились. У меня автоматически ничего не добавляется(( Из за этого кучу времени убил на поиски ошибок.
Кто знает как сделать автоматические импорты на VS Code?
Uladzimir F
31.08.22 в 09:03
Офигенное видео, рекомендую. Все примеры в видео рабочие, в отличие от сферических примеров многих других видеоблогеров. Единственное, мне пришлось настраивать tailwind по другому (через postcss не заработало, может из-за того что на винде)
user1936
30.08.22 в 20:07
Как ты избавился от папки node_modules?
E M
28.08.22 в 19:13
С уходом facebook такая же судьба будет ждать react, к примеру серьезные виждеты по приеме оплаты, криптообмене, купли-продаже на нем не напишешь, тормоза капитальные (как у Django+Python), поэтому берется только чистый JS без всяких фреймов .
E M
28.08.22 в 19:08
Ни кому type script сейчас не нужен!!! Отсталая технология. Зачем втюхивать неликвид. Возможности JS по сей день не раскрыты полностью в web 3
Ghost
28.08.22 в 12:37
Владилен, большое спасибо!!!
Xaxage
28.08.22 в 12:07
с громкостью беда
Леха Догадаев
27.08.22 в 18:15
Свойство "React" объявлено, но его значение не было прочитано. Подскажите, что делать в таком случае, хотя весь код до 25 минуты работал, еще когда заходишь в index.css вот такое дает 'Unknown at rule @tailwind' хотя стили работают, после 25 минуты видео нету div со стилями и контентом на странице
Татьяна
27.08.22 в 16:06
Спасибо вам большое за видео!!!
Rodion Antonichev
25.08.22 в 22:34
Автор прежде чем подавать материал, разберись, надо ли импортировать react или нет. Уточни какие сборщики требуют, или линтеры. И зачем он вообще нужен. Не надо лить воду. Подготовся получше.
Сергей Юрьевич
24.08.22 в 15:28
звук сильно тихий по сравнению с другими на ютубе, блогерами разработчиками, а так спасибо за контент
Vladislav Sepp
24.08.22 в 13:06
Привет, у меня почему то выдаёт ошибки!?
Хотя писал всё тоже самое.
const changeHandler = (event: React.KeyboardEvent<HTMLInputElement>) => {
setValue(event.target.value)
}
return (
<form onSubmit={submitHandler}>
<input type="text" className="border py-2 px-4 mb-2 w-full outline-0" placeholder="Enter product title..." value={value} onChange={changeHandler}/>
<button type="submit" className="py-2 px-4 border bg-yellow-400 hover:text-white">Create</button>
</form>
)
Error:
TS2339: Property 'value' does not exist on type 'EventTarget'.
TS2322: Type '(event: React.KeyboardEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLInputElement>'
Anna K
23.08.22 в 18:19
Большое спасибо! Как всегда - отличный урок, все лаконично, понятно!
Nurlan Mehdiyev
23.08.22 в 14:15
Спасибо большое, очень помог
Srg M
23.08.22 в 13:41
https://youtu.be/OJ16BaPC6VI?t=5073 onCreate( response)у меня не прошло заменил на onCreate(productData)
Майя Белорусова
23.08.22 в 12:44
Спасибо! Хороший урок!
Danya Wyse
22.08.22 в 18:12
Что за плагин который показывает черным цветом тип значению по типу ( value: true) ?
9I_c_Tpy6
22.08.22 в 10:54
за Slim Shady отдеьный лайк)
Назар Зубрик
22.08.22 в 09:12
там метод data который работает в jq, но ты не подключал библиотек. АААААААААААААА я не понимаю
mordaKota
20.08.22 в 14:00
Не могу никак установить tailwing, все один в один как в видео. Классы игнорируются
SxS
19.08.22 в 20:33
некорректно сделан компонент modal в useContext, при создании двух и более модалок, открываются все сразу
Рустам Ахметов
19.08.22 в 15:14
https://youtu.be/OJ16BaPC6VI?t=4551 KeybordEvent почему-то выдавал ошибку (хотя и работал). Немного погуглив поменял на ChangeEvent
Евгений Данилюк
19.08.22 в 11:02
Спасибо за материал. Доступно, наглядно и практично )
Павел Александров
18.08.22 в 06:47
Полезный урок, спасибо.
Сергей
17.08.22 в 12:51
45:58 я бы еще библиотеку показал как заюзать, типа classnames или clsx, с tailwind особенно полезно, без нее почти не возможно написать красиво стили.
DancingStar
17.08.22 в 12:15
Отличный ролик, только у меня почему-то на 1:15:24 возникает ошибка, связанная с типизацией: Property 'value' does not exist on type 'EventTarget'. Прописал напрямую (event.target as HTMLInputElement).value, вроде пофиксилось, но уже дальше возникает ошибка в onChange:
Type '(event: React.KeyboardEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLInputElement>'.
Types of parameters 'event' and 'event' are incompatible.
Type 'ChangeEvent<HTMLInputElement>' is missing the following properties from type 'KeyboardEvent<HTMLInputElement>': altKey, charCode, ctrlKey, code, and 11 more.ts(2322)
index.d.ts(2254, 9): The expected type comes from property 'onChange' which is declared here on type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
Мб я что-то упустил в процессе?
Татьяна Молчанова
17.08.22 в 09:09
Отличный урок!!! Спасибо огромное! Благодаря этому уроку я наконец-то познакомилась с Реактом!!! Просто супер! Все абсолютно понятно
Иван Луганский
16.08.22 в 08:27
Владилен, приветствую и благодарю за Ваш труд! Хочу сказать замечание по поводу звука: в начале ролика звук отличный, когда начинается демонстрация экрана - становится ватный и бубнящий. Нет предела совершенству - звук тоже многое значит)
Robert Gizelo
15.08.22 в 15:46
почему так тихооо
Wołodymyr Czekulajew
15.08.22 в 09:21
Вместо KeyboardEvent используйте ChangeEvent.
Евгений Черник
15.08.22 в 08:28
Абсолютно бесполезный курс
MrUnknownman
14.08.22 в 20:27
Таймкод плиз
Jake Grier
13.08.22 в 21:58
Подскажите плз, кто сталкивался с таким, что при установке tailwind куча "WARN EBADENGINE"? -
`npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'amqplib@0.5.2',
npm WARN EBADENGINE required: { node: '>=0.8 <=9' },
npm WARN EBADENGINE current: { node: 'v18.7.0', npm: '8.17.0' }
npm WARN EBADENGINE }`
13 vulnerabilities (3 moderate, 9 high, 1 critical)
на видео иакого нет, делал всё так же.
Назар Зубрик
12.08.22 в 13:02
что за плагин? который дописывает типы, пропсы и дети )
Андрей Хмара
11.08.22 в 10:04
каеф
Александр Белл
09.08.22 в 05:59
Владилен, пора обновить браузер)
Anton Onoprienko
08.08.22 в 21:38
Круто! Урок очень понравился после урока по ангулар, вначале сам делал потом смотрел как нужно! Не сделали только что бы таргет автоматически был на инпут после открытия модального окна!
В Б
08.08.22 в 21:24
Офигенный урок! Обожаю React+Typescript
eazy e
08.08.22 в 20:59
на VSCode было бы лучше, так как эти Серые подсказки сбивают с толку
Николай Белоусов
08.08.22 в 15:11
Отличные уроки но звук ужас. В колонках не возможно слушать, сплошной бубнешь. Сделать нормальный звук не так сложно же. Уже 22 год а звук не меняется в видео
Happy Damage
08.08.22 в 07:06
Твой курс очень помог. Спасибо!
Litan
08.08.22 в 06:35
Очень классно. Несколько месяцев назад смотрел похожий урок по react, но без остальных технологий (tailwindsCss, typescript), а так же он был немного устарелый и не везде уже тот код работал, пришлось ещё самому копаться чтобы понять что не так. После чего я занялся вёрсткой и обычными элементами по типу модальных окон, Аккордионов на чистом js. Сейчас всему этому научился, решил взяться снова за реакт и твой урок очень помог освежить память и также освоить новую технологию TailwindsCss и подтянуть Typescript, на нем у меня опыта тоже не было, только твой урок по Typescript глянул несколько раз в свободное время. В общем - спасибо большое!
Иван
06.08.22 в 07:43
А что лучше изучить TSX или JSX?
Иван
06.08.22 в 07:20
Топ видосы но есть одна проблема, они очень тихие
Владислав Хорохорин
05.08.22 в 20:10
Черт подери, сижу второй вечер. Подскажите, люди добрые, как получить один продукт(объект) из АПИ, а не все в массиве. ТС ругается: Аргумент типа "{}" нельзя назначить параметру типа "Iproduct
Uchqun 3
05.08.22 в 18:54
Офигенный получился урок, особенно обрадовался за роутер -6, спасибо огромное за работу
Follow Trend
05.08.22 в 18:32
Здравствуйте!
А используя React как фронт-энд - возможно сделать чат-рулетку?
И если да, то что использовать в качестве серверного софта?
Denis
05.08.22 в 12:14
Как в России смотреть ютуб? впн в хроме устанавливаю не работают
Ірина Гаїбова
04.08.22 в 16:31
можно больше таких видео !!! спасибо очень доступно
Александр -
03.08.22 в 18:53
Cucumber
03.08.22 в 12:29
Владилен ,спасибо за это видео , сейчас как раз занимаюсь связкой React/TS . Небольшой(немного дурацкий вопрос и не по теме видео) . Можно ли REST и GRAPHQL использовать вместе в одном проекте?
MrDilord
03.08.22 в 10:28
Странно, у меня API возвращает только один параметр id, а весь объект( Может уже что то изменили там.
MrDilord
03.08.22 в 08:18
Почему используется axios, а не просто fetch?
Николай Балабанов
03.08.22 в 05:37
Очень рад, что нашел этот курс. Все непонятки решены, все по полочкам. Проект допилю с переходом на страницу товара. Спасибо, Владилен!
Andrey
02.08.22 в 18:23
Владлен, спасибо Вам большое. Сейчас работаю над функционалом для админки WordPress. React для этой задачи очень хорошо подходит. Благодаря вам довольно быстро удалось во всем разобраться. Сам-бы очень долго разбирался.
Лично мне было-бы интересно послушать о том, как использовать React в связке с WP. Я имею ввиду, что админка WP ведь тоже на React во многом работает. Логично, наверное, создавать решение в рамках админки WP используя React подключенный там и, создавать свой функционал как дополнение к основной части системы. Чтобы не было как сейчас, что я создаю отдельное приложение, которое обращается к API WP и через форму сохраняет данные, а чтобы это было полноценной частью системы.
Прошу прощения за сумбур :)
Lev & Dev
02.08.22 в 15:51
Вот это турбо-подача и в конце с контекстом прям финальный аккорд, добивающий мозг. Респект! х)
Виталий Пузанов
02.08.22 в 13:19
Отличный курс, но Владлен пожалуйста звук. Делайте его больше, громче чтобы было. А то на полной мощности даже плохо слышно
Kolya
02.08.22 в 10:06
Очень тихо слышно
Roman Riezanov
02.08.22 в 10:03
Спасибо! Благодаря тебе попал в компанию 4 месяца назад. Сейчас просто же смотрю твои видеоролики для повторения и для самореализации. Продолжай в том же духе!!
Владимир Свириденко
02.08.22 в 07:35
Втопил как царь!
Спасибо тебе большое за качественный, понятный и доступный контент!!!
Единственное маленькое замечание, запись видео тихая, пришлось на колонку вывести чтобы всё нормально прослушать.)
MisterGear One
02.08.22 в 03:11
Ни ап, а эп, потому что ап это вверх, а эр-это приложение.
Антон Шавермин
02.08.22 в 02:59
лайк от вебмастера и гуру по сео - СЕООНЛИ
V
01.08.22 в 20:45
только гений может дать ссылку на ссылку, ну и Минин что в принципе одно и тоже
Олег Петров
01.08.22 в 15:03
Спасибо за твой труд! (React и TypeScript)
Игорь Белозор
01.08.22 в 14:21
Отличное видео, спасибо за труд
Катя Катенька
01.08.22 в 12:04
Супер
Nikolas Smakovsky
31.07.22 в 20:35
Очень крутой урок! Огромное спасибо!
Вася Про #Scrlrd
31.07.22 в 18:49
Блин, а можно как то сделать папку нод модульс глобально? Потому что она постоянно грузится в проект, а тут вроде как ее и нету
Serg
31.07.22 в 14:09
А как насчет типизации компонента React.FC<интерфейс пропсов>, излишне?
131ZIL
31.07.22 в 10:40
Урок не для новичков, после 20й минуты вообще ничего не ясно
Ірина Гаїбова
31.07.22 в 05:13
привет всем , очень понравился урок , все понятно и бзе воды ))) может кто-то подскажет какое-то похожие видео ?
Coltrane Crowley
31.07.22 в 03:44
Эээй, Владилен, а как же JSONPlaceholder..
Jkol Hg
30.07.22 в 22:20
На моменте с try-catch в fetchProducts настораживает одинаковое имя у константы и стейта. И там и там error. Думается мне, такого стоило бы избегать, во избежание путаницы, что есть что.
Bobby Brown
30.07.22 в 21:31
Ни хрена не понятно, но очень интересно
Фесенко Александр
30.07.22 в 19:59
Спасибо за урок. Хотя было проблема с tailwindcss не как не устанавливалась, писал стили в ручную в отдельных фаилах. И решил писать все на JS, есть еще одна проблема при создании использовал fetch и не добавлялся новый элемент. А так все супер, много красивых приемов.!!
Алексей Андреев
30.07.22 в 16:12
Офигенный урок! Основные основы в одном месте))
Andrey Li
30.07.22 в 14:36
Спасибо
Сергей
30.07.22 в 13:37
Лол кек, реакт + ts за 1.5 часа) Дальше что? Квантовая физика за 3 часа? А нет забыл, курс за 200к
ilusa's GamePub
30.07.22 в 13:22
Неужели кто-то еще не умеет описывать интерфейсы и типы? Typescript предоставляет куда больше возможностей, чем эта рутина
Олег Борисов
30.07.22 в 12:27
React Native было бы круто посмотреть )
Learning IT
30.07.22 в 11:53
Огромная тебе благодарность за твой труд. Очень хочется разобраться с реактом.редаксом.тайпскриптом. Благодаря тебе это будет быстрее. Учу уже год фронт. Уверен после войны мы все трудоустроимся. Молимся за Мир во всем Мире.
Дима Голубь
30.07.22 в 09:54
Спасибо, Владлен)
Vadim Kiryanov
30.07.22 в 08:15
Большое спасибо за курс. Еще было бы очень замечательно увидеть тайм-коды, т.к. я уверен, что еще не раз буду возвращаться к этому видео в поисках ответов.
Виталий Марданов
30.07.22 в 06:37
Супер, спасибо!! Классное видео!
Владимир Свириденко
29.07.22 в 19:39
У кого нет снипетта для React компоненты можете в пустом файле компоненты написать rafce и нажать энтер (пишу в vsCode)
Gleb Krylov
29.07.22 в 16:24
Спасибо за урок! А будет полный курс по реакт, как ты делал года 2 назад?
Alesia Labocka
29.07.22 в 15:22
Спасибо, за быстрый курс, поддерживаю комментарии про продвинутый реакт :)
Александр Подкидышев
29.07.22 в 11:39
Опять начинается... туториалы, как писать НЕ НАДО. За такое написание надо гнать в шею: всё свалено в одну кучу.
Николай Молодожон
29.07.22 в 10:51
Все круто не хватает только как eslint подключить а настроить а так все норм!!!! Спасибо
Ali Aliev
29.07.22 в 08:59
Стандартом (2022) является Next & Typescript))
Концыбко Дмитрий
29.07.22 в 08:59
Очень круто, правда! Но можно пожалуйста немного погромче говорить, а то я на всю громкость выкрутил, чтобы что-то услышать.
Abdugafur
29.07.22 в 08:40
Владилен , хотелось бы новый курс по JS так как старый курс непонятен
Рекомендации:
17 240 просмотров •
17 августа 2022 г.
98 622 просмотра •
17 августа 2022 г.
16 116 просмотров •
31 июля 2022 г.
41 878 просмотров •
8 июля 2022 г.
58 245 просмотров •
14 июля 2022 г.
26 025 просмотров •
24 июня 2022 г.
20 736 просмотров •
17 июня 2022 г.
78 728 просмотров •
26 мая 2022 г.
50 216 просмотров •
21 апреля 2022 г.
35 849 просмотров •
16 апреля 2022 г.
22 588 просмотров •
8 апреля 2022 г.
71 042 просмотра •
7 апреля 2022 г.
37 050 просмотров •
1 апреля 2022 г.
21 461 просмотр •
25 марта 2022 г.
52 346 просмотров •
18 марта 2022 г.
27 764 просмотра •
24 декабря 2021 г.
38 565 просмотров •
11 марта 2022 г.
17 468 просмотров •
7 марта 2020 г.
18 337 просмотров •
3 апреля 2020 г.
125 832 просмотра •
9 апреля 2020 г.
1 686 085 просмотров •
5 мая 2020 г.
35 041 просмотр •
7 мая 2020 г.
34 530 просмотров •
13 мая 2020 г.
20 920 просмотров •
15 мая 2020 г.
46 341 просмотр •
4 июня 2020 г.
67 856 просмотров •
30 июня 2020 г.
Dmitri
07.09.22 в 07:43
у кого конструкция
const changeHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
выдаёт ошибку, используйте:
const changeHandler = (e: React.FormEvent<HTMLInputElement>) => {
const newValue = e.currentTarget.value;
setValue(newValue);
};