Текстовая версия 👉 it-dev-journal.ru/articles/kastomnyj-react-huk-dlya-izmeneniya-temy-veb-prilozheniya О переменных Sass и Как переключать темы с CSS и JavaScript в React приложении? 👉 ruclips.net/video/tYbAg1hcxTo/видео.html
Хорошо ли на прямую из реакта обращаться к DOM? У него же свой виртуальный дом который отслеживает изменения куда быстрее обычного dom, и распихивает накопившиеся изменения в frame, не вклиниваемчя ли мы в этот процесс, и не делаем ли хуже, обращаясь на прямую к дом?
Привет! Если добавляю transition на body то при начальной загрузке страницы (или перезагрузке) происходит переход от светлой к темной теме, мигание или перетекание, выглядит не очень эстетично. Как этот баг убрать?
Сам и отвечу. Я пофиксил эту багу с помощью события load добавляя класс с transition только после загрузки HTML и внешних ресурсов: window.addEventListener('load', () => { document.body.classList.add('transition') })
Вопрос по переключению темы, а именно использование document. Если я правильно понимаю, при использовании document мы попадаем внутрь виртуального DOM, который контролирует React и без его ведома вносим новые элементы, что может со временем негативно отразиться в работе приложения. Если это так, то как тогда лучше решить подобную задачу?
А на сколько включение анимации для элементов будет влиять на производительность? Ведь у нас сейчас простое приложение с несколькими css свойствами. Но что, если этих элементов будет оочень много? Если есть какие-то источники, которые можно по этой теме изучить, буду благодарен
Спасибо!) что-то подобное делал в этом видео, там sass + css переменные: ruclips.net/video/tYbAg1hcxTo/видео.html код для компонентов: github.com/tutorials-coding/sass-sandbox/tree/main/src/components/Card
У меня есть вопрос, хоть я только и начинающий но я не понимаю зачем делать лишние методы на 5:40 если можно просто в обработчике событий написать анонимную функцию ?
Это обычное разделение логики. Так легче считывать. То есть, вот на 5:40 в функции вызов одного действия, но уже к концу видео два. Возможно в дальнейшем потребуется ещё какая-то логика внутри функции. В итоге анонимная функция внутри компоненты будет выглядеть ужасно некрасиво. Кроме того, возможно, что в больших приложениях потребуется иметь эту функцию переключения темы не в одном, а в нескольких местах. Тогда её удобно было бы вынести в отдельный файл и импортировать.
![YoungBoy Never Broke Again - Missing Everything [Official Video]](http://i.ytimg.com/vi/dTYeMZGzOzw/mqdefault.jpg)
Большое спасибо , это выглядит проще чем с материалюай
однозначно лайк. я не ожидал, что всего за 10 минут можно поменять тему в приложении. Актуально на апрель 2024
Спасибо большое. Я думал будет занимать большое количество времени, а оказалось не так. КОРОТКО, ЯСНО и ПОНЯТНО.
Отличное видео, спасибо. Проблема была в условии index.css (я просто убрал html и оставил [data-theme = 'dark'] {.....} и все работает. )
Полезный хук, спасибо!
Хороший контент, продолжайте в том же духе! Хотелось бы больше таких мини гайдов.
Спасибо!) Ок
Спасибо, всё просто и понятно. (React, hooks, useLayoutEffect, theme)
Спасибо большое! Отличное видео, очень помогло! Поставил лайк и подписался! :)
Спасибо)
Текстовая версия 👉 it-dev-journal.ru/articles/kastomnyj-react-huk-dlya-izmeneniya-temy-veb-prilozheniya
О переменных Sass и Как переключать темы с CSS и JavaScript в React приложении? 👉 ruclips.net/video/tYbAg1hcxTo/видео.html
Спасибо
thank you very much, everything works!
👍
Хорошо ли на прямую из реакта обращаться к DOM?
У него же свой виртуальный дом который отслеживает изменения куда быстрее обычного dom, и распихивает накопившиеся изменения в frame, не вклиниваемчя ли мы в этот процесс, и не делаем ли хуже, обращаясь на прямую к дом?
Здравствуйте. У меня меняется data атрибут, присваиваются псевдо-стили, но все равно не стилизуется. В чем дело, как думаете?
Привет! Если добавляю transition на body то при начальной загрузке страницы (или перезагрузке) происходит переход от светлой к темной теме, мигание или перетекание, выглядит не очень эстетично. Как этот баг убрать?
Сам и отвечу. Я пофиксил эту багу с помощью события load добавляя класс с transition только после загрузки HTML и внешних ресурсов:
window.addEventListener('load', () => {
document.body.classList.add('transition')
})
Вопрос по переключению темы, а именно использование document. Если я правильно понимаю, при использовании document мы попадаем внутрь виртуального DOM, который контролирует React и без его ведома вносим новые элементы, что может со временем негативно отразиться в работе приложения. Если это так, то как тогда лучше решить подобную задачу?
React контролирует только элемент с id="root" (он находится в body div), а мы добавляем data атрибут в тэг html
Я бы добавил отслеживание изменения системной темы, а сохранение в сторедж вынес бы в анмаунт. А так полезный хук, спасибо:)
да, вариаций много) спасибо)
А на сколько включение анимации для элементов будет влиять на производительность?
Ведь у нас сейчас простое приложение с несколькими css свойствами.
Но что, если этих элементов будет оочень много?
Если есть какие-то источники, которые можно по этой теме изучить, буду благодарен
у меня лагает, простое приложение на tailwindcss (sqlite editor)
Очень полезное видео, спасибо! А возможен ли подобный вариант с SASS/SCSS?
Спасибо!) что-то подобное делал в этом видео, там sass + css переменные: ruclips.net/video/tYbAg1hcxTo/видео.html
код для компонентов: github.com/tutorials-coding/sass-sandbox/tree/main/src/components/Card
У меня есть вопрос, хоть я только и начинающий но я не понимаю зачем делать лишние методы на 5:40 если можно просто в обработчике событий написать анонимную функцию ?
Это обычное разделение логики. Так легче считывать. То есть, вот на 5:40 в функции вызов одного действия, но уже к концу видео два. Возможно в дальнейшем потребуется ещё какая-то логика внутри функции. В итоге анонимная функция внутри компоненты будет выглядеть ужасно некрасиво.
Кроме того, возможно, что в больших приложениях потребуется иметь эту функцию переключения темы не в одном, а в нескольких местах. Тогда её удобно было бы вынести в отдельный файл и импортировать.
Этот хук будет лучше, чем если использовать контекст?
Думаю большой разницы нет, этот хук хранит данные в localstorage (shared state), и поэтому его тоже можно вызывать в разных компонентах
А код урока где можно найти?
t.me/devmagazinechannel/163
@@DevMagazineChannel Спасибо!! Очень полезный урок!🏆