Как избежать моков в тестах с React Router

Для того чтобы тестировать компоненты, где используется React Router, необходимо использовать обертку для рендера компонентов. Это нужно как просто для теста компонента с роутами, так и для теста навигации между страницами.

Для обертки компонента для тестов нужно использовать MemoryRouter. Вот пример такой функции, которая создана поверх render из RTL:

import React, { isValidElement } from "react";
import { render } from "@testing-library/react";
import { RouterProvider, createMemoryRouter } from "react-router-dom";

export function renderWithRouter(children, routes = []) {
  const options = isValidElement(children)
    ? { element: children, path: "/" }
    : children;

  const router = createMemoryRouter([{ ...options }, ...routes], {
    initialEntries: [options.path],
    initialIndex: 1,
  });

  return render(<RouterProvider router={router} />);
}

Пример использования:

it("should ensure the page is rendered", () => {
  renderWithRouter(<About />);

  expect(screen.getByText("About page")).toBeInTheDocument();
});

https://webup.org/blog/how-to-avoid-mocking-in-react-router-v6-tests/

Практикуйте React, исправляя тесты

Если вы сомневаетесь в своих знаниях JSX, то можете их проверить. Есть репозиторий с тестами, которые помогут проверить знания JSX. Каждому тесту дано описание и нужно сделать так, чтобы он выполнялся. Ну а если не хочется клонировать репозиторий, то можно сделать это в браузере в CodeSandbox.

https://reactpractice.dev/exercise/practice-react-by-fixing-tests-check-your-jsx-knowledge/

Борьба с раздуванием HTML

Разделение интересов, к которому стремятся в UI библиотеках, позволяет больше переиспользовать компоненты, но ведет к раздуванию HTML. Одни компоненты создают отступы, другие стилизуют что-то и т.д. Это приводит к созданию лишних компонентов-оболочек.

Причины, по которым не нужны лишние компоненты-оболочки:

1. Раздутый HTML вредит производительности.
2. Избыточные элементы создают проблемы с доступностью.
3. Избыточные элементы могут нарушить стиль.
4. Раздражает работать с глубоко вложенными DOM деревьями.

В своем блоге Элиза Хайн подготовила набор техник, которые позволяют сделать компоненты гибкими и не раздувать HTML.

https://elisehe.in/2023/03/27/minimal-html-in-design-systems

Как сделаны типы React

В блоге JSer показали основные типы React, которые используются чаще всего, а также показали их исходный код с комментариями. Например, в статье объясняется в чем отличие ReactElement от ReactNode. Если коротко, то используется аналогия с вебом: Node и Element, где Element является подтипом Node. Также и в React, ReactElement является подтипом ReactNode.

interface ReactElement<
  P = any, 
  T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>
 > {
  type: T;
  props: P;
  key: Key | null;
}

type JSXElementConstructor<P> =
  | ((
        props: P,
    ) => ReactElement<any, any> | null)
  | (new (props: P) => Component<any, any>);

ReactElement может быть как <Component>, так и любой HTML тег, например <p>.

https://jser.dev/2023-05-31-react-types-in-typenoscript/

RSC с нуля

Дэн Абрамов написал большой гайд с глубоким погружением в работу RSC о том, как реализовать RSC с нуля.

Этот гайд не объясняет преимуществ RSC или то, как реализовать приложение с помощью RSC. Этот гайд для тех, кто любит новые технологии и готов внедрять их с нуля.

Гайд поделен на части, в каждой из которых показывается, как создать что-то существующее с нуля. Например, как рендерить JSX в HTML, как сделать поддержку асинхронности в компонентах и как обновлять JSX с сервера на клиенте.

https://github.com/reactwg/server-components/discussions/5

Несколько уровней абстракций в UI библиотеке

В блоге Spotify рассказали как делают UI библиотеку, чтобы сохранялся баланс между кастомизацией и конфигурацией компонентов. Кастомизация обеспечивает свободу и скорость разработки, а конфигурация обеспечивает связность и удобство сопровождения за счет использования абстракций. Чем больше абстракций, тем больше контроля со стороны разработчика UI библиотеки и меньше вводимых данных со стороны пользователя.

В Spotify у компонента есть несколько уровней абстракций. Можно использовать компонент как есть, так и кастомизировать компонент, передав в него любое содержимое. Есть три варианта использования:

- Конфигурация: просто передать данные в пропсы, подходит для стандартных сценариев.
- Слоты: передать в проп компоненты, подходит для небольших изменений.
- Кастомизация: полностью изменить содержимое компонента.

https://engineering.atspotify.com/2023/05/multiple-layers-of-abstraction-in-design-systems/

Почему клиентские компоненты во время SSR преобразуются в HTML?

Когда появился React Server Components, произошло разделение на клиентские и серверные компоненты. Дэн Абрамов сделал небольшое визуальное объяснение различий между Client Tree (уже существующим) и Server Tree, который был добавлен в RSC.

Исходя из поста клиентские компоненты (Client Tree) - это обычные компоненты React, которые мы использовали раньше. Во время SSR клиентские компоненты выполняются на сервере и преобразуются в HTML для инициализации страницы, как и раньше.

https://github.com/reactwg/server-components/discussions/4

Million.js: замена VDOM для React

Million.js – это замена VDOM для React, которая увеличивает скорость работы приложения в несколько раз. Библиотека использует подход Block Virtual DOM, который по другому определяет различия и его работу можно разбить на две части:

1. Статический анализ: Virtual DOM анализируется для извлечения динамических частей дерева в хэш-карту, сопоставляя их со стейтом.
2. Грязная проверка: стейт (не Virtual DOM) сравнивается, чтобы определить, что изменилось. Если стейт изменился, то DOM обновляется через хэш-карту.

Таким образом, Million.js наиболее эффективен в случае, когда на сайте много статического контента и мало динамических частей.

В Million.js есть свои ограничения и правила, которые созданы для увеличения производительности приложения. Например, одно из них – не рекомендуется использовать UI библиотеки типа Material UI или Chakra UI, т.к. они не оптимизированы для работы с Million.js.

https://million.dev/

Как BlueSky структурирует приложение и управляет стейтом

Алекс Кондов в своем блоге разобрал архитектуру приложения BlueSky. BlueSky – это социальная сеть, универсальное приложение, которое использует react-native и создается для веба и как приложение для iOS/Android.

Изучение открытых проектов помогает изучить новые архитектурные подходы и приемы в организации стейта. В BlueSky в качестве стейт-менеджера используется Mobx и использует ООП-подход для реализации стейта в классах моделей. Вся бизнес логика находится в классах-стейтах, а компоненты используют ее.

https://alexkondov.com/reading-code-bluesky/

Современный CSS для динамической компонентной архитектуры

В блоге Modern CSS вышел гайд по использованию современного CSS с фокусом на темизацию, адаптивный макет и дизайн компонентов. Стефани Эклз рассказывает про фичи CSS, которые улучшают организацию кода и про фичи компоновки, такие как grid и container query. Также автор разберет как создать основные компоненты дизайн системы с помощью современного CSS: кнопка, карточка, пагинация.

https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/

Hyper Fetch 5.0: фреймворк для получения данных

Hyper Fetch – относительно новый фреймворк для получения данных. Он включает в себя логику для выполнения запросов, кэширования, создания очередей и offline-first режима. Основные особенности:
- написан на TypeScript.
- есть мапперы запросов/ответов, где можно сделать валидацию.
- поддержка дедупликации запросов, создание очереди запросов, создание интерцепторов, отмена запросов.
- поддержка кастомных адаптеров, включая Firebase и Graphql.
- есть отдельный модуль для работы с сокетами.
- встроенная возможность создания моков.
- есть поддержка React.

Примеры создания запросов:

export const getUser = builder.createRequest<UserModel>()({
  endpoint: "/api/user/:userId",
  cache: true,
  cacheTime: DateInterval.second * 10
});

export const postFile = builder
  .createRequest<{ response: string }, { file: File }>()({
    endpoint: "/api/files",
    method: "POST",
    queued: true,
    retry: 0
  })
  .setDataMapper((data) => {
    try {
      const formData = new FormData();
      formData.append("file", data.file);
      return formData;
    } catch (err) {
      return data;
    }
  });

https://hyperfetch.bettertyped.com/

Телепортация в React: позиционирование, контекст наложения и порталы

В блоге Нади Макаревич вышел обзор о причинах использования порталов в React. Основная причина, по которой стоит прибегать к использованию порталов – избежать проблем с контекстом наложения DOM элементов. В порталах можно рендерить модальные окна, чтобы они всегда были поверх других слоев.

Также в статье разобрано свойство position, какие у него есть значения и как они влияют на DOM. С помощью position можно определить, как будет отображаться элемент. Свойство position подвержено контексту наложения, поэтому все равно используют порталы для отображения модальных окон.

https://www.developerway.com/posts/positioning-and-portals-in-react

Использование useMutation для оптимистических изменений

Туториал по использованию React Query для использования оптимистических изменений для компонента “переключатель”. В туториале описано, как использовать хук useMutation, useQuery, как локально обновить кэш и инвалидировать его.

Описание поведения переключателя в туториале:
- Переключатель должен делать запрос при клике на него.
- Пока запрос выполняется, должен появиться спиннер загрузки.
- Если запрос выполнен успешно, то показать иконку галочки.
- Переключатель должен обновляться оптимистично, т.е. предполагается, что запрос будет выполнен успешно.
- Если запрос не выполнен, то надо показать иконку ошибки и вернуть переключатель в предыдущее состояние.

https://www.propelauth.com/post/using-usemutation-to-make-an-advanced-toggle-in-react

Создание лучшего и более быстрого представления кода

В блоге Github вышла статья о том, как разрабатывалась новая страница просмотра исходного кода репозитория.

Авторы описали проблемы, с которыми столкнулись при разработке этой страницы, а также пути решения. Например, при открытии исходного файла с большим количеством строк возникла проблема с производительностью: создание подсветки кода занимала много времени. Для решения проблемы использовали виртуализацию, т.е. генерировали подсветку только для части кода видимой в окне браузера. Виртуализация добавила другую проблему – перестал работать поиск по документу через Ctrl + F. Для быстрого решения проблемы нужно было создать свой поиск по документу.

https://github.blog/2023-06-21-crafting-a-better-faster-code-view/

Как работает useState() внутри React

В блоге JSer вышел обзор по устройству хука useState() в React. В обзоре рассматривается исходный код хука, функция изменения стейта, процесс обновления стейта в потоке рендера компонента. К исходному коду даны комментарии автора по тому, что делает определенный участок кода и в каких случаях он выполняется.

https://jser.dev/2023-06-19-how-does-usestate-work/

Расстаемся с SVG-in-JS в 2023 году

Хранение SVG в JS бандле ухудшает производительность сайта и будет лучше использовать SVG в HTML, сохраняя JS бандл небольшим и быстрым. В блоге Джейкоб Гросс вышел обзор использования SVG в JS и почему это неправильно, а также как правильно хранить и использовать SVG на сайте.

Основная причина, почему SVG в JS это плохо – производительность. При хранении SVG в JS браузеру приходится тратить больше времени на парсинг и компиляцию. Плюс там, где есть парсинг, там и увеличение объема использованной памяти для хранения результатов. Особенно эти проблемы с производительностью ощущают пользователи недорогих смартфонов.

Есть несколько практик вставок SVG на сайте, каждый из них может использоваться в разных ситуациях:

- Использование тега <img />.
- Использование SVG и <use /> для спрайтов текущего домена.
- Использование CSS и mask-image для спрайтов любых доменов.

https://kurtextrem.de/posts/noscript-in-js

Пишем хорошие компоненты, которые захочется переиспользовать, а плохие — не пишем

На Хабре вышла статья, в которой рассказывают про признаки хорошего и плохого компонента в React.

Основные признаки того, что компонент плохой:
- Сложный: делает слишком много, используются сложные технологии для решения простых проблем.
- Неконсистентный: использование пропсов не соответствует ожидаемому поведению.
- Props hell: большое количество пропсов, которое со временем становится сложно поддерживать.

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

https://habr.com/ru/companies/avito/articles/739330/

HolyJS в поисках спикеров!

На конференции HolyJS открыт CFP — Call for papers. И нет, это не «звонок для бумаги». Это ребята ищут спикеров, которые хотят выступить на конференции.

Если вы хотите поделиться знаниями или интересным кейсом компании, подавайте заявку на выступление. Расскажите о графике и анимациях, языках, бэкенде, инструментах разработки, UI-разработке и soft skills. Полный список тем — на сайте. И не стесняйтесь предлагать свои.

Вы можете выступить онлайн или офлайн и выбрать любой формат выступления — доклад, воркшоп, интервью, обсуждение, BoF-сессию или придумать что-то свое. 

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

Подавайте заявки до 25 июля.

Создание бесшовного мультиязычного UI в React

Туториал по созданию мультиязычного UI с помощью react-i18next. Внутри него показывается, как использовать хук useTranslation, как сменить язык и как использовать файлы переводов.

react-i18next – одна из наиболее популярных библиотек для переводов, поддерживает TypeScript и популярные фреймворки.

https://www.honeybadger.io/blog/creating-multi-language-user-interface-with-react/

Не наступил ли у React момент переписывания Angular.js на Angular?

Обзор нового подхода к разработке на React с помощью Server Components. При использовании серверных компонентов меняется подход к разработке. Например, для получения данных вместо useEffect и react-query нужно использовать fetch и асинхронные компоненты. При этом fetch – это улучшенная версия fetch от React с кэшированием и дедупликацией запросов.

Помимо react-query для разработки не доступны и другие популярные библиотеки, например, material-ui, styled-components, emotion. CSS-in-JS не будет работать в серверных компонентах.

Плюс React в том, что в проекте серверные компоненты можно использовать по желанию. Серверные компоненты хорошо подходят для сайтов, где важна SEO оптимизация или есть сложные вычисления в компонентах, которые лучше делать на сервере.

https://habr.com/ru/articles/746918/

Понимание SVG путей

В своем блоге Нанда Шахрасяд опубликовала гайд по использованию атрибута d в SVG путях.

Атрибут d может выглядеть как магическое заклинание, но на самом деле он представляет из себя серию команд, которая говорит браузеру как должен быть отрисован путь.

В гайде разобраны абсолютные и относительные команды, курсоры, как рисовать линии и закрывать путь, про кривые Безье и дуги.

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

https://www.nan.fyi/noscript-paths