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

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);
};

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&lt;HTMLInputElement&gt;) =&gt; void' is not assignable to type 'ChangeEventHandler&lt;HTMLInputElement&gt;'

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 глянул несколько раз в свободное время. В общем - спасибо большое!

Vitaliy

06.08.22 в 15:07

Как у тебя выводится объект на страницу вместо JSON ? 28:36

Иван

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 так как старый курс непонятен

Рекомендации:

Владилен Минин

47 248 просмотров •

19 июля 2022 г.

Владилен Минин

30 378 просмотров •

22 октября 2021 г.

Владилен Минин

12 909 просмотров •

5 марта 2020 г.

Владилен Минин

150 711 просмотров •

17 марта 2020 г.

Владилен Минин

145 122 просмотра •

24 марта 2020 г.

Владилен Минин

59 230 просмотров •

30 марта 2020 г.

Владилен Минин

76 764 просмотра •

21 апреля 2020 г.

Владилен Минин

208 708 просмотров •

16 июня 2020 г.

showinfo=0 controls=1 rel=0 iv_load_policy=3