React

Совет по 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

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

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