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

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

[@serjioborisov6750]

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

[@ITKAMASUTRA]

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

[@ruslankomlykov9207]

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

[@alexua9027]

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

[@garniktadevosyan2007]

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

[@diperps4969]

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

[@user-hr8wp4ry4p]

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

[@user-tr8hr4xm1l]

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

[@socrat5354]

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

[@yaroslavzef7267]

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

[@mikalai_root]

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

[@legenda9792]

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

[@user-th4qi8iv3q]

как успехи

[@user-bm7up7cj2v]

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

[@den_pochinsky]

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

[@nestepashka]

у кого 'React' is not defined no-undef нужно прописать сверху руками эту строку : import React from 'react' :) Димыч спасибо за курс )

[@nikolaizarezako9344]

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

[@user-hd9gw2ig9w]

Спасибо! твой комментарий сэкономил мне кучу времени)))

[@nikolyovin]

Благодарю! как хорошо, что есть такие добрые люди!

[@994gun3]

можно не записывать вообще React нигде , т.к он вызывается глобально уже

[@user-jk1qm2yf5t]

сейчас можно вот так let ref = createRef(); let addPost = ()=>{ let text = ref.current.value alert(text) } реакт импортирует такую штуку import { createRef } from "react";

[@mariia6820]

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

[@user-th4qi8iv3q]

как успехи?

[@daniilbondar1316]

Димыч: забываем documentById и учим ref. Юный самурай: для чего? Димыч: чтобы потом забыть и делать как нормальные люди. Юный самурай(делает харакири)

[@maksymdryha]

document.getElementById("id") , повтори если выжил молодой самурай )

[@user-jh7gp9yt2w]

Сеппуку

[@user-lz5wf1sn3e]

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

[@user-pv9oe7mx5x]

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

[@user-lz5wf1sn3e]

@@user-pv9oe7mx5x Работаю. Правда теперь не на реакте, а на ангуляре :)

[@user-pv9oe7mx5x]

@@user-lz5wf1sn3e супер!)

[@zloy_ax8496]

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

[@user-lz5wf1sn3e]

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

[@user-gu2lf6tr8m]

Наконец-то отошел от новогодних праздников и со свежими силами бомбим дальше!

[@ruslankomlykov9207]

Последовательность необходимых действий при просмотре видосов выполнена. Отточена до автоматизма!

[@8kingov8alexey8]

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

[@marina-ej4qd9kc1wh]

2.01.24 - первое видео в этом году. Настроение бодрое!!! Хочу учиться. Мои первые полезные новогодние каникулы.

[@romanpomin1967]

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

[@eleberet]

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

[@user-jd3oi3ni6j]

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

[@hennadiipetrov1967]

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

[@sophiet1694]

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

[@nataliasokolova2989]

Спасибо! Все очень доступно объясняете. Оставляю комменты для продвижения канала. 🙂

[@user-tw7tt2xi4t]

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

[@ivansamoiliuk5451]

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

[@ivanbitkin293]

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

[@0palev]

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

[@vvsl3882]

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

[@lomonosov9]

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

[@131ZIL]

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

[@user-hu7st6jw2q]

Спасибо!

[@user-cw1vx8ew8j]

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

[@pannihto7588]

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

[@theWorldIsMultivariate]

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

[@zoyapleskatsevich9150]

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

[@iwannabekoshka]

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

[@alexanderbratskov9281]

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

[@izerus1]

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

[@viktorprytuliuk6177]

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

[@ivanmiarkulau8320]

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

[@crashcrash8009]

Димыч, всё круто и понятно! Особенно радует подача, всякие словечки типа "кабдзда, белиберда, краказябры" ). Это вносит некую лёгкость в понимание материала. Не пожалел времени проставить лайки на всех выпусках, хоть и дошёл пока до данного видео. Инкубатор, самураи - летим!)

[@istoric7221]

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

[@Federation1323]

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

[@anoren]

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

[@marinam4024]

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

[@denkodatskyi3381]

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

[@MariiaTaran]

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

[@MikhailKuklenkov]

Однозначно летим дальше, Дима! Все круто и огромное спасибо за курс)

[@bosfaction]

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

[@inexhaustible_ore]

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

[@user-br1tu9xh4w]

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

[@KanalReal]

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

[@vladislavdukhovnik8479]

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

[@user-wj6ue7nt5g]

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

[@maybe2890]

Особенно нравится "вталдычивание" основ из выпуска в выпуск. Повторение - мать учения. Ну и разжевывание инфы. Благодарность тебе, свой человек Димыч.

[@mszulya4100]

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

[@DeFace37]

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

[@alastiel3761]

Очень здорово, большое спасибо Димы, за твои труды!

[@user-em8ni8mt7d]

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

[@user-pv5is5pz4j]

Спасибо за урок! Смотрю дальше:)

[@beon9901]

У кого не работает в 2022, добавьте в верху MyPost импорт - import React from 'react';

[@kirill1377]

спасибо)

[@manytu_origin4205]

Супер! Как всегда все четко и наглядно. Все вышло. лечу дальше!

[@norayrstepanyan1738]

классные уроки! Спасибо, Димыч!!!

[@oksanamishota6514]

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

[@bugaga8144]

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

[@evgeniy7603]

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

[@yuliyagrasevich8159]

Благодарю! Идем дальше!

[@mykhailostepanishchev6472]

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

[@ArturZalewski]

Рефы отлично объяснил. В официальной документации вроде то же самое написано, но настолько сухо и неинтересно, что воспринять намного сложнее. МолотоК!

[@__maxsoul643]

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

[@user-jw1pc9ls1x]

да тут и запинка не нужна, вот ты бы так написал о прошлом задание, где блок friends. Кстати, как дела в жизни?

[@vladsushko1375]

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

[@user-ri7io8el7k]

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

[@alexeyposadsky1408]

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

[@user-th4qi8iv3q]

как успехи

[@alexeyposadsky1408]

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

[@user-sb5ps4kk9f]

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

[@narinemkrtchyan1087]

Лучшие уроки по React & Redux ! Огромное спасибо Димыч!

[@cyxarbtm7752]

продолжаю долбить реакт, выполняю все задания которые говоришь, спасибо за такой контент

[@__online7250]

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

[@user-yq4cs2fe3u]

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

[@arayoflight]

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

[@Mykhailo_Vdovychenko]

Спасибо за такие крутые уроки! Все доступно, понятно, интересно 👍

[@em6663]

Ti geniy bratan ;) krutie uroki ! 01.10.2020 Baku.

[@spacerider9426]

Спасибо огромное за твой труд! Смотрю дальше!

[@tinarina5622]

Летим🚀 Спасибо за крутые уроки!

[@antonanton1206]

переписал с начала. дальше все по конспекту. когда переписываешь своими мыслями - все становится понятно.едим дальше

[@vyacheslavpm3779]

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

[@kedrolit1521]

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

[@xmarsianca]

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

[@romankanashin1992]

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

[@alex45779]

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

[@UnwarO]

Летим дальше!) Best of the best!

[@is_eliseeva]

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

[@firemanhood1526]

Было бы круто выпустить видос гайд по курсу. Что из этого курса уже не используют и рассказать что использовать нужно сейчас)

[@maxkos6184]

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

[@miguelgrushetckii4839]

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

[@encanto3356]

Спасибо, лечу дальше. Полет нормальный!

[@alexametquia5077]

да- а, курс реально крутой! команда гениев замутила большую тусовку!!!

[@Vale91kk]

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

[@linuxlifepage]

Круто! Идем дальше

[@user-ou5ok8fs9c]

Отличный урок по React Javascript DOM onClick. Спасибо, Димыч

[@Lnx_Mint]

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

[@dronkfc8167]

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

[@Dubik_Ks]

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

[@Elvolvers]

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

[@user-bs5hv4qr2t]

О! новое дз.. супер-супер! Thank you for the lesson!

[@user-tz9rc7hn6y]

Как обычно - СУПЕР!!! Спасибо!

[@ThePumasin]

Спасибо! Пошли интересности!)

[@dmytrohelbak]

Капздец, классные уроки! Спасибо, Димыч!!!

[@begemotie]

новогодние каникулы с реактом! ура!