React

Как использовать пользовательский хук для обработки состояний массива в компонентах 💡 ✍️ @React_lib

Frontend meetup 1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов. 2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках. 3. Serverless - уже можно? — Андрей Лаврентьев, NDA Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге. Модератор Григорий Петров, Devrel, Evrone Эксперт Глеб Михеев, Руководитель ПК, FrontendConf ➖➖➖ 🗓 22 мая, начало в 19:00 мск, Среда 🌐 ОНЛАЙН ✅ Регистрация на мероприятие

Совет по React💡 Отложите создание non-primitive values, если вы используете их в массиве зависимостей. ✍️ @React_lib

⚛️ useEffect против useLayoutEffect useEffect: асинхронный и не задерживает отрисовку DOM в браузере. useLayoutEffect: синхронный, и он задерживает отрисовку DOM для браузера. Он выполняет свой код непосредственно перед отрисовкой в браузере. ✍️ @React_lib

❓Как строится современная веб-разработка на JS и при чем тут React? Узнайте на открытом практическом уроке от OTUS, где опытный эксперт разберет: - какие подходы используются в разработке сегодня; - основные технологии для разработки фронтенда: react, vue, angular; - их преимущества и недостатки. Спикер Игорь Звягин — опытный JS-разработчик. Встречаемся 13 мая в 20:00 мск в рамках курса «React.js Developer». Все участники вебинара получат специальную цену на обучение и персональную консультацию от менеджеров OTUS! 👉 Оставьте заявку прямо сейчас, чтобы посетить бесплатный урок: https://otus.pw/awig/?erid=2Vtzqxds1rZ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

⚛️ Вместо того чтобы смешивать бизнес-логику в компонентах React, мне нравится создавать небольшие и предсказуемые абстракции reducer с помощью useReducer ✍️ @React_lib

⚛️ Как использовать композицию в React для создания расширяемых компонентов? ✍️ @React_lib

Авторизация в React - базовые сведения Вэтой статье я хочу рассказать об архитектуре приложения, реализующего функцию аутентификации и авторизации. Статья построена на минималистичном примере. Тут главное понять концепцию. Сделав это, приложение можно дополнить новым функционалом и включить в любое своё приложение. https://danshin.ms/simple-login-react-app/ ✍️ @React_lib

React 19: forwardRef → ref ✍️ @React_lib

🖥 React 19: useFormState → useActionState ✍️ @React_lib

React 19 больше не будет поддерживать fetch() 🌶🌶🌶 Вам придется использовать React.cache(), чтобы избежать дублирования запросов fetch(). https://github.com/facebook/react/pull/28896 ✍️ @React_lib

Разделение логики и представления в React-приложении Самыми популярными подходами в декомпозиции React-компонентов являются hoc и hook. Т.е. компоненты высшего порядка и кастомные хуки. С их помощью можно сделать приложение более гибким и легче тестируемым, однако сами подходы немного разнятся. 00:00 Постановка задачи 02:13 HOC - компоненты высшего порядка 16:34 Hooks - кастомные хуки 26:39 Подведение итогов источник ✍️ @React_lib

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