React

React-magic-motion Это библиотека react.js, которая ✨ волшебным образом анимирует ваши компоненты. https://www.react-magic-motion.com/ ✍️ @React_lib

Понимаем полностью useMemo и useCallback Экскурсия по двум самым известным хукам в React Если вы изо всех сил пытались разобраться в useMemo и useCallback, вы не одиноки! Я разговаривал со многими разработчиками React, которые cломали голову над этими двумя хуками. Моя цель в этом здесь — прояснить всю эту путаницу. Мы узнаем, что они делают, почему они полезны и как получить от них максимальную пользу. https://habr.com/ru/articles/807139/ ✍️ @React_lib

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 • Отмена запросов и многое друго https://github.com/TanStack/query ✍️ @React_lib

🚀 Хотите выйти на профессиональный уровень программирования на JavaScript? Освойте Nest.Js — мощный фреймворк разработки веб-приложений Приходите на бесплатный практический урок от OTUS. На вебинаре разберем: 1⃣ Архитектуру и дизайн 2⃣ Роутинг и контроллеры 3⃣ Middleware 4⃣ Работу с базами данных 5⃣ Тестирование и отладку 6⃣ Сомнения и вопросы ⏰ Занятие пройдёт 17 апреля в 20:00 мск в рамках набора на онлайн-курс «Node.js Developer». Спикер — разработчик веб-приложений с опытом более 10 лет. Для всех, кто запишется на бесплатный вебинар, будет доступна специальная цена — вы сможете обсудить свое обучение с менеджерами OTUS. ➡ Для бесплатного участия и получения записи регистрируйтесь прямо сейчас: РЕГИСТРАЦИЯ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Деструктуризация в React. Очевидно, но важно Деструктуризация, которая появилась в стандарте ES6, уже не вызывает вопросов у многих из нас, есть большое количество статей, раскрывающих ее возможности. В основном, мы все тесно с ней дружим и пользуемся. Казалось бы, что можно рассказать о том, о чем все и так знают? Но практика и чтение статей на Хабре, показали, что есть некоторые нюансы использования деструктуризации в React, о которых не все из нас знают или просто не задумываются, хотя они и являются очевидными. Как часто Вам приходилось сталкиваться с подобным кодом? export default function ParentComponent ({ post }) { const { images, title } = post return ( <ChildComponent images={images} title={title} /> ) } https://habr.com/ru/articles/804187/ ✍️ @React_lib

Как создавать собственные пользовательские React Hooks React Hooks открывают совершенно новый способ написания функциональных компонентов, позволяя нам добавлять возможности, доступные для компонентов класса, например, логику с состоянием. https://blog.logrocket.com/create-your-own-custom-react-hooks/ ✍️ @React_lib

Headless Component: паттерн для создания пользовательских интерфейсов React По мере того как элементы управления React UI становятся все более сложными, сложная логика может переплетаться с визуальным представлением. Это затрудняет рассуждения о поведении компонента, затрудняет его тестирование и приводит к необходимости создавать похожие компоненты, которым нужен другой внешний вид. Headless Component извлекает всю невизуальную логику и управление состоянием, отделяя мозг компонента от его внешнего вида. https://martinfowler.com/articles/headless-component.html ✍️ @React_lib

Многопоточное приложение React с использованием useWorker Если мы выполняем какую-либо требующую больших затрат задачу, она будет блокировать взаимодействие с пользовательским интерфейсом. И пользователю придется ждать, пока она завершится, чтобы выполнить любое другое действие, что создает плохое впечатление от UX. https://dev.to/nilanth/multi-threaded-react-app-using-useworker-gf8 ✍️ @React_lib

ReaPer : Инструмент с открытым исходным кодом для анализа производительности React-приложений https://medium.com/@annako/reaper-an-open-source-dev-tool-to-analyze-react-application-performance-786f1d40f6de ✍️ @React_lib

Перед вами — книга-метод, книга-наставник, способная перевернуть мышление и помочь выработать осознанный подход к работе и жизни в целом путём высокоуровневого планирования. В своей второй книге IT-архитектор, методолог, педагог Александр Бындю раскрывает наиболее эффективный на сегодняшний день метод стратегического планирования, получивший название «Карта гипотез». Карта учит, как достигать намеченной цели через гипотезы, и служит навигатором на этом пути. В основу книги легли годы практики, и с уверенностью можно сказать, что Карта гипотез позволяет создать стратегию достижения для самых амбициозных целей. У Карты гипотез нет ограничений по области применения или роли пользователя — она будет полезна в самых разных ситуациях, от личного планирования до планирования работы огромной компании. Автор надеется, что его метод, которому посвящена эта книга, послужит вашему благополучию во всех сферах жизни. Ознакомиться с книгой

👀 Похоже, что React 19 пересматривает обработку ошибок Включая 2 новых публичных API: - onCaughtError - onUncaughtError Callbacks, срабатывающие на React Root (createRoot/hydrateRoot) startTransition/flushSync теперь будет подавлять ошибки вместо их повторного выбрасывания на местах вызова. ✍️ @React_lib

Не используйте React.lazy() при рендеринге. Он будет возвращать каждый раз новый экземпляр компонента (как HOC) и потеряет свое состояние при повторном рендеринге. Небольшая ошибка, найденная пользователем Docusaurus: лучше перенести lazy call за пределы компонента. ✍️ @React_lib

Изучите JavaScript на продвинутом уровне, на практике познакомьтесь с актуальным технологическим стеком Онлайн-курс для разработчиков на JS, которые хотят повысить квалификацию и увеличить доход 🔥На курсе вы получите навыки для использования инструментов Fullstack-разработчика уровня Middle Старт 28 марта. Доступна рассрочка на обучение! А еще мы уговорили создателей курса на скидку 10% по 🎁промокоду js10🎁. Узнайте, готовы ли вы расширить свои карьерные возможности: https://vk.cc/cvGsPw Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

⚛️ Совместимость + разделение задач - ключевой момент в React Узнайте, как создавать различные уровни абстракции, чтобы сделать ваши компоненты более устойчивыми к изменениям. ✍️ @React_lib

Мемоизация в React: я почитал документацию вместо вас В статье рассмотрены три инструмента мемоизации в React: useMemo, useCallback, memo. Главный источник информации: документация React. Не всем комфортно работать напрямую с документацией, так что если вы постоянно откладываете погружение в документацию React - я сделал это за вас, постарался выделить самое важное, и дать ссылки для углубленного погружения. Так как мы будем рассматривать не самые базовые вещи, касающиеся React, то я не буду останавливаться на таких основах как хуки, состояние, свойства, чистые функции и чистые компоненты, ожидая, что вы ознакомитесь с ними за пределами статьи. А также все рассмотренное ниже относится в первую очередь к React 18. https://habr.com/ru/companies/otus/articles/800549/ ✍️ @React_lib

Раскрытие возможностей Storybook Выходя за рамки системы проектирования: как использовать Storybook для разработки, тестирования и проверки всех частей фронтенд-приложения. Storybook - популярный инструмент для фронтальной веб-разработки, наиболее известный как витрина для дизайнерских систем и библиотек пользовательского интерфейса. Однако Storybook обладает гораздо более широкими возможностями, чем просто демонстрация компонентов пользовательского интерфейса! https://commerce.nearform.com/blog/2023/unlocking-the-power-of-storybook/ ✍️ @React_lib

Building Micro Frontends with React 18: Develop and deploy scalable applications using micro frontend strategies Автор: Vinci J Rufus (2023) В книге рассматриваются два паттерна построения микрофронтендов - паттерн multi-SPA и паттерн micro apps.Вы узнаете, какие паттерны и когда следует использовать, а также рассмотрите нюансы развертывания этих микрофронтендов с использованием облачных нативных технологий, таких как Kubernetes и Firebase. С помощью этой книги вы получите глубокое понимание управления состояниями, решения проблем с маршрутизацией и стратегий развертывания между различными микрофронтендами. К концу книги вы научитесь проектировать и создавать микрофронтенд-приложение на основе React с использованием федерации модулей и эффективно развертывать его в облаке. ✍️ @React_lib

Как эффективно использовать TypeScript при разработке server-side приложений на Node.js? Узнайте на бесплатном практическом уроке от OTUS, где вы вместе с опытным экспертом разберете: 1. Введение в TypeScript 2. Интеграцию TypeScript с Node.js 3. Работу с модулями и зависимостями 4. Основные типы данных и аннотации типов 5. Работу с асинхронным кодом 6. Разработку серверной логики 7. Тестирование и отладку приложений 8. Лучшие практики разработки 9. Практические примеры и демонстрации Встречаемся 21 марта в 20:00 мск в рамках курса «JavaScript Developer. Professional». Доступна рассрочка на обучение! На курсе осталось 3 свободных места. А еще мы уговорили создателей подарить участникам вебинара скидку на курс 10% по 🎁промокоду js10🎁. 👉 Чтобы зарегистрироваться на бесплатный урок, пройдите тест на знание JavaScript: https://vk.cc/cvo9XO Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

React useTransition: изменение производительности или...? Разбираемся, что такое React Concurrent Rendering, что делают такие хуки, как useTransition и useDeferredValue, каковы преимущества и недостатки их использования. https://www.developerway.com/posts/use-transition ✍️ @React_lib

⚛️ Совет по React💡 Избегайте преждевременных оптимизаций с помощью UseMemo ✍️ @React_lib