React и TypeScript - Быстрый Курс [2022]

у кого конструкция
const changeHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
выдаёт ошибку, используйте:
const changeHandler = (e: React.FormEvent<HTMLInputElement>) => {
const newValue = e.currentTarget.value;
setValue(newValue);
};

Владилен! а как же Vue и TypeScript??

А как программа называется в которой он пишет!? Заранее благодарю!!!

А в ВС коде както можно сделать чтоб подтягивались классы с tailwind. Может росширения есть какое то?? или в ВС коде нельзя?

на моменте 17 :13 ошибка у меня на все три строки tailwind. Все сделал как на видео. Автор самые важные моменты вы просто проскакиваете, я минут 40 по секундам видео ловил что и откуда куда копируете !!! Чуть по медленнее, вначале проект создать не смог, копался в интернете и там сказано что имя проекта должны содержать только маленькие буквы. Очень важные и основные моменты теряются и не говорится. Другие ваши видео хорошие, а это увы какое то скоростное и куда то спешите !!!

Думал быстрый курс по typescript в react, а оказалось по tailwind - у. Кликбейт!

почему он пишет справа не лево :D

на 1 00 47 Автоматически импорты добавились. У меня автоматически ничего не добавляется(( Из за этого кучу времени убил на поиски ошибок.
Кто знает как сделать автоматические импорты на VS Code?

Офигенное видео, рекомендую. Все примеры в видео рабочие, в отличие от сферических примеров многих других видеоблогеров. Единственное, мне пришлось настраивать tailwind по другому (через postcss не заработало, может из-за того что на винде)

Как ты избавился от папки node_modules?

С уходом facebook такая же судьба будет ждать react, к примеру серьезные виждеты по приеме оплаты, криптообмене, купли-продаже на нем не напишешь, тормоза капитальные (как у Django+Python), поэтому берется только чистый JS без всяких фреймов .

Ни кому type script сейчас не нужен!!! Отсталая технология. Зачем втюхивать неликвид. Возможности JS по сей день не раскрыты полностью в web 3

Владилен, большое спасибо!!!

с громкостью беда

Свойство "React" объявлено, но его значение не было прочитано. Подскажите, что делать в таком случае, хотя весь код до 25 минуты работал, еще когда заходишь в index.css вот такое дает 'Unknown at rule @tailwind' хотя стили работают, после 25 минуты видео нету div со стилями и контентом на странице

Спасибо вам большое за видео!!!

Автор прежде чем подавать материал, разберись, надо ли импортировать react или нет. Уточни какие сборщики требуют, или линтеры. И зачем он вообще нужен. Не надо лить воду. Подготовся получше.

звук сильно тихий по сравнению с другими на ютубе, блогерами разработчиками, а так спасибо за контент

Привет, у меня почему то выдаёт ошибки!?
Хотя писал всё тоже самое.

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;'

Большое спасибо! Как всегда - отличный урок, все лаконично, понятно!

Спасибо большое, очень помог

https://youtu.be/OJ16BaPC6VI?t=5073 onCreate( response)у меня не прошло заменил на onCreate(productData)

Спасибо! Хороший урок!

Что за плагин который показывает черным цветом тип значению по типу ( value: true) ?

за Slim Shady отдеьный лайк)

там метод data который работает в jq, но ты не подключал библиотек. АААААААААААААА я не понимаю

Не могу никак установить tailwing, все один в один как в видео. Классы игнорируются

некорректно сделан компонент modal в useContext, при создании двух и более модалок, открываются все сразу

https://youtu.be/OJ16BaPC6VI?t=4551 KeybordEvent почему-то выдавал ошибку (хотя и работал). Немного погуглив поменял на ChangeEvent

Спасибо за материал. Доступно, наглядно и практично )

Полезный урок, спасибо.

45:58 я бы еще библиотеку показал как заюзать, типа classnames или clsx, с tailwind особенно полезно, без нее почти не возможно написать красиво стили.

Отличный ролик, только у меня почему-то на 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>'.
Мб я что-то упустил в процессе?

Отличный урок!!! Спасибо огромное! Благодаря этому уроку я наконец-то познакомилась с Реактом!!! Просто супер! Все абсолютно понятно

Владилен, приветствую и благодарю за Ваш труд! Хочу сказать замечание по поводу звука: в начале ролика звук отличный, когда начинается демонстрация экрана - становится ватный и бубнящий. Нет предела совершенству - звук тоже многое значит)

почему так тихооо

Вместо KeyboardEvent используйте ChangeEvent.

Абсолютно бесполезный курс

Таймкод плиз

Подскажите плз, кто сталкивался с таким, что при установке 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)
на видео иакого нет, делал всё так же.

что за плагин? который дописывает типы, пропсы и дети )

каеф

Владилен, пора обновить браузер)

Круто! Урок очень понравился после урока по ангулар, вначале сам делал потом смотрел как нужно! Не сделали только что бы таргет автоматически был на инпут после открытия модального окна!

Офигенный урок! Обожаю React+Typescript

на VSCode было бы лучше, так как эти Серые подсказки сбивают с толку

Отличные уроки но звук ужас. В колонках не возможно слушать, сплошной бубнешь. Сделать нормальный звук не так сложно же. Уже 22 год а звук не меняется в видео

Твой курс очень помог. Спасибо!

Очень классно. Несколько месяцев назад смотрел похожий урок по react, но без остальных технологий (tailwindsCss, typescript), а так же он был немного устарелый и не везде уже тот код работал, пришлось ещё самому копаться чтобы понять что не так. После чего я занялся вёрсткой и обычными элементами по типу модальных окон, Аккордионов на чистом js. Сейчас всему этому научился, решил взяться снова за реакт и твой урок очень помог освежить память и также освоить новую технологию TailwindsCss и подтянуть Typescript, на нем у меня опыта тоже не было, только твой урок по Typescript глянул несколько раз в свободное время. В общем - спасибо большое!

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

А что лучше изучить TSX или JSX?

Топ видосы но есть одна проблема, они очень тихие

Черт подери, сижу второй вечер. Подскажите, люди добрые, как получить один продукт(объект) из АПИ, а не все в массиве. ТС ругается: Аргумент типа "{}" нельзя назначить параметру типа "Iproduct

Офигенный получился урок, особенно обрадовался за роутер -6, спасибо огромное за работу

Здравствуйте!
А используя React как фронт-энд - возможно сделать чат-рулетку?
И если да, то что использовать в качестве серверного софта?

Как в России смотреть ютуб? впн в хроме устанавливаю не работают

можно больше таких видео !!! спасибо очень доступно

Владилен ,спасибо за это видео , сейчас как раз занимаюсь связкой React/TS . Небольшой(немного дурацкий вопрос и не по теме видео) . Можно ли REST и GRAPHQL использовать вместе в одном проекте?

Странно, у меня API возвращает только один параметр id, а весь объект( Может уже что то изменили там.

Почему используется axios, а не просто fetch?

Очень рад, что нашел этот курс. Все непонятки решены, все по полочкам. Проект допилю с переходом на страницу товара. Спасибо, Владилен!

Владлен, спасибо Вам большое. Сейчас работаю над функционалом для админки WordPress. React для этой задачи очень хорошо подходит. Благодаря вам довольно быстро удалось во всем разобраться. Сам-бы очень долго разбирался.

Лично мне было-бы интересно послушать о том, как использовать React в связке с WP. Я имею ввиду, что админка WP ведь тоже на React во многом работает. Логично, наверное, создавать решение в рамках админки WP используя React подключенный там и, создавать свой функционал как дополнение к основной части системы. Чтобы не было как сейчас, что я создаю отдельное приложение, которое обращается к API WP и через форму сохраняет данные, а чтобы это было полноценной частью системы.

Прошу прощения за сумбур :)

Вот это турбо-подача и в конце с контекстом прям финальный аккорд, добивающий мозг. Респект! х)

Отличный курс, но Владлен пожалуйста звук. Делайте его больше, громче чтобы было. А то на полной мощности даже плохо слышно

Очень тихо слышно

Спасибо! Благодаря тебе попал в компанию 4 месяца назад. Сейчас просто же смотрю твои видеоролики для повторения и для самореализации. Продолжай в том же духе!!

Втопил как царь!
Спасибо тебе большое за качественный, понятный и доступный контент!!!
Единственное маленькое замечание, запись видео тихая, пришлось на колонку вывести чтобы всё нормально прослушать.)

Ни ап, а эп, потому что ап это вверх, а эр-это приложение.

лайк от вебмастера и гуру по сео - СЕООНЛИ

только гений может дать ссылку на ссылку, ну и Минин что в принципе одно и тоже

Спасибо за твой труд! (React и TypeScript)

Отличное видео, спасибо за труд

Супер

Очень крутой урок! Огромное спасибо!

Блин, а можно как то сделать папку нод модульс глобально? Потому что она постоянно грузится в проект, а тут вроде как ее и нету

А как насчет типизации компонента React.FC<интерфейс пропсов>, излишне?

Урок не для новичков, после 20й минуты вообще ничего не ясно

привет всем , очень понравился урок , все понятно и бзе воды ))) может кто-то подскажет какое-то похожие видео ?

Эээй, Владилен, а как же JSONPlaceholder..

На моменте с try-catch в fetchProducts настораживает одинаковое имя у константы и стейта. И там и там error. Думается мне, такого стоило бы избегать, во избежание путаницы, что есть что.

Ни хрена не понятно, но очень интересно

Спасибо за урок. Хотя было проблема с tailwindcss не как не устанавливалась, писал стили в ручную в отдельных фаилах. И решил писать все на JS, есть еще одна проблема при создании использовал fetch и не добавлялся новый элемент. А так все супер, много красивых приемов.!!

Офигенный урок! Основные основы в одном месте))

Спасибо

Лол кек, реакт + ts за 1.5 часа) Дальше что? Квантовая физика за 3 часа? А нет забыл, курс за 200к

Неужели кто-то еще не умеет описывать интерфейсы и типы? Typescript предоставляет куда больше возможностей, чем эта рутина

React Native было бы круто посмотреть )

Огромная тебе благодарность за твой труд. Очень хочется разобраться с реактом.редаксом.тайпскриптом. Благодаря тебе это будет быстрее. Учу уже год фронт. Уверен после войны мы все трудоустроимся. Молимся за Мир во всем Мире.

Спасибо, Владлен)

Большое спасибо за курс. Еще было бы очень замечательно увидеть тайм-коды, т.к. я уверен, что еще не раз буду возвращаться к этому видео в поисках ответов.

Супер, спасибо!! Классное видео!

У кого нет снипетта для React компоненты можете в пустом файле компоненты написать rafce и нажать энтер (пишу в vsCode)

Спасибо за урок! А будет полный курс по реакт, как ты делал года 2 назад?

Спасибо, за быстрый курс, поддерживаю комментарии про продвинутый реакт :)

Опять начинается... туториалы, как писать НЕ НАДО. За такое написание надо гнать в шею: всё свалено в одну кучу.

Все круто не хватает только как eslint подключить а настроить а так все норм!!!! Спасибо

Стандартом (2022) является Next & Typescript))

Очень круто, правда! Но можно пожалуйста немного погромче говорить, а то я на всю громкость выкрутил, чтобы что-то услышать.

Владилен , хотелось бы новый курс по JS так как старый курс непонятен