🖥 Хуки useEffect и useLayoutEffect – придание жизни компонентам, а точнее – придание методов жизненного цикла

Если вы работали с классовыми компонентами, то знакомы с методами жизненного цикла. Они служат для того, чтобы совершать какие-то операции на разных стадиях жизни компонента. Для этого есть два хука – useEffect и useLayoutEffect. Они похожи между собой, за исключением небольшой разницы в рендеринге. В случае с useLayoutEffect React не запускает рендеринг построенного DOM дерева до тех пор, пока не отработает useLayoutEffect. Если же берём useEffect, то React сразу запускает рендеринг построенного DOM, не дожидаясь запуска useEffect.

➡️ Подробнее

@react_tg

🖥 React-query – Хуки для получения, кэширования и обновления асинхронных данных в React

Особенности:
• Transport/Protocol/Backend независимая выборка данных (REST, GraphQL, promises, что угодно!)
• Автоматическое кэширование + выборка (stale-while-revalidate, Window Refocus, Polling/Realtime)
• Параллельные + зависимые запросы
• Мутации + Reactive выборка запросов
• Многослойный кэш + автоматический сборщик «мусора» (garbage collector)
• Load-More + Infinite Scroll Queries w/ Scroll Recovery
• Отмена запросов и многое другое

🔩 Ссылка на проект

@react_tg| #TypeScript #React #Query

🔩​Time-tracker – туду листы с трекингом времени

Каждая созданная задача имеет свой секундомер. Начинаешь работать над задачей - запускаешь встроенный секундомер. При переключении на другую, секундомер останавливается и запускается уже на новой задаче

Так можно отслеживать по какими задачами сколько времени было затрачено

Написано на TS с помощью react + electron + antd

#TypeScript #React #Interesting

@react_tg

🖥 Slash – коллекция пакетов для JavaScript и TypeScript. Библиотека содержит более 30 npm-пакетов для создания высококачественных веб-приложений

Некоторые компоненты, хуки и функции можно использовать в React

🔩 Ссылка на проект

@react_tg | #Interesting #JavaScript #React

🖥 reaflow – React-библиотека для построения флов-чартов, воркфлоу-диаграм с редактором

Библиотека многофункциональная и модульная, позволяет отображать настраиваемые, сложные визуализации

🔩 Ссылка на проект

@react_tg | #JavaScript #React #Interesting #Visualization

​🖥 Frontend-challenges – сборник некоторых «игривых» задач с открытым исходным кодом от различных компаний, чтобы проверить и улучшить ваши знания

Цель данного репозитория - проверить свои знания в фронт-енде с помощью реальных заданий. Здесь находятся тесты по React, HTML & CSS, JS, Git, Redux и многое другое..

#GitHub | #Archive #Interesting #Useful #Web

@react_tg

🔩 Grid.js — лёгкий и продвинутый плагин для таблиц

Этот бесплатный js-плагин позволяет работать с большинством фреймворков языка, включая React, Angular, Vue и VanillaJs.

При этом его отличительными особенностями являются легковесность и открытый исходный код.

Стоимость: #бесплатно

#js #плагин #open_source

@react_tg

🖥 Реализация слайдера изображений и текста на React.js с вариантами оптимизации

В данной статье мы разберем задание, которое может встретиться в рамках собеседования на должность фронтенд-разработчика, а именно реализацию слайдера изображений.

За последние 5 месяцев на моем счету 15 очных собеседований и предложения от Google, Roku, Microsoft и других компаний.

Суть задачи — реализовать виджет за 45–50 минут и рассказать о вариантах оптимизации. Ее решением мы займемся в данном руководстве. Главная цель не в том, чтобы реализовать слайдер изображений со множеством функциональностей, а в том, чтобы объяснить, как именно его реализовать и оптимизировать.

➡️ Читать дальше
🔩 Код

@react_tg

🖥 Начало работы с ReactJS: руководство для начинающих

React позволяет разработчикам создавать большие веб-приложения, пособные изменять данные без перезагрузки страницы. Цель React - предоставить способ создания быстрых масштабируемых веб-приложений.

React — это библиотека JavaScript для создания пользовательских интерфейсов.

➡️ Читать дальше

@react_tg

🖥 Гуляем по мирам с помощью React

Автор этого проекта решил наглядно показать на что способен React при правильном подходе. Он создал страницу на которой вы можете прогуляться по пяти известным вымышленным мирам, используя только колёсико мыши.

Вот тут вы можете изучить код проекта и его особенности:
🖥 Github

А здесь совершить ту самую прогулку:
⭐️ Демо

#веб #react

@react_tg

✔️ Как создать многоуровневое выпадающее меню в React

Многоуровневое меню предоставляет несколько вариантов выбора, делая панель навигации динамичным и организованным. В этом руководстве вы пошагово рассмотрите процесс реализации функции раскрывающегося списка в React:

https://blog.logrocket.com/how-create-multilevel-dropdown-menu-react/

#фронтенд #react

@react_tg