Важное примечание к видео! На видео используется 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'});
у кого не работают роуты, 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
У кого ошибка "TypeError: path.split is not a function in react", перепишите ref={register} на {...register('firstName')}. В новой версии библиотеки произошли изменения.
Очень хороший туториал для построения формы) Единственный момент, когда я начинал смотреть, то почему-то подумал, что тут нужны только знания азов React и парочки базовых Хуков, но... как оказалось, предполагалось уверенное знание React, включая Реакт Роутер и знание библиотеки стилей и ее базового синтаксиса... В итоге далеко не все понял, но видео, очевидно, не было рассчитано на совсем начинающего React разработчика, так что наверное проблема понимания - это уже моя проблема) И да, насколько я понимаю, автор видео очень занят, ибо не отвечает на комментарии... В любом случае, спасибо за контент и буду рад другим урокам и гайдам по React.
Step3 не выводит список файлов из Dropzone! Приложение падает. Исправляем: в файле FileInput компонент Controller -> render={({onChange, onBlur, value}) поменять на render={({field: {onChange, onBlur, value} }). А чтобы исправить warning добавьте в Controller значение shouldUnregister={true}
Пиздец один из самых полезных роликов по реакт хук форм, жаль автор забросил канал. Да по всему фронту бы такие уроки сделать)) и курсы не нужны, автору реально респект, давай возвращайся
Привет всем из 2022! Мучалась с forwardRef и register, не работала валидация по блюру (менно с компонентов mui ). Перешла на компонент , описан в документации react hook form. Все работает!
Если у кого то не работает 3 шаг с файлами - замените строку render={({ onChange, onBlur, value }) => () на render={({ field: { onChange, onBlur, value } }) => ()
Я кстати так и сделал, но проблема в другом немного, он у меня почему-то вообще не выводит Finder (Проводник) при нажатии по карточке, для выбора файла
1:04:59 "И вот тут интересно. Если мы сейчас оставим телефон введенным... снимем галочку..." то на 1:05:13 увидим в таблице введенный ранее номер, хотя галочка снята. Надо очищать стейт с номером телефона при снятии галочки
Тема из укрока + разные гаммы: 1. Material theme ocean high contrast 2. Community material theme ocean high contrast (чуть гамма подкручена) 3. Оcean high contrast (отдельная тема, не из пака material, для любителей тёмного) gl =)
спасибо! Интересует вопрос, почему в некоторых случаях пишут файлы компонентов с расширением jsx, а в других случаях с расширением js. Ведь и там и там мы используем jsx. Что тогда меняет расширение?
Здравствуйте! Вопрос по работе с инпутами ---Общее положение дел У меня есть коллекционные карточки Карточка с одним изображением может издаваться на разных языках Ранние выпуски карточек издавались на меньшем количестве языков ---Что хочу сделать Хочу сделать учет карточек не только по конкретному изображению, но ещё и по языкам ---Как я представляю хранение карточек ИД - итерируемое ИД_выпуска - Номер выпуска, к которому принадлежит карточка Название_карточки - скажем так... наименование того, что изображено Языки - текст, состоящий из "0" и "1", где каждому языку соответствует конкретная позиция. "1" означает, что есть карточка с этим языком ---Как я это вижу на странице На странице отображается инпуты по количеству "1" в поле "Языки", куда я записываю количество карточек. Нажимаю на кнопку сохранить. Данные сохраняются. ---Вопрос Как эти импуты описать и как к ним обращаться для получения данных?
Очень годный туториал, но есть парочку моментов, которые, было бы вообще здорово, если вы рассмотрите как развитие данного туториала. Вторая, более короткая серия так скажем. 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 специально в кавычки название пакета взял. www.npmjs.com/package/material-ui вот. Красным по розовому написано. 2:52 вот здесь он добавляется в проект. И именно этот пакет не был использован. Про @material-ui/core я ни слова не сказал :)
Согласен, что в production не допустимы. Но тут в production никто заливать не собирался, это ведь туториал, причем очень хороший. твои доработки это лишь дело техники.
Уже разобрался, спасибо за часть с файлами и драг енд дроп, жаль что ссылку забыл добавить. Кст почему на своем англ канале так часто видео и с ссылками на гитхаб а тут так???? Вроде как руская аудитория тоже понемножку набирается)
Спасибо! Видео было полезным. Интересно как можно передать состояние формы ( formState из useForm ) за пределы формы. Например, если нужно дизейблить кнопки в модальном окне или показывать индикатор выполнения, когда форма сабмитится
Привет!спасибо за видео Реакт форм хук, revalidate mode onChange, при ошибке когда вводишь, текст не отображает, будто зависает, и в стейт не сохраняется
За 2 года произошло столько изменений, что большая часть того, что объясняется в видео, уже не работает. Даже не буду расписывать, слишком длинно получится. Так что совсем не для новичков, потому что надо хорошо понимать, что вообще происходит, уметь разбираться в документации. По сути просто идея, которую наполовину надо реализовать самому. Если хотите, чтобы код работал, найдите другое видео)
Спасибо за видео. Заметил, что у вас при onblur событии, даже если поле не начинали заполнять, появляется ошибка. Подскажите, как можно в react-hook-form отключить onblur валидацию пустых полей до попытки submit?
Почему бы не использовать контекст форм и не сделать самостоятельные Input'ы, которые бы всё необходимое брали из контекста? Не надо будет в каждый элемент передавать 100500 пропсов
по факту, если разобраться, в создании отдельных компонентов по типу (Form, Input и тп) только ради стилей нету необходимости. просто используйте styled-components или подобные подходы, так мы не перегружаем систему "глупыми" компонентами, а еще код пишется быстрее и чище. имхо
Не знал что Тэон Грейджой на Реакте пишет 😂
Ахахахах ))))
Пошутил, а человек больше видео не выпускает)
@@trimmtrabb7629 пздц, знал бы не писал :d
Важное примечание к видео! На видео используется 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'});
Спасибо бро
Очень круто, жаль, что забросил. вот если бы раз в месяц бомбил бы такие видосы, со всякими сверхпопулярными компонентами... вот это контент был бы
у кого не работают роуты, 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
Спасибо, вам большое за ваш труд.
Было бы круто, если бы вы продолжили снимать видео на русском)
Ну красавчик, объяснение на высшем уровне. У тебя явно есть способности к обучению.
классное объяснение про сложные вопросы React Hook Form. Спасибо!!!
Спасибо за твои видео, действительно качественный контент, подходит не только для начинающих, продолжай в том же духе!)
У кого ошибка "TypeError: path.split is not a function in react", перепишите ref={register} на {...register('firstName')}.
В новой версии библиотеки произошли изменения.
Спасибо за видео. На просторах youtube часто не хватает материала для уровня чуть выше базового, а здесь освещены и непростые моменты с формами
Очень крутое видео. Побольше бы таких.
Для тех у кого ошибка Path.split is not a function нужно поменять ref={register} на {...register('firstname')}
Спасибо, добрый человек.
Очень хороший туториал для построения формы) Единственный момент, когда я начинал смотреть, то почему-то подумал, что тут нужны только знания азов React и парочки базовых Хуков, но... как оказалось, предполагалось уверенное знание React, включая Реакт Роутер и знание библиотеки стилей и ее базового синтаксиса... В итоге далеко не все понял, но видео, очевидно, не было рассчитано на совсем начинающего React разработчика, так что наверное проблема понимания - это уже моя проблема) И да, насколько я понимаю, автор видео очень занят, ибо не отвечает на комментарии... В любом случае, спасибо за контент и буду рад другим урокам и гайдам по React.
Да на самом деле час потратить на документацию и все. Там много хороших примеров и все не так сложно как кажется.
Спасибо за это видео! Профессионально и информативно. Успехов Вам!
Очень классный материал, спасибо большое Максим)!
Тоже думаю перейти на реакт хук форм. Спасибо за видео.
Даа мощная форма, у меня как-то в такой на каком-то шаге была динамическая таблица с инпутами и крадами 😅
Уже немало времени занимаюсь изучением реакта, но это понимается очень тяжело. Очень много инструментов задействовано. А в целом хороший материал.
Step3 не выводит список файлов из Dropzone! Приложение падает. Исправляем: в файле FileInput компонент Controller -> render={({onChange, onBlur, value}) поменять на render={({field: {onChange, onBlur, value} }). А чтобы исправить warning добавьте в Controller значение shouldUnregister={true}
спасибо - это капец - у всех остальных что ли и так получилось - имею в виду тех кто уже пытался это воплотить на более поздних версиях реакта
@@olenakunina1на 20 версии node js, вообще не запускается репозиторий с его гита
Большое спасибо! Офигенный видос!
Уважаемая публика, сейчас нужно yupResolver доставать из @hookform/resolvers/yup, а ошибки получать из formState:{ errors }
Спасибо!!
Спасибо!
Отличный пример работы! Спасибо
Пиздец один из самых полезных роликов по реакт хук форм, жаль автор забросил канал. Да по всему фронту бы такие уроки сделать)) и курсы не нужны, автору реально респект, давай возвращайся
у него другой канал, вбей в поиск - Maksim Ivanov
Привет! Только что подписался на вас . У вас отличный английский .
Огромное спасибо за ваше видео, оно мне очень помогло! Лайк и подписка обязательно.
Классное видео! Спасибо Вам за труд!
Привет всем из 2022! Мучалась с forwardRef и register, не работала валидация по блюру (менно с компонентов mui ). Перешла на компонент , описан в документации react hook form. Все работает!
Olga, а makeStyles у вас работает?
П.С. Для валидации номера телефона тоже лучше использовать проп rules у контроллера и аналогичную функцию
Подскажите пожалуйста, какую версию node js вы использовали?
@@ff1cer___hernandez >=6.9.0
Спасибо за качественный контент! Лайк, подписка!
Если у кого то не работает 3 шаг с файлами - замените строку render={({ onChange, onBlur, value }) => () на render={({ field: { onChange, onBlur, value } }) => ()
Я кстати так и сделал, но проблема в другом немного, он у меня почему-то вообще не выводит Finder (Проводник) при нажатии по карточке, для выбора файла
спасибо🤜
Спасибо, классное видео, про тестирование было бы интересно
1:04:59 "И вот тут интересно. Если мы сейчас оставим телефон введенным... снимем галочку..." то на 1:05:13 увидим в таблице введенный ранее номер, хотя галочка снята. Надо очищать стейт с номером телефона при снятии галочки
Тема из укрока + разные гаммы:
1. Material theme ocean high contrast
2. Community material theme ocean high contrast (чуть гамма подкручена)
3. Оcean high contrast (отдельная тема, не из пака material, для любителей тёмного)
gl =)
Cпасибо мужик)
спасибо! Интересует вопрос, почему в некоторых случаях пишут файлы компонентов с расширением jsx, а в других случаях с расширением js. Ведь и там и там мы используем jsx. Что тогда меняет расширение?
Thank you so much for the lesson.
thank you super useful lesson, do more of these!
Здравствуйте!
Вопрос по работе с инпутами
---Общее положение дел
У меня есть коллекционные карточки
Карточка с одним изображением может издаваться на разных языках
Ранние выпуски карточек издавались на меньшем количестве языков
---Что хочу сделать
Хочу сделать учет карточек не только по конкретному изображению, но ещё и по языкам
---Как я представляю хранение карточек
ИД - итерируемое
ИД_выпуска - Номер выпуска, к которому принадлежит карточка
Название_карточки - скажем так... наименование того, что изображено
Языки - текст, состоящий из "0" и "1", где каждому языку соответствует конкретная позиция. "1" означает, что есть карточка с этим языком
---Как я это вижу на странице
На странице отображается инпуты по количеству "1" в поле "Языки", куда я записываю количество карточек. Нажимаю на кнопку сохранить. Данные сохраняются.
---Вопрос
Как эти импуты описать и как к ним обращаться для получения данных?
Годно, ставлю лукас
Круто. Спасибо за инфо. Подскажи, что за тема на VSCode? Такую же хочу поставить
Бро, каким расширением пользуешься для форматирования?
2 раз делаю подписку и на кого то спасибо за видео
селектов не хватает)
Очень круто. Будут ещё видео?)
А репо будет на гитхабе?
Очень годный туториал, но есть парочку моментов, которые, было бы вообще здорово, если вы рассмотрите как развитие данного туториала. Вторая, более короткая серия так скажем.
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 приложении.
В остальном шикарно.
material-ui depricated?? Откуда такая инфа? Как не использовали, если все текстинпуты, иконки оттуда взяты были?
@@Elator11777 специально в кавычки название пакета взял.
www.npmjs.com/package/material-ui вот. Красным по розовому написано.
2:52 вот здесь он добавляется в проект. И именно этот пакет не был использован. Про @material-ui/core я ни слова не сказал :)
@@mr.younger Спасибо. Не знал.
Согласен, что в production не допустимы. Но тут в production никто заливать не собирался, это ведь туториал, причем очень хороший. твои доработки это лишь дело техники.
Спасибо!
Было бы неплохо, если бы вы записали пример формы, но, которая сохраняется в json.
Уже разобрался, спасибо за часть с файлами и драг енд дроп, жаль что ссылку забыл добавить. Кст почему на своем англ канале так часто видео и с ссылками на гитхаб а тут так???? Вроде как руская аудитория тоже понемножку набирается)
Уважаемый автор видео, обнови его пожалуйста. Твой код устарел безнадежно. Для кастомизации сейчас нужно использовать Controller.
У меня вообще не работает чекбокс и контролер формы. Есть кто с 2023?
Интересно получилось) Жаль нет репозитория, с сервером поиграться.
Спасибо! Видео было полезным.
Интересно как можно передать состояние формы ( formState из useForm ) за пределы формы. Например, если нужно дизейблить кнопки в модальном окне или показывать индикатор выполнения, когда форма сабмитится
любой state manager решит твою проблему
Привет 🙋♂️
А подскажи плиз extension который autocompleting css ты используешь vscode :)
изначально на показе страницы, 1:14 вроде маска +1 вводилась автоматом, только ради этого смотрел видео на перемотке, а в итоге про маску ни слово
Привет.
Как сейчас ай ти сфера в Швеции?
Сколько в среднем может получить тестировщик в год?
Привет!спасибо за видео
Реакт форм хук, revalidate mode onChange, при ошибке когда вводишь, текст не отображает, будто зависает, и в стейт не сохраняется
За 2 года произошло столько изменений, что большая часть того, что объясняется в видео, уже не работает. Даже не буду расписывать, слишком длинно получится. Так что совсем не для новичков, потому что надо хорошо понимать, что вообще происходит, уметь разбираться в документации. По сути просто идея, которую наполовину надо реализовать самому. Если хотите, чтобы код работал, найдите другое видео)
можешь скинуть видео
Чел ну вернись, правда
Не ну ты вернись
Подскажите какой плагин для форматирования используется либо какой язык выбран в форматировании
prettier скорее всего
Спасибо за видео. Заметил, что у вас при onblur событии, даже если поле не начинали заполнять, появляется ошибка. Подскажите, как можно в react-hook-form отключить onblur валидацию пустых полей до попытки submit?
Наверное уже не актуально) напишу для тех кто будет читать - можно использовать onChange
Почему бы не использовать контекст форм и не сделать самостоятельные Input'ы, которые бы всё необходимое брали из контекста? Не надо будет в каждый элемент передавать 100500 пропсов
В компоненте PrimaryButton ошибочка c rest параметрами -> надо вот так export const PrimaryButton = ({children, ...props}) =>{}
Здравствуйте, Максим🙌 Можно связаться с Вами в соцсетях? Спасибо 👍
Так а репозиторий будет?
А то тут ошибки вылазят😅
по факту, если разобраться, в создании отдельных компонентов по типу (Form, Input и тп) только ради стилей нету необходимости. просто используйте styled-components или подобные подходы, так мы не перегружаем систему "глупыми" компонентами, а еще код пишется быстрее и чище. имхо
Как добавить емодзи единорога и коробки?
а useCallback() там не нужні?
Ни как не могу победить чекбокс есть/нет телефон для актуальной версии react-hook-form как исправить код в видео?
В FormControlLabel ваш control должен выглядеть следующим образом:
_control={}_
Устрели библиотеки. Нужно все перебирать, переустанавливать.
Что у тебя за темя в vs code
Зачем ты меня вводишь)
с тайпскриптом заняло бы 2 часа)
Какая тема у тебя?
26:50 /[a-z]/i/ Вроде так можно
FileInput очень сложный для понимания. Такие макароны....
Кабину проще
Максим, привет! А можно ссылочку на репозиторий с сервером?
Слишком все запутано. Можно было все сделать проще чтоб все понятно было
Очень много лишних библиотек, для новичков ничего не понятно
ПОЛ ВИДОСА НЕ ПО ТЕМЕ БЛЯТЬ И ТАЙМКОДОВ ДАЖЕ НЕТ - ЖИРНЫЙ ДИЗЛАЙК!!!
видео 2020 года если что, автор давно забыл про канал, а в то время таймкодов даже не было
Самый плохой курс, который я когда нибудь видел. Если сами не знаете, почему снимать курсы. Дизлайк.