Делаем форму на React. Все самые сложные фичи за час

[@VorobyevAlexander]

Важное примечание к видео! На видео используется react-hook-form вероятно 6-ой версии. В 7ой версии произошли важные изменения. Чтобы код работал необходимо внести изменения. У инпутов: ref={rregister} заменить на {...register('fiieldName')} при вызове useForm const {register, handleSubmit, errors} = useForm({mode: 'onBlur'}); заменить на const {register, handleSubmit, formState: {errors}} = useForm({mode: 'onBlur'});

[@arturseu]

Спасибо бро

[@МаксимИванов-ф8р]

Ну красавчик, объяснение на высшем уровне. У тебя явно есть способности к обучению.

[@Datomezz]

Не знал что Тэон Грейджой на Реакте пишет 😂

[@liliianigthfury]

Ахахахах ))))

[@trimmtrabb7629]

Пошутил, а человек больше видео не выпускает)

[@Datomezz]

@@trimmtrabb7629 пздц, знал бы не писал :d

[@AE-bx7nm]

Спасибо за твои видео, действительно качественный контент, подходит не только для начинающих, продолжай в том же духе!)

[@ТаяКузнецова-г5ь]

Спасибо за видео. На просторах youtube часто не хватает материала для уровня чуть выше базового, а здесь освещены и непростые моменты с формами

[@sergei_sergeevu4]

Спасибо, вам большое за ваш труд. Было бы круто, если бы вы продолжили снимать видео на русском)

[@Nikitosss91]

Очень круто, жаль, что забросил. вот если бы раз в месяц бомбил бы такие видосы, со всякими сверхпопулярными компонентами... вот это контент был бы

[@strel9]

у кого не работают роуты, react-router-dom обновился и надо заменить Switch на Routes, еще component заменить на element и в фигурных скобках в элементе название роута оборачивать < /> вот : In react-router-dom v6, "Switch" is replaced by routes "Routes". You need to update the import from import { Switch, Route } from "react-router-dom"; to import { Routes ,Route } from 'react-router-dom'; You also need to update the Route declaration from to

[@denisu9286]

классное объяснение про сложные вопросы React Hook Form. Спасибо!!!

[@АлексейАлексеев-ю3ъ]

Очень крутое видео. Побольше бы таких.

[@ibragimbazarbaev5467]

У кого ошибка "TypeError: path.split is not a function in react", перепишите ref={register} на {...register('firstName')}. В новой версии библиотеки произошли изменения.

[@olegsoul6016]

Очень хороший туториал для построения формы) Единственный момент, когда я начинал смотреть, то почему-то подумал, что тут нужны только знания азов React и парочки базовых Хуков, но... как оказалось, предполагалось уверенное знание React, включая Реакт Роутер и знание библиотеки стилей и ее базового синтаксиса... В итоге далеко не все понял, но видео, очевидно, не было рассчитано на совсем начинающего React разработчика, так что наверное проблема понимания - это уже моя проблема) И да, насколько я понимаю, автор видео очень занят, ибо не отвечает на комментарии... В любом случае, спасибо за контент и буду рад другим урокам и гайдам по React.

[@Kirdaro]

Да на самом деле час потратить на документацию и все. Там много хороших примеров и все не так сложно как кажется.

[@incredible986]

Очень классный материал, спасибо большое Максим)!

[@darafrontend]

Спасибо за это видео! Профессионально и информативно. Успехов Вам!

[@Кофей-й8х]

Для тех у кого ошибка Path.split is not a function нужно поменять ref={register} на {...register('firstname')}

[@sergeysamius1128]

Спасибо, добрый человек.

[@АнтонАнтуськов-е7о]

Большое спасибо! Офигенный видос!

[@tot-medved]

Тоже думаю перейти на реакт хук форм. Спасибо за видео.

[@sombert1054]

Огромное спасибо за ваше видео, оно мне очень помогло! Лайк и подписка обязательно.

[@michaeldevichenskiy4588]

Привет! Только что подписался на вас . У вас отличный английский .

[@thedimasss]

Отличный пример работы! Спасибо

[@evgeniybudaev1690]

Классное видео! Спасибо Вам за труд!

[@ОлегПетров-п4у]

Спасибо за качественный контент! Лайк, подписка!

[@АлександрБулах-и6с]

Step3 не выводит список файлов из Dropzone! Приложение падает. Исправляем: в файле FileInput компонент Controller -> render={({onChange, onBlur, value}) поменять на render={({field: {onChange, onBlur, value} }). А чтобы исправить warning добавьте в Controller значение shouldUnregister={true}

[@olenakunina1]

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

[@ff1cer___hernandez]

@@olenakunina1на 20 версии node js, вообще не запускается репозиторий с его гита

[@maxim7603]

Спасибо, классное видео, про тестирование было бы интересно

[@suslikest3708]

Даа мощная форма, у меня как-то в такой на каком-то шаге была динамическая таблица с инпутами и крадами 😅

[@olgasinenkova478]

Привет всем из 2022! Мучалась с forwardRef и register, не работала валидация по блюру (менно с компонентов mui ). Перешла на компонент , описан в документации react hook form. Все работает!

[@ПолинаШило-й5г]

Olga, а makeStyles у вас работает?

[@olgasinenkova478]

П.С. Для валидации номера телефона тоже лучше использовать проп rules у контроллера и аналогичную функцию

[@ff1cer___hernandez]

Подскажите пожалуйста, какую версию node js вы использовали?

[@olgasinenkova478]

@@ff1cer___hernandez >=6.9.0

[@dmitriystoyanov933]

Уже немало времени занимаюсь изучением реакта, но это понимается очень тяжело. Очень много инструментов задействовано. А в целом хороший материал.

[@dmitryshilov6413]

Тема из укрока + разные гаммы: 1. Material theme ocean high contrast 2. Community material theme ocean high contrast (чуть гамма подкручена) 3. Оcean high contrast (отдельная тема, не из пака material, для любителей тёмного) gl =)

[@МихаилДжекович-л1щ]

Cпасибо мужик)

[@mk3mk3mk]

спасибо! Интересует вопрос, почему в некоторых случаях пишут файлы компонентов с расширением jsx, а в других случаях с расширением js. Ведь и там и там мы используем jsx. Что тогда меняет расширение?

[@Goddamn_Right]

1:04:59 "И вот тут интересно. Если мы сейчас оставим телефон введенным... снимем галочку..." то на 1:05:13 увидим в таблице введенный ранее номер, хотя галочка снята. Надо очищать стейт с номером телефона при снятии галочки

[@mikhailrypta4779]

Если у кого то не работает 3 шаг с файлами - замените строку render={({ onChange, onBlur, value }) => () на render={({ field: { onChange, onBlur, value } }) => ()

[@rebelliondreamer6261]

Я кстати так и сделал, но проблема в другом немного, он у меня почему-то вообще не выводит Finder (Проводник) при нажатии по карточке, для выбора файла

[@trionixchannel2435]

спасибо🤜

[@adamsden]

Thank you so much for the lesson.

[@deadwalkru]

Годно, ставлю лукас

[@armenchik_dzhan]

thank you super useful lesson, do more of these!

[@АлександрОсипов-ъ7н]

Здравствуйте! Вопрос по работе с инпутами ---Общее положение дел У меня есть коллекционные карточки Карточка с одним изображением может издаваться на разных языках Ранние выпуски карточек издавались на меньшем количестве языков ---Что хочу сделать Хочу сделать учет карточек не только по конкретному изображению, но ещё и по языкам ---Как я представляю хранение карточек ИД - итерируемое ИД_выпуска - Номер выпуска, к которому принадлежит карточка Название_карточки - скажем так... наименование того, что изображено Языки - текст, состоящий из "0" и "1", где каждому языку соответствует конкретная позиция. "1" означает, что есть карточка с этим языком ---Как я это вижу на странице На странице отображается инпуты по количеству "1" в поле "Языки", куда я записываю количество карточек. Нажимаю на кнопку сохранить. Данные сохраняются. ---Вопрос Как эти импуты описать и как к ним обращаться для получения данных?

[@strongcat844]

2 раз делаю подписку и на кого то спасибо за видео

[@Elator11777]

А репо будет на гитхабе?

[@YuriiKratser]

Уважаемая публика, сейчас нужно yupResolver доставать из @hookform/resolvers/yup, а ошибки получать из formState:{ errors }

[@lordunitaz]

Спасибо!!

[@ЛюбовьЛенская-и3ц]

Спасибо!

[@kulivers1998]

Спасибо!

[@oleksandrluchytskyi6867]

а useCallback() там не нужні?

[@happyhomo4423]

Как добавить емодзи единорога и коробки?

[@YuriiKratser]

Уважаемый автор видео, обнови его пожалуйста. Твой код устарел безнадежно. Для кастомизации сейчас нужно использовать Controller.

[@ПавелСедой-р5п]

Очень круто. Будут ещё видео?)

[@VorobyevAlexander]

Ни как не могу победить чекбокс есть/нет телефон для актуальной версии react-hook-form как исправить код в видео?

[@mnsr_il4763]

В FormControlLabel ваш control должен выглядеть следующим образом: _control={}_

[@chikada3301]

Было бы неплохо, если бы вы записали пример формы, но, которая сохраняется в json.

[@memphis2234]

Подскажите какой плагин для форматирования используется либо какой язык выбран в форматировании

[@strel9]

prettier скорее всего

[@iCars-ua]

Привет 🙋‍♂️ А подскажи плиз extension который autocompleting css ты используешь vscode :)

[@viktok555]

Здравствуйте, Максим🙌 Можно связаться с Вами в соцсетях? Спасибо 👍

[@evloev4821]

изначально на показе страницы, 1:14 вроде маска +1 вводилась автоматом, только ради этого смотрел видео на перемотке, а в итоге про маску ни слово

[@МихайлоАндрейців-з9у]

Привет!спасибо за видео Реакт форм хук, revalidate mode onChange, при ошибке когда вводишь, текст не отображает, будто зависает, и в стейт не сохраняется

[@adletibraimov2967]

Бро, каким расширением пользуешься для форматирования?

[@saveliy.d_13]

За 2 года произошло столько изменений, что большая часть того, что объясняется в видео, уже не работает. Даже не буду расписывать, слишком длинно получится. Так что совсем не для новичков, потому что надо хорошо понимать, что вообще происходит, уметь разбираться в документации. По сути просто идея, которую наполовину надо реализовать самому. Если хотите, чтобы код работал, найдите другое видео)

[@ayaznamazov8328]

можешь скинуть видео

[@voiceofzimbabwe7174]

Привет. Как сейчас ай ти сфера в Швеции? Сколько в среднем может получить тестировщик в год?

[@gigor1433]

Почему бы не использовать контекст форм и не сделать самостоятельные Input'ы, которые бы всё необходимое брали из контекста? Не надо будет в каждый элемент передавать 100500 пропсов

[@alexshostka3229]

Круто. Спасибо за инфо. Подскажи, что за тема на VSCode? Такую же хочу поставить

[@vlatypov]

В компоненте PrimaryButton ошибочка c rest параметрами -> надо вот так export const PrimaryButton = ({children, ...props}) =>{}

[@lirrr6555]

Спасибо за видео. Заметил, что у вас при onblur событии, даже если поле не начинали заполнять, появляется ошибка. Подскажите, как можно в react-hook-form отключить onblur валидацию пустых полей до попытки submit?

[@andrewS85]

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

[@artemgum4517]

Интересно получилось) Жаль нет репозитория, с сервером поиграться.

[@ievgeniibielkin]

Спасибо! Видео было полезным. Интересно как можно передать состояние формы ( formState из useForm ) за пределы формы. Например, если нужно дизейблить кнопки в модальном окне или показывать индикатор выполнения, когда форма сабмитится

[@АндрейЧерников-н2щ]

любой state manager решит твою проблему

[@KalinachenkoTV]

Уже разобрался, спасибо за часть с файлами и драг енд дроп, жаль что ссылку забыл добавить. Кст почему на своем англ канале так часто видео и с ссылками на гитхаб а тут так???? Вроде как руская аудитория тоже понемножку набирается)

[@mr.younger]

Очень годный туториал, но есть парочку моментов, которые, было бы вообще здорово, если вы рассмотрите как развитие данного туториала. Вторая, более короткая серия так скажем. 1. Зачем было добавлять в проект пакет "material-ui" который deprecated и уже минимум 2 года не поддерживается? Тем более что в проекте он задействован не был. 2. Поработать со страницей result, выводя в таблице не field name, а более осмысленный title для каждой строки. 3. Недоработка с телефоном и флагом показывающим его. 3.1. Отображение статуса hasPhone на странице result? Если и отображать, то только случай false, когда телефон не был введён, и более осмысленно чем false. 3.2. Введя телефон, затем, заполняя форму по второму кругу, отключить если флаг hasPhone, то в итоговой форме телефон всё равно отобразиться. 4. Возможность перезагрузить страницу на любом этапе из формы. Если этап будет отличен от первого, то это почти 100% необходимость делать start over чтобы заполнить предыдущие шаги. Или начинать с первого этапа, или хранить промежуточное состояние в localStorage. Не считая первого пункта, кейсы то реальные, и недопустимы в production приложении. В остальном шикарно.

[@Elator11777]

material-ui depricated?? Откуда такая инфа? Как не использовали, если все текстинпуты, иконки оттуда взяты были?

[@mr.younger]

​@@Elator11777 специально в кавычки название пакета взял. www.npmjs.com/package/material-ui вот. Красным по розовому написано. 2:52 вот здесь он добавляется в проект. И именно этот пакет не был использован. Про @material-ui/core я ни слова не сказал :)

[@Elator11777]

@@mr.younger Спасибо. Не знал.

[@azimabdullayev9832]

Согласен, что в production не допустимы. Но тут в production никто заливать не собирался, это ведь туториал, причем очень хороший. твои доработки это лишь дело техники.

[@Котвсапогах-с4д]

Что у тебя за темя в vs code

[@snd5543]

селектов не хватает)

[@tetianashevchuk8114]

У меня вообще не работает чекбокс и контролер формы. Есть кто с 2023?

[@danielkhachaturian]

Какая тема у тебя?

[@v.demchenko]

Устрели библиотеки. Нужно все перебирать, переустанавливать.

[@ВячеславСаврацкий]

по факту, если разобраться, в создании отдельных компонентов по типу (Form, Input и тп) только ради стилей нету необходимости. просто используйте styled-components или подобные подходы, так мы не перегружаем систему "глупыми" компонентами, а еще код пишется быстрее и чище. имхо

[@AlexSizovRun]

Чел ну вернись, правда

[@AlexSizovRun]

Не ну ты вернись

[@МаксимИванов-ф8р]

Зачем ты меня вводишь)

[@b-ars07]

Максим, привет! А можно ссылочку на репозиторий с сервером?

[@ОксанаГаращенко-д5р]

с тайпскриптом заняло бы 2 часа)

[@lordunitaz]

FileInput очень сложный для понимания. Такие макароны....

[@Александрндреевич]

26:50 /[a-z]/i/ Вроде так можно

[@Лемми-ц8ш]

Кабину проще

[@АлександрЛитвинов-в1и]

ПОЛ ВИДОСА НЕ ПО ТЕМЕ БЛЯТЬ И ТАЙМКОДОВ ДАЖЕ НЕТ - ЖИРНЫЙ ДИЗЛАЙК!!!

[@НікітаКорчемний-г4ч]

видео 2020 года если что, автор давно забыл про канал, а в то время таймкодов даже не было

[@apexnuts9785]

Очень много лишних библиотек, для новичков ничего не понятно

[@ammoney159]

Самый плохой курс, который я когда нибудь видел. Если сами не знаете, почему снимать курсы. Дизлайк.