🖥 5 маленьких, но полезных библиотек React

▶️1. Urlcat

Urlcat — это крошечная JavaScript-библиотека, которая делает очень удобным построение URL и предотвращает распространенные ошибки.

Да, для построения URL можно использовать URL API. Но вам все равно придется позаботиться о некоторых деталях вместо того, так что используйте Urlcat.

Вы ее подключаете, и она просто работает. Не нужно изучать сложные шаблоны или тратить часы на документацию.

🖥 Смело пробуйте, GitHub


▶️2. UseHooks-ts

UseHooks — это небольшая библиотека с хорошо написанными, задокументированными и полностью типизированными (для пользователей TypeScript) хуками для всех этих вещей. Использование этой библиотеки позволит вам не отвлекаться на мелочи и сосредоточиться на самом проекте.

🖥 GitHub


▶️3. Logt

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

После долгих поисков подходящей библиотеки, я нашел Logt, которая отвечает всем моим требованиям.

🖥 Рекомендую на 100%, GitHub


▶️4. Loadable Components

Несколько ключевых моментов: Loadable Components поддерживает SSR (рендеринг на стороне сервера), Library Splitting (разделение библиотеки) и даже полный динамический импорт. Неплохо, да?

Библиотека действительно проста в использовании. Практически plug-and-play.

🖥 GitHub


▶️5. Emoji Mart

Работая над различными проектами, мне часто приходится иметь дело с эмодзи. Так что держите эту маленькую библиотеку.

🖥 Позвольте вам представить Emoji Mart, GitHub

@react_tg

🖥 10 хоткеев VS Code, которые ускорят работу с React и не только

⏩Создать структуру документа
! и Tab

Это сочетание клавиш за секунду создаёт базовую структуру кода или вложенные теги.

⏩Быстро добавить комментарий
Windows — Ctrl + /
macOS — Command + /

⏩Перейти к строке под номером
Windows — Ctrl + G
macOS — Control + G

Иногда отладчики внезапно сообщают, что на строке 953 случилась непоправимая инфернальная ошибка вселенной. Чтобы не выискивать вручную, не листать и не тратить на это время, нажмите Ctrl + G, введите номер строки и спокойно спасайте вселенную.

⏩Поменять строку местами с соседними
Windows — Alt + ↑ / ↓
macOS Option + ↑ / ↓

Alt и стрелки меняют текущую строку местами с соседними.

⏩Дублировать строку
Windows Shift + Alt + ↓ / ↑
macOS Shift + Option + ↓ / ↑

⏩Перейти к парной скобке

Windows Ctrl + Shift + \
macOS Shift + Command + \

Если кода много, очень просто запутаться в закрывающих и открывающих скобках, непонятно, где какой блок. На помощь приходит Ctrl + Shift + \.

⏩Переименовать переменную

Windows — F2
macOS — F2

Чтобы не выискивать переменные по всему документу и не менять руками, есть F2.

⏩Отформатировать документ

Windows — Shift + Alt + F
macOS Shift + Option + F

VS Code предложит выбрать расширение из существующих, а потом красиво отформатирует документ — расставит по местам блоки и скобки и т.д.

⏩Перейти к переменной

Windows — F12
macOS — F12

F12 перенесёт вас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.

⏩Включить или выключить перенос слов

Windows — Alt + Z
macOS Option + Z

Если строки кода или текст не вмещаются в редактор по ширине, включите перенос.

⏩Включить дзен-режим

Windows — Ctrl + KZ
macOS — Command + KZ

Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете думать только о коде. Чтобы вернуться в реальный мир, нажмите Escape.

@react_tg

📌Как писать более чистый CSS: дюжина советов от банальных до неочевидных

Полезная статья о том, как писать CSS лучше
Пару очевидных и не очень фактов из статьи:

• Flex - первый инструмент для работы с макетами, но имеет недостатки.

• Grid позволяет думать о макете в целом и заменяет множество элементов-контейнеров.

• Использование функций min, max и clamp упрощает изменение ширины элементов в адаптивных макетах.

• Aspect-ratio упрощает отображение адаптивных изображений и видео с определенным соотношением сторон.

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

• CSS предоставляет механизм управления состоянием, включая использование псевдокласса focus-within.

• Использование относительных единиц, таких как em и rem, вместо статических значений пикселей может быть более предпочтительным.

• Ориентирование на цвета HSL упрощает вычисление красивой цветовой палитры.

📎 Статья

@react_tg

🖥 Ручной триггер события click в ReactJS: пример кода

⏩Если в двух словах, то для того чтобы в ReactJS вручную инициировать события клика, используйте ref, представляющий ссылку на соответствующий элемент, и вызовите в контексте этого элемента метод click(). Пример:

import React, { useRef } from 'react';

function MyButton() {
  const btnRef = useRef();

  // Функция для симуляции клика
  const simulateClick = () => {
    btnRef.current?.click();
  };

  return (
    <>
      <button ref={btnRef} onClick={() => alert('Кликнуто!')}>Кликните меня</button>
      <button onClick={simulateClick}>Симуляция клика</button>
    </>
  );
}

В этом примере с использованием хука `useRef` создаётся ссылка btnRef на первую кнопку, затем функцией `simulateClick` вызывается метод `click()` у btnRef.current, что имитирует клик по этой кнопке.


⏩Более детально

Использование refs: ключ к DOM. В то время как в React основным является декларативный подход к управлению DOM, в ряде случаев необходим прямой доступ к DOM-элементам. Предоставить такую возможность позволяют refs. Для функциональных компонентов используется хук useRef, для классовых — React.createRef.


⏩Особенности вызова событий вручную. При решении вручную инициировать события следует учесть ряд нюансов:

— Лексическое окружение: в классовых компонентах для сохранения контекста this используйте стрелочные функции.

— Хранение refs: в классовых компонентах refs обычно присваиваются как свойства класса.

— Вложенность компонентов: проверьте корректность расположения элементов в render-методе компонента.

— Предотвращение стандартного поведения: чтобы контролировать стандартную реакцию на события, используйте e.preventDefault().

📎 Читать подробнее

@react_tg

🖥 Разбираемся с ошибкой о уникальных ключах в React.js

⏩В React рекомендуется использовать уникальные идентификаторы как ключи для дочерних элементов массива. Это делает более эффективным сохранение состояния компонентов и оптимизирует процесс перерендеринга. Если ваши списки не будут изменяться в будущем, то применение индексов как ключей неприемлемо. Использование уникальных ID, связанных с данными, обеспечивает бесперебойное обновление и способствует предотвращению ошибок при управлении состоянием и интерфейсом.

// используем уникальные ID 
const todoItems = todos.map(todo => <li key={todo.id}>{todo.task}</li>);

// если список не статический, не используйте индексы в качестве ключей
const menuItems = menu.map((dish, index) => <li key={index}>{dish.name}</li>);

⏩Пару простых советов по поводу ключей:

— В погоне за "идеальным" ключом. При обновлении компонентов ориентируйтесь на уникальные и стабильные ключи. Откажитесь от использования индексов массива, которые могут вызвать проблемы с производительностью. И забудьте о Math.random(), так как случайные значения не соответствуют принципам работы алгоритма React.

— Чудеса управления ключами. Ставьте явные ключи каждому элементу в массиве. Это важно для эффективного обновления DOM. В методе .map() ключи следует присваивать на самом верхнем уровне элемента, чтобы обеспечить плавную работу компонента при рендеринге.

— Запасной вариант: ручное создание ключей. Если уникальное свойство недоступно, вам пригодится создание уникальных идентификаторов вручную. Для этого подойдут библиотеки, такие как react-key-index или uuid, предлагающие надёжные методы генерации ключей.

📎 Читать подробнее

@react_tg

🖥 Адаптивный рендер в ReactJS для мобильных и ПК

⏩Чтобы распознать, с какого устройства открывается ваше приложение — с мобильного или с десктопа — в ReactJS, воспользуйтесь window.matchMedia:

const isMobile = window.matchMedia("(max-width: 768px)").matches;

Значение isMobile примет значение true для экранов шириной меньше 768px — это показатель мобильных устройств. Параметр max-width можно настроить согласно вашим требованиям к адаптивности. В дальнейшем isMobile позволит наладить поведение приложения в зависимости от размера экрана.


⏩Настройте React-компоненты так, чтобы они были чувствительны к изменению размеров экрана. Это особенно важно, когда пользователи переворачивают свои мобильные устройства или изменяют размеры окна браузера на десктопе:

import React, { useState, useEffect } from 'react';

// Хук useDeviceDetect для определения типа устройства
const useDeviceDetect = () => {
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

  useEffect(() => {
    // Отслеживаем изменение размера экрана здесь
    const handleResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handleResize);
    // удаляем обработчик, чтобы предотвратить утечку памяти
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return { isMobile };
};

export default useDeviceDetect;

⏩Хук useDeviceDetect позволяет отслеживать изменение ширины устройства и динамически адаптировать рендеринг:

import React from 'react';
import useDeviceDetect from './useDeviceDetect';

const MyResponsiveComponent = () => {
  const { isMobile } = useDeviceDetect();

  return (
    <div>
      {
        // Выбираем между мобильным и десктопным в зависимости от типа устройства
        isMobile ? <MobileComponent /> : <DesktopComponent />
      }
    </div>
  );
};

export default MyResponsiveComponent;

📎 Читать подробнее

@react_tg

🖥 React 19 и Forget вводят новый стандарт производительности

⏩Недавно команда React объявила, что их новая разработка — компилятор React (внутреннее название «Forget») — больше не является экспериментальным проектом. Это компилятор, который конвертирует код приложений на React в оптимизированный JavaScript код. За счёт этого достигается автоматическое ускорение работы приложений.

⏩Также разработчики анонсировали React 19 — следующую большую версию популярной библиотеки для создания пользовательских интерфейсов.

⏩В React 19 появятся такие новые возможности как Actions (ранее — Server Actions), Asset Click Me Load More и поддержка Web Components.
Asset Click Me Load More позволит интегрировать загрузку различных ресурсов (стилей, шрифтов, скриптов) с механизмом Suspense. Это даст возможность гибко управлять отображением интерфейса.

⏩А функция Document Metadata позволит манипулировать рендером метаданных страницы (например, мета-тегов, описанных для SEO). Их можно будет отрендерить в любом месте дерева компонентов, как на клиенте, так и на сервере. Раньше метаданные можно было задать только в корневом компоненте.

⏩Больше информации о React 19 и компиляторе будет анонсировано на конференции React Conf 2024, которая пройдёт 15-16 мая в Хендерсоне, Невада, США. Организаторы ожидают большой наплыв посетителей и уже ввели лотерею на получение билетов.

@react_tg

🖥 Работа с коллекциями в JSX

⏩В работе с коллекциями элементов в JSX по большей части нет ничего особенного.
С другой стороны, задача обработки списков элементов настолько частая, что будет не лишним её обсудить отдельно.

⏩На скрине приведён типичный код, в котором коллекция генерируется прямо в том месте, куда и подставляется. Здесь можно снова увидеть, что внутрь JSX через {} вложено выражение, внутри которого опять появляется JSX-код. Как правило, рекурсия на этом заканчивается. Если нужна более сложная обработка, то имеет смысл вынести генерацию коллекции в метод компонента и вызывать его внутри render. Например, ниже выделена функция renderList(), которая формирует список для отрисовки:

class List extends React.Component {
  renderList = (data) => {
    return data.map(item => <li>{item.name}</li>);
  }

  render() {
    const { data } = this.props;

    return (
      <ul>
        {this.renderList(data)}
      </ul>
    );
  }
}

⏩Проп key
Для повышения эффективности, React настоятельно рекомендует идентифицировать каждую генерируемую строку коллекции. Связано это с механизмом, который производит изменения в DOM.
Генерируя коллекцию элементов в JSX, нужно обязательно проставлять уникальный проп key, который не меняется при повторной генерации коллекции.

⏩Чаще всего с этой задачей не возникает проблем, так как у любой сущности, с которой мы работаем, есть свой идентификатор (например, primary key из базы данных).

class List extends React.Component {
  render() {
    const { data } = this.props;

    return (
      <ul>
        {data.map((item) => <li key={item.id}>{item.name}</li>)}
      </ul>
    );
  }
}

const items = [
  { name: 'first', id: 1 },
  { name: 'second', id: 2 }
];

const mountNode = document.getElementById('react-root');
const root = ReactDOM.createRoot(mountNode);
root.render(<List data={items} />);

📎 Читать подробнее

@react_tg

🖥 Современный подход к разработке с использованием Next.js

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

⏩Здесь на помощь приходит Bit, предлагая современное и эффективное решение. Bit — это система сборки, предназначенная для создания составного (композитного) программного обеспечения. Используя Bit, вы можете создавать компоненты как независимые фрагменты кода, которые можно совместно использовать и которыми можно обмениваться через удаленный хостинг компонентов.

⏩Именно про Bit в связке с Next.js и говорится в этой статье
Ну и про React само собой, рекомендую к прочтению)

📎 Статья

@react_tg