Привет, друзья!

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

Мы решим 3 интересные задачи:

• рендеринг самописного 3D-объекта;
• рендеринг готовой 3D-модели;
• совместный рендеринг объекта и модели.

Знание вами основ работы с трехмерной графикой в браузере является опциональным.

Источником вдохновения для меня послужила эта замечательная статья.

Привет, друзья!

Представляю вашему вниманию перевод этой замечательной статьи, в которой рассказывается о разработке приложения с помощью React Query.

Репозиторий с кодом проекта.

Руководство по React Query.

Прим. пер.: автор рассказывает лишь о ключевых особенностях приложения, поэтому я рекомендую клонировать репозиторий, установить зависимости и запустить сервер для разработки, чтобы иметь возможность выполнять необходимые операции при чтении статьи. Обратите внимание: если у вас возникнут проблемы при запуске сервера для разработки с помощью команды npm start, перенесите переменные, определенные в этой команде в файле package.json, в файл .env:

SKIP_PREFLIGHT_CHECK=true
TSC_COMPILE_ON_ERROR=true
ESLINT_NO_DEV_ERRORS=true

И отредактируйте команду start следующим образом:

"start": "react-scripts start"

Привет, друзья!

В данном туториале я хочу поделиться с вами опытом решения одной интересной практической задачи.

Предположим, что у нас имеется страница сравнения товаров. На этой странице отображается слайдер с карточками товаров и таблица с их характеристиками. Задача состоит в том, чтобы синхронизировать переключение слайдов и прокрутку таблицы. Условия следующие:

• ширина таблицы должна соответствовать ширине слайдера;
• ширина колонки таблицы должна соответствовать ширине слайда;
• слайды можно переключать с помощью перетаскивания, нажатия на кнопки управления и элементы пагинации;
• таблицу можно прокручивать с помощью колесика мыши (на десктопе) и перемещения указателя (на телефоне);
• при взаимодействии пользователя с одним компонентом второй должен реагировать соответствующим образом: при переключении слайда должна выполняться прокрутка таблицы, при прокрутке таблицы - переключение слайдов.

Репозиторий с кодом проекта.

Привет, друзья!

Еще недавно управление содержимым веб-страницы с помощью жестов можно было наблюдать разве что в фантастических фильмах. Сегодня все, что для этого требуется - видеокамера и браузер (и библиотека от Google).

В данном туториале мы рассмотрим 5 примеров:

• получение данных с видеокамеры и их отрисовка на холсте (canvas);
• обнаружение и отслеживание кисти руки;
• управление "курсором" с помощью указательного пальца;
• определение жеста "щипок" (pinch);
• нажатие кнопки с помощью щипка.

Все примеры будут реализованы на чистом JavaScript.

Источником вдохновения для меня послужила эта замечательная статья.

Для обнаружения и отслеживания руки и жестов будет использоваться MediaPipe. Для работы с зависимостями - Yarn.

Репозиторий с кодом проекта.

Привет, друзья!

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

Веб состоит из технологий, появившихся более 25 лет назад. HTTP, HTML, CSS и JS были стандартизированы в середине 90-х (когда мне было 8 лет). С тех пор веб эволюционировал в вездесущую платформу приложений. Одновременно с эволюцией веба развивалась и архитектура разработки соответствующих приложений. Сегодня существует большое количество архитектур, которые можно использовать для разработки веб-приложений. В настоящее время самой популярной из них является "Одностраничное приложение" (Single Page App, SPA), но сейчас наблюдается переход к новой улучшенной архитектуре.

Привет, друзья!

В этой статье я хочу рассказать вам о малоизвестных Web API, которые могут оказаться весьма полезными в "пограничных" ситуациях:

• Page Visibility API
• Web Share API
• Broadcast Channel API
• Internationalization API
• Beacon API
• Clipboard API
• Notifications API
• Performance API

Репозитории с примерами:

• Первые четыре интерфейса
• Другие интерфейсы

Привет, друзья!

В этой статье я покажу вам, как начать разработку библиотеки компонентов с помощью Vite, React, TypeScript и Storybook.

Мы разработаем библиотеку, состоящую из одного простого компонента - кнопки, подготовим библиотеку к публикации в реестре npm, а также сгенерируем и визуализируем документацию для кнопки.

Репозиторий с кодом проекта.

Привет, друзья!

В данной статье мы с вами разработаем кастомный хук, функционал которого будет аналогичен функционалу встроенного хука useEffect, за исключением того, что наш useEffect будет повторно выполняться только при изменении его зависимостей любого типа (неважно, примитивы это или объекты).

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

• официальная документация по useEffect;
• Продвинутые хуки в React: все о useEffect;
• React: полное руководство по повторному рендерингу.

Этого должно быть достаточно для понимания того, о чем мы будем говорить. В дальнейшем будет приведено еще несколько ссылок для более глубокого погружения в тему.

Репозиторий с кодом проекта.

Начнем с примера.

Привет, друзья!

Radash - это современная альтернатива Lodash, библиотека, предоставляющая набор часто используемых утилит (вспомогательных функций), реализованных на TypeScript. В данной статье мы вместе с вами разберем исходный код нескольких наиболее интересных утилит.

Репозиторий с кодом библиотеки находится здесь.

Обратите внимание: я позволил себе немного модифицировать отдельные утилиты для повышения читаемости и сокращения шаблонного кода. Также в нескольких местах пришлось поправить типы.

Начнем с чего-нибудь попроще.

Привет, друзья!

В данной статье мы с вами разработаем HOC (Higher-Order Component — компонент высшего порядка) и хук (custom hook) для наблюдения за DOM-элементами на странице с помощью Intersection Observer API.

Функционал нашего HOC будет похож на функционал, предоставляемый такими пакетами, как react-lazyload или react-lazy-load. Основное его назначение будет состоять в отложенной (ленивой — lazy) загрузке компонентов. Суть идеи заключается в рендеринге только тех компонентов, которые находятся в области просмотра (viewport — вьюпорт), что может существенно повысить производительность приложения.

Назначением хука будет регистрация пересечения (intersection) наблюдаемого (observable) элемента с областью просмотра (или другим элементом). Этот хук предоставляет очень интересные возможности, парочка из которых будет рассмотрена в соответствующем разделе.

Репозиторий с кодом проекта.

При разработке инструментов я буду применять систему типов, предоставляемую TypeScript.