Разбираем хуки (hooks) в React по доке и на примере todo листа | уроки JavaScript

  Рет қаралды 21,998

Елена Литвинова — Искусство Веб-разработки 🛸

Елена Литвинова — Искусство Веб-разработки 🛸

Күн бұрын

Поразбиваем хуки: useState, useEffect, useCallback, useMemo, useRef. ❤️ Мой telegram: t.me/webelart
❤️ Мой Инстаграм канал: www.instagram.com
❤️ Поддержать развитие канала: / webelart
Ссылки используемые в уроке:
🌱 Старт для изучения хук (hooks): github.com/liveldi/react-hook...
🌱 Старт для todo листа: github.com/liveldi/react_hooks
🌱 ViteJS: vitejs.dev/guide/
Рекомендуемые видео в уроке:
⭐️ Единицы измерения CSS: • 20 методов массивов в ...
00:00 Введение.
04:22 Старт для изучения хук (hooks).
05:27 Начало понимания проекта на React.
07:19 Популярные хуки в разработке.
09:04 useState
17:00 useEffect + useLayoutEffect
26:00 Приступаем к примеру todo лист.
26:00 Приступаем к примеру todo лист.
29:20 useState на примере.
31:20 работаем с input, onChange
34:20 работа с событиями button.
37:40 onKeyDown
40:35 useCallback
43:25 useMemo
46:10 input checkoux
49:19 немного про key в map.
01:00:45 useRef для focus.
01:03:45 фиксим баг, начальное значение для useState
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.

Пікірлер: 113
@bsisow
@bsisow 2 жыл бұрын
Как раз разбираюсь с хуками и тут такой подарок! Спасибо!
@webelart
@webelart 2 жыл бұрын
😘😘😘
@user-ns6cq5sf1w
@user-ns6cq5sf1w 2 жыл бұрын
Формат огонь! 😆Елена, Спасибо вам за актуальный и полезный контент))
@ruslanred850
@ruslanred850 Жыл бұрын
Интересненько. Реакт показался очень простым на входе, собрал пару полноценных ресурсов, а теперь вот смотрю че я там вообще наворотил))
@dr_morpho
@dr_morpho 2 жыл бұрын
Клевый контент, как всегда) Спасибо вам!
@lizasokolova1
@lizasokolova1 2 жыл бұрын
Елена, благодарю! Вдохновляете на любовь к своей работе 💖
@webelart
@webelart 2 жыл бұрын
❤❤❤
@whatislove448
@whatislove448 2 жыл бұрын
Спасибо, отличный формат, всегда так лайтово и лампово)
@webelart
@webelart 2 жыл бұрын
😘😘😘
@antonk5085
@antonk5085 Жыл бұрын
Если актуально, то формат - 🤘
@webelart
@webelart Жыл бұрын
Спасибо!
@3agoskin
@3agoskin Жыл бұрын
Елена, спасибо за видео. Проработал с вами этот час, даже немного забегал вперед. Формат отличный, спасибо за проработку и подачу материала!
@tatianaagapkina8658
@tatianaagapkina8658 Жыл бұрын
хороший формат, давай еще че-нить подобное)
@disconnect355
@disconnect355 2 жыл бұрын
Елена, спасибо, очень полезно!
@EmilyRight
@EmilyRight Жыл бұрын
Оч вовремя) умничка Вы, спасибо!
@gritsienkooleg3447
@gritsienkooleg3447 Жыл бұрын
Спасибо огромное, всегда нужен качественный контент
@cherkasov9016
@cherkasov9016 2 жыл бұрын
Спасибо, невероятно полезная тема)))
@minreiha
@minreiha 2 жыл бұрын
Спасибо, всё понравилось, было очень интересно!☺☺☺
@k-ivan
@k-ivan 2 жыл бұрын
Елена, спасибо за Ваш контент!
@webelart
@webelart 2 жыл бұрын
❤❤❤
@yankov2206
@yankov2206 2 жыл бұрын
@@webelart Спасибо! Отличный контент, ставлю лайки, повышаю самооценку блогера) с уважением, твой любимый подпищик)
@webelart
@webelart 2 жыл бұрын
Спасибо! ❤️❤️❤️
@tohrrogeil4847
@tohrrogeil4847 2 жыл бұрын
формат хорош, легче смотреть и инфа воспринимается лучше)
@chantellekad2525
@chantellekad2525 Жыл бұрын
Спасибо Вам большое за такое наглядное видео по сновным хукам. Формат очень нравится (лайв-стайл), вместе со зрителем находятся ошибки, вместе отлаживается. Желаю успехов
@webelart
@webelart Жыл бұрын
Спасибо! ❤️❤️❤️
@Ramosok
@Ramosok 2 жыл бұрын
Супер!
@Anonym-li8eb
@Anonym-li8eb 4 ай бұрын
Спасибо за видео, формат пушка! :)
@romanprokopets3693
@romanprokopets3693 2 жыл бұрын
более расслабленный формат круче, спасибо за труды)
@webelart
@webelart 2 жыл бұрын
❤️❤️❤️
@user-yw4yn3cy3b
@user-yw4yn3cy3b Жыл бұрын
Топовый топ, Елена!!
@user-me4pb8qs2t
@user-me4pb8qs2t 2 жыл бұрын
Ну наконец-то!!!!
@airpodsclub6443
@airpodsclub6443 2 жыл бұрын
крутой контент, очень хочу увидеть объяснения более сложных хуков от тебя!!!
@escobar929
@escobar929 3 ай бұрын
Молодчинка!!! спасибо огромное!!!нужно больше react!!!
@ArtemFedorovChannel
@ArtemFedorovChannel Жыл бұрын
Бомба!
@webelart
@webelart Жыл бұрын
🔥🔥🔥
@milanalak377
@milanalak377 Жыл бұрын
Спасибо! Ты крутая! 🔥
@user-oz7gi4mq3b
@user-oz7gi4mq3b Ай бұрын
Елена, спасибо большое за урок👏👏👏
@icefire9720
@icefire9720 2 жыл бұрын
Елена, привет из Екатеринбурга, благодаря вашим видео я наконец-то осуществил мечту перешел из строительной сферы на фронтенд разработчика.
@alexidino
@alexidino 2 жыл бұрын
Сколько времени у вас ушло если не секрет?
@icefire9720
@icefire9720 2 жыл бұрын
@@alexidino 5 месяцов
@webelart
@webelart 2 жыл бұрын
Очень круто, поздравляю вас!! ❤
@user-sb7gn9ej3x
@user-sb7gn9ej3x 2 жыл бұрын
Привет Лена !. Видос по реакту просто супер , и этот формат тоже класный так держать
@webelart
@webelart 2 жыл бұрын
😘 Спасибо!!
@johnsnow6041
@johnsnow6041 2 жыл бұрын
Какая же ты молодец
@user-mw4um7vo4q
@user-mw4um7vo4q Жыл бұрын
Ты классная)) спасибо за уроки 😋
@webelart
@webelart Жыл бұрын
😘
@mrsuhrob1334
@mrsuhrob1334 2 жыл бұрын
Елена спасибо тебе огромное просто бомба )) Снимай видео про тестирование пож
@ant3413
@ant3413 2 ай бұрын
Елена ты прекрасна, все отлично объясняешь. Я только изучил JS и ковыряюсь в реакте. Спасибо тебе. )
@nouchance
@nouchance 2 жыл бұрын
После завтра у меня Выпускной ДР, веб-приложения (SPA) на React'е :)) как раз искал о хуках! Спасибо большое!
@webelart
@webelart 2 жыл бұрын
О, огнище!!! Желаю вам крутого выпускного!
@Sasha_channel_
@Sasha_channel_ 8 ай бұрын
Купила платные курсы, а смотрю вас 😂. Очень понятное обьяснение, спасибо🤗
@webelart
@webelart 8 ай бұрын
Спасибо! ❤
@gustav7888
@gustav7888 Жыл бұрын
Объяснили то что многие не объясняют и просто пишут код не объясняя так досконально простые вещи которые новичкам очень сложны в понимании. Спасибо.
@webelart
@webelart Жыл бұрын
@AnnieKiyan
@AnnieKiyan 11 ай бұрын
Спасибо!❤
@dimape.4180
@dimape.4180 2 жыл бұрын
Классно выглядишь!🌼🌼🏵🏵
@webelart
@webelart 2 жыл бұрын
Спасибо! ❤
@user-bz9qe2fw4e
@user-bz9qe2fw4e Жыл бұрын
Так пишу комент что б видео продвигалось!) а вообще хороший канал есть интересный материал
@webelart
@webelart Жыл бұрын
Аааааа!!!! Спасибо!!!! ❤️‍🔥❤️‍🔥❤️‍🔥
@olexandrsavelev4458
@olexandrsavelev4458 2 жыл бұрын
Хороший получился видос, спасибо. Хотел бы увидеть тутор по redux toolkit.
@danildemchenko6004
@danildemchenko6004 2 жыл бұрын
Елена, спасибо за Ваш труд! привет из Киева:)
@webelart
@webelart 2 жыл бұрын
Привет-привет! Рада, что контент нравится! Обнимаю вас! 😘
@tohrrogeil4847
@tohrrogeil4847 2 жыл бұрын
nice!
@mentalshifting.2382
@mentalshifting.2382 Жыл бұрын
Ты крутая girl. ❤
@dodokwak
@dodokwak Жыл бұрын
Спасибо
@sargispetrosyan7120
@sargispetrosyan7120 Жыл бұрын
Я досмотрел до конца,где конфетка ?🤔 Спасибо за труд ,ты классная 👍🏻❤️
@webelart
@webelart Жыл бұрын
Сходите в магазин и купите. Спасибо за отзыв. ❤
@jamjam3337
@jamjam3337 Жыл бұрын
👏
@user-zk5ok6wn2l
@user-zk5ok6wn2l Жыл бұрын
Не думала создать по реакт полный курс, часика на 6?
@veadev
@veadev 2 жыл бұрын
Отличное видео👍 Нет планов записать видео про библиотеку solidjs? Интересно ваше мнение о ней.
@horsewithnoname3015
@horsewithnoname3015 2 жыл бұрын
Первый! ууу🥳 Ещё бы хуки все вспомнить и react с nest добить😒
@webelart
@webelart 2 жыл бұрын
👍🏻👍🏻👍🏻
@sykalovandrey6090
@sykalovandrey6090 2 жыл бұрын
норм)
@user-ck6qi9qw9y
@user-ck6qi9qw9y 2 жыл бұрын
Кайф
@user-xd6rk7th8b
@user-xd6rk7th8b Жыл бұрын
волосы отрастили! вам так намного лучше!
@webelart
@webelart Жыл бұрын
Я вновь постригла 🌺
@protonys
@protonys Жыл бұрын
Забавная подача, но заходит неплохо. Хотелось бы в таком же стиле про стили ))) Именно про стили, как они использованы в этом уроке. Если уже есть, прошу кинуть ссылку...
@webelart
@webelart Жыл бұрын
А какие стили имеете ввиду?
@protonys
@protonys Жыл бұрын
CSS - как организован механизм по стилям, без описания самой css верстки. Т.е. почему так организованы в проекте, почему в файлах с именем index.modele.scss, какой пакет это делает и как его установить/настроить. Что удобно, что нет
@boryskatowsky5190
@boryskatowsky5190 Жыл бұрын
Интересно, а как внутри устроен хук, например, useState?
@kalabbkon3620
@kalabbkon3620 2 жыл бұрын
Елена вы клёвая)я бы с вами не хуки разбирал )а собранную раскладушку)))🤭🤭🤭
@webelart
@webelart 2 жыл бұрын
Ахаха 😂😂😂
@biLLie_wiLLie
@biLLie_wiLLie 2 жыл бұрын
Лена, спасибо за ваши видео! Подскажите в Англии есть такой же гигант как Битрикс или типа того? Как они там интернет магазины клепают?
@webelart
@webelart 2 жыл бұрын
Мне кажется тут довольно большой выбор компаний. Но я в основном в сторону FAANG смотрела, здесь есть Гугл, ютуб кстати, Meta (facebook), даже Apple вроде открывается команда (друг недавно собесился), Амазон в Шотландии
@biLLie_wiLLie
@biLLie_wiLLie 2 жыл бұрын
@@webelart Я немножко про другое спросил) фрилансеры местные какими инструментами пользуются для создания проектов?
@webelart
@webelart 2 жыл бұрын
@@biLLie_wiLLie Ааа, поняла, то-то же я про битрикс не сразу поняла. Была на примете одна компания, но уже не помню. :(
@user-qh6eh7yv3g
@user-qh6eh7yv3g Жыл бұрын
Спасибо, отличное видео. Правда, пришлось периодически лезть в русскую документацию (я так себе англичанин) и посматривать видео с более подробными объяснениями, конечно, но это не минус, всем нужно уметь гуглить. Именно как небольшой проектик с относительно реальной задачей очень зашло :)
@webelart
@webelart Жыл бұрын
Услышала, спасибо за комментарий! 🙏
@webrubin
@webrubin 2 жыл бұрын
подскажите какую модель лучше взять для веб разработки ? React , js , css ,html .... m1 Air 16 gb 13 или pro версию?
@webelart
@webelart 2 жыл бұрын
Смотря что планируете изучать и как много разбирать. 16gb в целом норм для начала.
@webrubin
@webrubin 2 жыл бұрын
@@webelart я изучаю js и react
@horsewithnoname3015
@horsewithnoname3015 2 жыл бұрын
@@webrubin ориентируйтесь на то что нравится внешне или что дешевле, что дешевле - лучше можно будет купить второй монитор🤷🏿‍♂️. я без проблем пишу nest и next приложения с бд через vsc (вроде даже тянет webstorm) на ноутбуке 12-го года с a10 и 8гб оперативной памяти и вторым монитором из минусов только не тянет parallax, что забавно тк понял почему его не везде используют😅
@dodokwak
@dodokwak Жыл бұрын
С этим useEffect иногда можно попасть в рекурсию, если почему-то забыть вторым параметром передать пустой список, и делать запрос на сервер.
@user-iz9qp7np4q
@user-iz9qp7np4q Жыл бұрын
Живое наглядное разжевывание материала.. Как правильно исправить ошибки и всё по русски
@user-yb5bx2ki4q
@user-yb5bx2ki4q 2 жыл бұрын
Привет 👋
@webelart
@webelart 2 жыл бұрын
Привет-привет! ❤
@juliv
@juliv 5 ай бұрын
#20:44 Так event не удалится. нужно использовать переменную.
@webelart
@webelart 5 ай бұрын
Удалится, это скролл глобальной переменной window.
@alexsandr9444
@alexsandr9444 2 жыл бұрын
Использование useCallback как мне кажется в вашем не верное так как вызывается в родительском компоненте а не передается дочерним компонетам. Получается что в таком примере по мимо onAdd setInputValue будет еще создаваться еще один колбек и массив зависимостей.И в массиве зависимостей тоже требуется указывать не только inputValue но и onAdd setInputValue так как если например измениться onAdd реакт об этом ничего знать не будет
@webelart
@webelart 2 жыл бұрын
Можете привести пример как правильно? Не всё поняла. Кстати посмотрела на работе, мы примерно так и юзаем его :D Но допускаю, что могут быть тонкости.
@alexsandr9444
@alexsandr9444 2 жыл бұрын
@@webelart Вот тут например подробно обьясняет ) kzfaq.info/get/bejne/aL2garSBudHUnac.html
@user-yy3fw5mv7s
@user-yy3fw5mv7s Жыл бұрын
​@@webelart useCallback нужен для сохранения ссылки на функцию между рендерами, чтобы, например, избежать лишнего перендера дочернего компонента, если тому передается эта функция как проп. Лишнего перерендера получится избежать, если обернуть функцию в родительском компоненте в useCallback, а дочерний функциональный компонент в HOC React.memo (или настроить в дочернем классовом компоненте shouldComponentUpdate). Еще может пригодится, если в компоненте есть императивная подписка на событие (напрямую через DOM в useEffect или обработчиках) и нужно сохранить ссылку на функцию-обработчик между рендерами, чтобы, например, в каком-то следующем рендере отписаться от события.
@user-jx8pe4yz6q
@user-jx8pe4yz6q Жыл бұрын
что за П реакт ?
@webelart
@webelart Жыл бұрын
preactjs.com
@mushnikov35
@mushnikov35 2 жыл бұрын
в onRemove нет смысла ибо onDone делает тоже самое, тупо переиспользовать
@user-zs8gf4zj7i
@user-zs8gf4zj7i 2 жыл бұрын
Елена, не могли бы вы сделать видео-урок, по классам, очень сложное даётся в понимании.😞😞
@severgun
@severgun Жыл бұрын
Не хватило информации почему нужно использовать useState, а не просто `let tasks = [];`
@webelart
@webelart Жыл бұрын
При перерендере вы все потеряете.
@galeraonthebeat
@galeraonthebeat Жыл бұрын
вит, а не вайт
@webelart
@webelart Жыл бұрын
Хук а не хук! Вы пришли на русский канал выискивать ошибки произношения? Я вас разочарую, здесь про разработку. Либо учитесь, либо на другой канал.
@alexander551
@alexander551 Жыл бұрын
Too old for me
Реализуем сортировку пузырьком + оптимизация + reverse
20:44
Елена Литвинова — Искусство Веб-разработки 🛸
Рет қаралды 5 М.
路飞被小孩吓到了#海贼王#路飞
00:41
路飞与唐舞桐
Рет қаралды 82 МЛН
DAD LEFT HIS OLD SOCKS ON THE COUCH…😱😂
00:24
JULI_PROETO
Рет қаралды 15 МЛН
Как сделать Motion Макет с анимационной галереей на Preact & TypeScript
48:25
Елена Литвинова — Искусство Веб-разработки 🛸
Рет қаралды 2,8 М.
Зачем на самом деле нужен хук useCallback
8:33
Михаил Непомнящий
Рет қаралды 40 М.
Что такое Render и Commit в React
9:53
Dev Surge
Рет қаралды 3,1 М.
Алгоритм бинарного поиска на JavaScript
18:00
Елена Литвинова — Искусство Веб-разработки 🛸
Рет қаралды 8 М.
СОБЕСЕДОВАНИЕ FRONTEND ЗП 220к JS, TS задачи
49:02
Кодерские собесы
Рет қаралды 83 М.
84 - React JS - hook, useState, хуки
38:40
IT-KAMASUTRA
Рет қаралды 58 М.
Разрабатываем ToDo лист на React + TypeScript + Zustand со сборкой на ViteJS | Уроки JavaScript
1:50:13
Елена Литвинова — Искусство Веб-разработки 🛸
Рет қаралды 65 М.
Все хуки ReactJS за 1 час
1:11:08
Веб-разработка - DevMagazine
Рет қаралды 19 М.