31. Уроки React JS - onClick, ref, VirtualDOM

Подписаться 182 тыс.

Просмотров 127 тыс.

50% 1

🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.i...
Back-end
it-incubator.i...
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_s...
Ну что, самураи, пора нажимать на кнопки ;)
Для этого давайте отдадим кнопке callback-функцию с помощью атрибута onClick, и эта функция сработает при клике на кнопку, да, всё верно))
Немного узнаем про ref (старайтесь вообще его избегать, я научу, как))) Но знать о нём нужно всё равно. Сегодня проще делается этот ref, чем раньше, поэтому забываем про все предыдущие способы))
Ну и в кратце начну вам рассказывать про VirtualDOM)) В кратце) Все обычно с этого начинают, а я этим Virtual DOM заканчивать буду курс) Лол))
Оставайтесь с нами ;) Фшух-фшух!
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
* Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutra.dimych
#reactJS #практика #примеры #уроки #курс

Опубликовано:

27 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 633

@serjioborisov6750 5 лет назад

Я бекэнд разработчик, и имея печальный опыт работы разработки фронта ещё на олдскульных фреймворках, я решил навсегда завязать с попытками дать фронту ещё один шанс. Но этот курс и зажигательный стиль изложения Димыча - вдохновили меня на изучение этой темы. Спасибо огромное! Жду каждое видео. Есть много других курсов по Реакту, может быть более академичные или нагруженные. Но этот стоит смотреть даже просто ради искрящегося энтузиазма автора. Не останавливайся, бро!

@ITKAMASUTRA 5 лет назад

круууууто, спасибо за добрые и мотивационные слова!!! Не останавлюсь!! А вот скину себя кабалу сейчас аутсорсинговую - так налягу втройне!!!))

@SiriusBlackNuar 5 лет назад

Такя же фигня со мной! )))

@alexua9027 5 лет назад

Бекэнд проще?

@garniktadevosyan2007 4 года назад

@@ITKAMASUTRA Димыч ты красавчик .Если бы не ты я так и не изучал би React так спокойно и от души.Я даже могу сказать что твои видосы намного лучше online платных курсов.Ты одновременно говоришь много секретиков,нюансов но и иногда пишешь код не объясняя его подробно и при этом советуешь нам прочитать об этом в других источниках,короче развиваешь нас,ты как друг учишь нас .Ты супер человек.Cпасибо тебе огромное,много счастья

@diperps4969 4 года назад

я тоже решил отказаться от фронтдендовских фреймворках, но когда дело дошло до проекта, я понял, что с jquery все плохо, одни блятские калбеки уже задолбали

@АлександрАфанасьев-к7н 6 месяцев назад

Димыч, спасибо! Сейчас 24 год смотрю курс! Закончу с ними и пойду в инкубатор. Желание огромное

@xikien427 2 месяца назад

Привет как утебя ты как у тя устроился ?

@Багвматрицегребанойреальности 5 лет назад

Вот это кстати очень полезная инфа про то что стандартные методы обращения к элементам JS не стоит использовать, так как работаем с DOM деревом не напрямую, а через виртуальный DOM

@socrat5354 4 года назад

В Реакте мы работаем не с домом, а с Домом 2.)))

@yaroslavzef7267 3 года назад

@@socrat5354 Дом 2, построй свое реакт приложение.

@mikalai_root 3 года назад

@@yaroslavzef7267 а в качестве социальнобезответсвеных девушек почему-то там разработчики)))

@legenda9792 3 года назад

@@yaroslavzef7267 ахахаххах

@ДанилДмитриев-я5м Год назад

как успехи

@Jenny-s9x2f 5 лет назад

Сколько курсов смотрела, ни в одном не сказали про ref. Ни в одном. Так что низкий поклон и аригато!)

@СергійАлєксєєвич 3 года назад

Как успехи спустя год?)

@Jenny-s9x2f 3 года назад

@@СергійАлєксєєвич Работаю. Правда теперь не на реакте, а на ангуляре :)

@СергійАлєксєєвич 3 года назад

@@Jenny-s9x2f супер!)

@zloy_ax8496 3 года назад

@@Jenny-s9x2f А чистый JS сильно нужен (на собесах при старте и в работе)?

@Jenny-s9x2f 3 года назад

@@zloy_ax8496 верстальщиком разве что. Когда делают сайты под вордпресс или битрикс. Нужен все равно и чистый js и фреймворк

@mariia6820 4 года назад

Самое крутое ощущение,когда получается сделать самостоятельно все задания!Вы лучший!:)

@ДанилДмитриев-я5м Год назад

как успехи?

@8kingov8alexey8 3 года назад

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

@131ZIL 2 года назад

У кого ошибка 'React' is not defined no-undef, тот наслушался советчиков в начале курса о том что не нужно в новой версии импортировать в компоненты import React from 'react'; и забил на это дело в дальнейшем! Так вот просто добавьте эту строчку в самом верху и всё заработает

@Виктор-ц8с6ф Год назад

Спасибо!

@Александрраз-н8ф Год назад

да реально тоже нигде не писал импорт реакта. Но тут принцип как и с другими элементами. Если какой то элемент не используешь, то и импортировать видимо незачем его лишний раз.

@vvsl3882 5 лет назад

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

@АнтонДжос 4 года назад

Димыч, это тебе спасибо за React and Redux и за то, что ты делаешь)

@istoric7221 4 года назад

Прекрасно. Так спокойненько, никакой спешки, прямо одно удовольствие.

@Federation1323 4 года назад

это если не смотришь на скорости 2х

@anoren 2 года назад

пишу в первый раз за тридцать выпусков, спасибо за такой классный курс! засела над домашкой с прошлого урока на неприлично долгий срок, теперь готова снова приступить к учебе)

@miral5689 2 года назад

Если кто смотрит сейчас: вместо createRef, используйте useRef const ref = useRef(null); Ну и дальше ref.current.value ... (createRef выдает ошибку -_(0.0)_-

@in_the_fox_fur 2 года назад

У меня работает с createRef(), может, ты забыл импортировать import React from "react"; ? У меня тоже сразу выдало ошибку, но после того, как в этот документ (MyPost) вверху добавила импорт, всё заработало. Крч, если ошибка такая:"Failed to compile src/components/Profile/MyPost/MyPosts.jsx Line 17:24: 'React' is not defined no-undef" , то дело точно в импорте.

@miral5689 2 года назад

@@in_the_fox_fur либа реакта импортирована была, точный текст ошибки не помню, , но принцип работы одинаков use и create. В доках тоже ссылаются друг на друга.

@nekr5815 2 года назад

делал в начале через createRef в tsx не работало гугл впервые не помог, перешел на js все переписал createRef не работает от потерянных 4х часов начинает гореть пздц нахожу твой пост пробую - работает пытаюсь понять в чем проблема пишу обратно createRef и все ЗАРАБОТАЛО вот как так то =/

@miral5689 2 года назад

@@nekr5815 то же самое :)

@miral5689 2 года назад

@@nekr5815 я так понял, что useRef - это хук, столкнулся с ошибкой от хука useRef сегодня, переписал на create и все работает -_(0.0)_-

@AlenaHrudavenka 2 года назад

То, что еще несколько недель назад пугало, сейчас кажется таким понятным. Спасибо!

@ВикторАдамович-т1о 2 года назад

Кто работает с TS и у кого была ошибка “Object is possibly null”, то решаем её так: let newPostEl = useRef(null) const addPost = () => { if (newPostEl.current !== null) { alert(newPostEl.current.value) } } Это важно, потому что что, если у нас есть функция, которая принимает ссылку, но не нулевое значение.

@sky__den_here Год назад

Можно чуть проще const inputRef = useRef(null); const addPost = () => { alert(inputRef.current?.value) };

@arayoflight 4 года назад

Прохожу курс во-второй раз, и теперь домашки делаются легко и с удовольствием, и, главное, с пониманием. React JS - onClick, ref, VirtualDOM.

@ivansamoiliuk5451 5 лет назад

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

@Артем-ч7э9ъ 3 года назад

Домашку выполнил самостоятельно, добавил sidebar . То чувство когда наступает просветление и понимание всего происходящего. Спасибо Димыч! Ты - зажигалка!

@denkodatskyi3381 5 лет назад

Лучшие уроки по React & Redux !!! The BEST!!! lessons of React & Redux!!! Programming and Coding!!

@hennadiipetrov1967 5 лет назад

Еще один кирпичик знаний), спасибо Димыч)!

@zoyapleskatsevich9150 5 лет назад

Спасибо за доступное объяснение ref!!! Единственное видео, на мой взгляд, где так ДОХОДЧИВО объясняется. Очень пригодилось!

@Dubik_Ks 2 года назад

Только запомнила эти обращения и события, теперь надо забыть😅

@ivanmiarkulau8320 3 года назад

спасибо за рассказ о VirtualDOM и работе ref в ReactJS!)

@Elvolvers 5 лет назад

В своё время плюнул на ванила-JS из-за отсутствия классов и инструментов отладки. Недавно решил снова узнать, что там нового в JS и был удивлен не только наличием классов в языке, но и количеством мощных фреймворков. Выбрал React только из-за автора. Очень крутые уроки. Быстро, чётко, без вопросов, как удар катаны. Фшух-Фшух-Фшух!

@alexeyposadsky1408 2 года назад

Невероятно доходчивый курс, спасибо!! В 2022 году все абсолютно актуально )

@ДанилДмитриев-я5м Год назад

как успехи

@alexeyposadsky1408 Год назад

@@ДанилДмитриев-я5м сейчас на 90м уроке, два пет-проекта сделал и развернул для собесов. Параллельно этому курсу прохожу HTML-академию - без понимания верстки сложно сделать нормальный пет-проект. Работу пока не искал, но у меня есть (я 1Сник), так что в этом плане не спешу

@lomonosov9 5 лет назад

Все отлично, идем дальше!)

@alexanderbratskov9281 5 лет назад

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

@0palev 3 года назад

Спасибо с каждым выпуском всё интереснее становится.

@is_eliseeva Год назад

Дмитрий, спасибо за уроки. приступила к твоему курсу после паузы на основном обучении, на контрасте твои видео, как мед для ушей. все четко и понятно: где скобки ставим, почему не ставим + дополнительно пояснения к нативному js. спасибо!!! мой путь самурая 05-01-2023. д/з сделано!

@viktorprytuliuk6177 3 года назад

Димыч, лето 2021, твои уроки актуальны как и раньше. огненный огонь!

@bosfaction 2 года назад

Дима, благодарю тебя. Это карма, пусть вселенная к тебе чаще прислушивается и дарит тебе подарки, которых ты достоин!

@inexhaustible_ore 2 года назад

Благодарю за подробные разъяснения, особенно про Virtual DOM

@MariiaTaran 4 года назад

спасибо за видео :), продолжай в том же духе! благодаря понятному и простому изложению материала - "домашнее задание" ( textarea и button на страницу messages) - получилось добавить очень просто)))) не зря говорят - когда что-то идет так, как нужно и всё получается - сразу хочется двигаться дальше! еще раз спасибо!)))

@pannihto7588 4 года назад

Летим дальше. Спасибо за мотивацию!

@ivanbitkin293 5 лет назад

Круто, грамотно и с мотивацией на будущее.

@sophiet1694 3 года назад

Спасибо большое, вся информация сразу укладывается в голове и не забывается(конечно же, при должной практике)!

@ИгорьАлександрович-к5в 3 года назад

2021 г. июнь - спасибо Димыч за познавательные видео! Все понятно и круто!!! Идем дальше.

@МаксимХрусталев-б5н 4 года назад

Справился с заданием. Не подглядывая, работает) насколько верно, узнаю в следующем уроке) Спасибо!))

@Lnx_Mint 2 года назад

Спасибо! Я честно выполняю домашки с каждого урока и потом иду дальше :)

@vladsushko1375 3 года назад

Дима! Спасибо за крутейший контент !!

@КамильКаландаров-и5к 2 года назад

Наконец-то понял, для чего нужны эти Рефы, сколько не искал, не мог понять, Спасибо, Димыч!

@romanpomin1967 4 года назад

Спасибо за интересные уроки, понятные объяснения и полезные домашние задания!

@paulradyna5079 Год назад

10.24.2022 the most crucial thing - a little steps in studying. Dima, thank you very much!

@НатальяПолянская-в4ь 4 года назад

Смотрю в 2020 году, есть опыт разработки на JS, но фреймворк другой, и вот что хочу сказать. Это волшебно. Так понятно, так доступно. Спасибо большое за проделанный труд!

@vyacheslavpm3779 3 года назад

Димыч спасибо за глубокое представление концептуальных и архитектурных вещей

@marinam4024 Год назад

Димыч, спасибо за старания! не всегда получается сделать самостоятельно с первого раза, но я сижу и стараюсь разбираться дальше)

@em6663 4 года назад

Ti geniy bratan ;) krutie uroki ! 01.10.2020 Baku.

@vladislavdukhovnik8479 2 года назад

рефы понятны, идем дальше) Спасибо за твой труд!

@miguelgrushetckii4839 4 года назад

Хорошо, что напоминаешь про лайки и комменты) после просмотра можно не вспомнить, тк обрабатываешь инфу) все круто!

@romankanashin1992 4 года назад

Ох, хорошо колбеки пережевал... Мне бы такое объяснение пару лет назад))))) Красава

@izerus1 5 лет назад

Спасибо Димыч за проделанную работу. Реально мотивируешь

@eleberet 5 лет назад

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

@evgeniy7603 4 года назад

Огонь. Продолжаю. С OnClick и ref все понятно. Про DOM пока непонятно, ранее не читал. Каюсь, что не выполнил задания с 29 урока, забуксовал на ссылках на картинки. Рассчитываю, что дальше с этим разберусь. Здесь задания сделал. Спасибо!

@МаксСагунёв 3 года назад

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

@maksimpl 2 года назад

Спасибо Димыч! май 2022, лечу :)

@alex45779 3 года назад

Отличное изложение глубоких взаимосвязей элементов и БД!

@kedrolit1521 4 года назад

Привет, от Эльдара. Точим катану! Спасибо за позитив, Димыч! Задание выполнил. И прошлое тоже.

@tatlexOfficial 2 года назад

Все работает, главное смотрите, что объявление переменной text происходит внутри функции addPost

@yriih7371 3 года назад

Чем больше над этим работаю, тем больше понимаю. Димыч, спасибо.

@iwannabekoshka 3 года назад

Премного благодарен за столь классные уроки. Материал усваивается очень легко :)

@DeFace37 3 года назад

Видос класс. Работал только с нативным js и то что, говоришь прям взрыв мозга. Спасибо, что уделяешь много внимания на важных концепциях реакта. Без этого никак

@is_eliseeva 8 месяцев назад

2024/01/20 привет самураям =) ts потребовал типизировать Ref, спасибо webstorm, реально больше и удобнее подсказывает) и спасибо it-incubator, благодаря которому я все-таки перешла на WS =) и вообще, спасибо it-incubator!

@xmarsianca 3 года назад

Задание изи!!Спасибо большое!все очень понятно в этом уроке,как и всегда,впрочем!

@mszulya4100 4 года назад

Очень круто! Спасибо! и практика и теория. Больщущий респект!

@dronkfc8167 4 года назад

thx, поднимаем тебя в топы!

@__online7250 3 года назад

Крутой курс! Реально легкая подача материала для понимания! Начинала смотреть другие куры, там мне не зашла информация! К тому же, подход изучения от практики, на конкретном проекте, вызывает интерес к изучаемой теме, так как точно понятно, зачем нужно это знать! Спасибо, Димыч, за путь самурая!

@jalynkyrgyzuulu8952 Год назад

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

@oksanamishota6514 3 года назад

Очередной раз спасибо за супер изложение материала!

@lerne-du 4 года назад

Первый раз смотрю курсы, на которых все понятно. Не понятно? Смотри видео еще раз! Захотелось в инкубатор... Но столько я пока не зарабатываю ))) Спасибо за твой труд, Дима!

@Иван-б3н5й 3 года назад

Димыч рождён для того, чтобы обучать!!! Вшух вшух вшух.

@Ангелина-ю5ц7м Год назад

С этого видоса начинается усложнение, очень интересно! круто! реакт ван лав

@ВикторТурсункулов 3 года назад

Бэкэнд разработчика видно из далека. Его можно опознать по фразам "UI это мир тупых" "BLL - вот кто здесь главный, вот кто всем управляет")

@is_eliseeva Год назад

28/08/2023 день 22, круто, все получилось. спасибо за урок! #createref

@Vale91kk 4 года назад

Димыч, твои домашки, просто космос, спасибо)

@vitalieperdeleanu7316 3 года назад

08.2021 Димыч твои курс снится ночью уже , спасибо за твой труд

@yurik--sg9nt Год назад

у кого проблемы с типизацией вот решение let newPostElement = React.createRef() const addPost = () => { //debugger let text = newPostElement.current?.value alert(text)}

@Nina0221 Год назад

thank you 👍

@Snegurjan 4 года назад

Димыч ,Димыыыч,у меня когда плохое настроение или типо того ,включаю твои видосы и жизнь налаживается, ты за 31 выпуск уже стал таким важным человеком в моей жизни.Дай Бог здоровья тебе и твоей семье .Ты суперкрутой чувак.И кстати у меня с первого раза получилось добавить к мессаджам .Я думал что безнадежно тупой, оказывается нет.Приеду специально в Беларусь ,пожать тебе твою могучую руку бро!