Headless Component: паттерн для создания пользовательских интерфейсов React

По мере усложнения UI-элементов React сложная логика может переплетаться с визуальным представлением. Из-за этого становится сложнее понять поведение компонента, тестировать его, а также создавать аналогичные компоненты, которым нужен другой внешний вид. Headless компонент извлекает всю невизуальную логику и управление состоянием, отделяя «мозг» компонента от его внешнего вида.

Подробнее об этом подходе в статье: https://martinfowler.com/articles/headless-component.html

#react

​Как использовать React в приложениях Angular

Нет, цель не в создании монстра Франкенштейна, который будет представлять из себя куски различных фреймворков. Но это может быть действительно кстати, если вам нужно быстро добавить компонент, которого нет в вашем фреймворке, но есть в экосистеме React. Или если необходимо интегрировать сервисы, которые работают на React.

О том, как это сделать:

https://nuancesprog.ru/p/16840/

#react #angular

GraphQL на практике: создаём реальный чат с Apollo Server и React

Практический проект: создаём чат-приложение с помощью GraphQL, Apollo Server, WebSocket и React. Полный цикл — от бекенда до фронтенда, в реальном боевом примере.

Если вам, конечно, не лень этим заниматься на майских😅

#graphql@tproger_web #react@tproger_web

Old but gold: ​Как ускорить таблицу на React в 1000 раз, изменив одну строку

JP Camara, главный инженер Wealthbox, в своём блоге поделился интересным опытом ускорения TanStack Table — новой версии React-библиотеки для создания функциональных таблиц — аж до 10 мс. Делимся с вами ссылкой на перевод его статьи:

https://habr.com/ru/companies/netologyru/articles/750246/

#react

Переезд с Webpack на Vite: как ускорить React-проект и упростить сборку

Если сборка проекта на Webpack занимает вечность, а конфигурации становятся всё сложнее, возможно, пора взглянуть в сторону Vite. Этот инструмент предлагает молниеносную сборку, встроенный HMR и простую настройку. В статье описан реальный опыт перехода с Webpack и react-scripts на Vite, включая решение проблем с FontAwesome, настройку прокси и корректное размещение index.html.

И все-таки, Vite или Webpack?

❤️- Vite
🔥- webpack

#фронтенд #react #vite

React 19 — новые хуки за 15 минут

Владилен Минин коротко демонстрирует useActionState, useOptimistic и улучшенный useDeferredValue, чтобы вы поняли, как ускорить UI без лишних перерендеров.

#react@tproger_web

Compound Component: избавляемся от props-drilling и получаем гибкий API

«Составной компонент» — паттерн, в котором родитель хранит состояние, а дочерние элементы свободно комбинируются без явной передачи пропов. В материале показан путь от обычного аккордеона с длинным списком props к контекст-ориентированной версии, где порядок и число подпроектов не ограничены. Плюсы, минусы, подводные камни — всё разобрано на живых примерах.

#фронтенд #react

Web API, которые функционально приближают веб-приложения к нативным

Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.

В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/

#javascript #api #react

RTK Query + OpenAPI: автоматически генерируем типобезопасные API-хуки для React

Забываем про ручные fetch и бесконечные типы — берём спецификацию OpenAPI, прогоняем через openapi-typescript-codegen, подключаем к RTK Query и сразу получаем готовые хуки: useGetPetsQuery, useCreatePetMutation и другие.

Полный путь показан в статье: настройка генератора, создание базового api, интеграция в Redux store и примеры рефакторинга, где количество кода сокращается в разы.

#фронтенд #react #api

Революция в условном рендеринге React

Если вам надоело писать if, && и ? : в каждом React-компоненте, эта статья — находка. Здесь показано, как использовать декларативные абстракции (<Show>, <Switch>, <Match>) в React, вдохновившись стилем SolidJS, чтобы сделать условный рендер читаемым и масштабируемым. А ещё — как эти паттерны можно адаптировать под ваш собственный фреймворк.

#react