React JS

🧬 Redux Toolkit

В программе всё держится на данных и состояниях. Redux же предоставляет продвинутое управление состоянием React-приложения.

После просмотра этого вы научитесь работать с Redux Toolkit и создадите простенький To-Do проект, который и покажет разницу написания с Redux и без него.

https://youtu.be/C0fBnil_Im4

@react_tg

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

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

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

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

@react_tg

Как создать редактор кода для 40+ языков с помощью React

Онлайн-платформа выполнения кода позволяет писать и сразу запускать код на любимом языке программирования. В идеале можно увидеть вывод программы, например двоичного поиска на JavaScript.

https://habr.com/ru/company/skillfactory/blog/670380/

#js #react #ru

@react_tg

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

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

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

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

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

@react_tg

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

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

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

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

#js #плагин #open_source

@react_tg

​Изучение React Suspense с помощью React Freeze

Слышали о новом компоненте React Suspense? Он позволяет корректно обрабатывать загрузку и визуализацию данных. Есть также React Freeze, который позволяет заморозить рендеринг компонентов и контролировать, что на самом деле обновляется в ваших приложениях React.

В этой статье подробно рассмотрен React Freeze и его возможности, а также показано, как его можно использовать в реальных проектах:

https://blog.logrocket.com/exploring-react-suspense-react-freeze/

#react

@react_tg

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

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

#GitHub | #Archive #Interesting #Useful #Web

@react_tg

⚛️ Демистификация хуков React: useCallback, useMemo и все-все-все

Вокруг React Hooks так и вьются постоянные интриги и расследования. Разберемся, что за штуки такие – эти useCallback, useMemo и прочие.

https://proglib.io/p/demistifikaciya-hukov-react-usecallback-usememo-i-vse-vse-vse-2021-02-28

@react_tg

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

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

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

@react_tg | #JavaScript #React #Interesting #Visualization

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

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

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

@react_tg | #Interesting #JavaScript #React

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

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

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

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

#TypeScript #React #Interesting

@react_tg

Font-awesome – Культовый набор инструментов SVG, font и CSS

Наиболее популярный набор инструментов для иконок, который был переработан и построен с нуля. Кроме того, здесь есть такие фичи как лигатуры шрифтов значков, библиотека SVG иконок, официальные пакеты NPM для популярных клиентских библиотек, таких как React, и CDN

#GitHub | #Archive #Icons

@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

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

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

➡️ Подробнее

@react_tg

Codrops — бесплатная база примеров кода на HTML, CSS и JavaScript

Всё, что собрано на сайте, собрано вручную. При этом помимо базово JS, можно найти материалы по jQuery, React, Vue и Angular.

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

#js #html #web

🖥 ​Rockpack

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

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

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

#JavaScript #React

@react_tg

Пример использования Wails для разработки десктопного приложения на React + Go.

Читать

@react_tg

StaticShield — инструмент для защиты веб-сайтов паролем без необходимости писать код

После того, как утилита самостоятельно сгенерирует код для защиты паролем, вам останется лишь переместить его.

При помощи StaticShield можно защитить и отдельные страницы сайта, и веб-приложение целиком.

Есть интеграция многих популярных фреймворков, включая NextJS, VueJS, React и т.д

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

#web #безопасность

Статья дня. react-tracking: декларативное отслеживание для приложений на React.

Читать статью

@react_tg

3D Carousel

Автор создал необычную карусель с нуля на React. Стилизация реализована с использованием препроцессора SCSS.

https://codepen.io/ykadosh/pen/ZEJLapj

@react_tg