🖥 ​Rockpack

Rockpack – данный инструмент позволяет создавать «каркас» React приложения в стиле create-react-app

Основная идея - сократить время настройки проекта с недель до 5 минут

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

#JavaScript #React

@react_tg

🖥 Хуки 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