- Видео 8
- Просмотров 4 437
Учу JS
Добавлен 21 янв 2023
Привет! Меня зовут Сергей, и я веб-разработчик. На моем канале "Учу JS" я делюсь с вами разными фишечками и тонкостями в области веб-разработки. Здесь вы найдете ролики про JavaScript, React, HTML, CSS и другие интересные темы. Я рассказываю о некоторых тонких моментах в js, общих заблуждениях и особенностях разных инструментов Реакта. Моя цель - помочь вам стать лучшими веб-разработчиками и узнать что-то новое и полезное.
Если вам нравятся мои видео, то не забудьте подписаться на мой канал и нажать на колокольчик, чтобы не пропустить новые ролики. Также вы можете оставлять свои комментарии, вопросы и пожелания под видео - я буду рад обратной связи.
Если вам нравятся мои видео, то не забудьте подписаться на мой канал и нажать на колокольчик, чтобы не пропустить новые ролики. Также вы можете оставлять свои комментарии, вопросы и пожелания под видео - я буду рад обратной связи.
Оптимизация Реакт. ч.3 useCallback и useMemo
Продолжение серии об оптимизации работы Реакт приложения.
useCallback и useMemo. Хуки для мемоизации функций и результатов расчетов. Подробнее в ролике.
Просто о серьезном.
ruclips.net/video/FmyKT2eYM0o/видео.html Начало серии
ruclips.net/video/OZOkihD1ePI/видео.html Часть 2-я
useCallback и useMemo. Хуки для мемоизации функций и результатов расчетов. Подробнее в ролике.
Просто о серьезном.
ruclips.net/video/FmyKT2eYM0o/видео.html Начало серии
ruclips.net/video/OZOkihD1ePI/видео.html Часть 2-я
Просмотров: 73
Видео
Drag-and-Drop с использованием библиотеки React-DnD.
Просмотров 1,3 тыс.7 месяцев назад
Продолжение ролика про Драг-н-Дроп. Здесь мы реализуем тот-же функционал перетаскивания элементов, но уже с использованием библиотеки React-DnD. Кроме получения точно такого-же функционала, добавим немного бантиков за счет использования бибилиотеки. Для более крутого освоения указанной либы прошу читать доку react-dnd.github.io/react-dnd/about. Что из часто используемого могу сразу посоветовать...
Для чего нужен Portal в React и как его использовать.
Просмотров 1,2 тыс.7 месяцев назад
Создадим модальное окно с помощью Портала в Реакте. Постараемся разобраться, что такое Portal и для чего он появился в React.
Drag-and-Drop в React основа
Просмотров 1,3 тыс.7 месяцев назад
Рассмотрим ванильный вариант реализации Драг-н-Дропа средствами JS. Ссылка на песочницу с решением, которое было написано в ролике codesandbox.io/s/dnd-base-39lm6c
Оптимизация Реакт - мемо
Просмотров 728 месяцев назад
Продолжение серии об оптимизации работы Реакт приложения. Компонент часто перерисовывается? А что если в нем сложная и тяжелая логика, большие расчеты или обработка большого массива? Попробуем разобраться на простом примере, как избавится от лишних рендеров дочерних компонентов. Просто о серьезном.
Оптимизация работы Реакт приложения. ч.1 Инструменты разработчика - Profiler
Просмотров 2728 месяцев назад
Этим роликом начинается цикл из нескольких видео для начинающих Реакт разработчиков по основам оптимизации работы Реакт приложения. Как узнать какой компонент тормозит работу приложения, какой слишком часто перерисовывается, а какой постоянно заставляет перерисовываться дочерних. Все это можно узнать в профайлере. Как? Все в этом видео. Просто о серьезном. Использованные инструменты или ссылки,...
Кастомный хук 2 часть
Просмотров 839 месяцев назад
Продолжение рассказа про создание кастомных кухов. Мы создадим еще один хук, который позволяет сохранять данные в локальное хранилище браузера. Попутно узнаем, что это за хранилище, где оно находится и как с ним работать. Ссылка на песочницу, где можно посмотреть созданное решение codesandbox.io/p/sandbox/hook-usestorage-mln8qg?file=/src/index.js
Кастомный хук 1 часть
Просмотров 1629 месяцев назад
Рассмотрим что такое кастомный хук и как его создать на примере простейшей функции, которая контролирует открытие или закрытие чего-либо.
Вам огромное спасибо
Подскажите, как получить свойство хоть какое-то из глобального состояния в юзДраг.
Круто, спасибо
Подскажите, как вызвать меню выбора иконок ? 10:48 пример вставки х
На маке ctrl+cmd+space
@@Learn_JS как круто! Огромное спасибо) с 2015 пользуюсь маком, но никогда не сталкивался с этой фишкой)
У меня одного ничего не работает при том, что я полностью повторил код?
Учиться надо было, а не как ты в компуктер всю жизнь играл...а теперь не внимательный стал... Учи и не позорься тут...и все заработает у тебя Аливидерчи
Насколько помню, затеняющий слой можно получить при помощи использования jsx тега dialog вместо div. Поправьте, если не так.
Можно использовать <dialog> и вообще не делать портал, но тогда это решение не будет соответствовать теме ролика 😀
Привет! Как ты смотришь на то, чтобы вместо создания лишней функции onClose просто передавать в модалку setModalOpen, а уже в самом компоненте при нажатии на кнопку закрывания модалки просто менять стейт на противоположный ( onClick={ () => onClose(prev => !prev) } )?
Не очень хорошо, так как сама модалка не должна знать, что там делается при закрытии, нам может понадобиться не только ее саму свернуть, но выполнить дополнительные действия.
Если так углубленно рассмотрено создание модального окна, то стоило сразу показать хорошие практики и добавлять-удалять из DOM по клику элемент.
Привет, классное видео. Подскажи плз как убрать прозрачность элемента, который мы перетаскиваем используя данную библиотеку. Тоесть не элемента который остается пока на старом месте как у тебя, а именно который за курсором перемещается. Спасибо!
В зависимости от задачи можно использовать или дополнительный слой для отображения перетаскиваемого элемента (react-dnd.github.io/react-dnd/examples/drag-around/custom-drag-layer) или подменять отображение перетаскиваемого элемента своим собственным (react-dnd.github.io/react-dnd/examples/customize/handles-and-previews)
Спасибо за видео. Я так понимаю, что портал также может решить проблему излишнего дриллинга пропсами / ререндеринга?
Для решения проблемы излишнего дриллинга лучше использовать контекст или стэйт менеджер. Портал все-же про создание физического блока в разметке, в который можно рендерить контент. Если проблема с лишними рендерингами, то тогда мемоизация или изначально корректное проектирование.
Спасибо, использую такой хук в дипломе на Практикуме )
Большое спасибо, очень доходчиво!
Надо же! Столько лет на реакте уже пишу, коллеги давно кличут уважительно 'синьор', а таких полезных фишек не знал! Однозначно полезнейший канал!
Спасибо за видео, ты облегчил мне жизнь )
Здорово. Уже не зря все это.
лайков
спасибо за видос)
Серёж, а useMemo() ты только планируешь показать, да?
Пушка, только шрифт побольше)
забайтился на DnD и картинку, ожидая Dungeon&Dragons в программировании
тоже самое
Те кто в теме знают - эта штука в 100 раз круче
Отличная подача материала, смотрится интересно а главное все понятно. Сложные вещи - простым языком, круто! Ждем новых роликов.