React JS

🖥 Mode дня — StrictMode

Режим <StrictMode> позволяет находить распространенные ошибки в компонентах на ранних стадиях разработки.
Используйте StrictMode для включения дополнительных поведений разработки и предупреждений для внутреннего дерева компонентов.

Строгий режим включает следующие модели поведения, доступные только для разработчиков:
⏩Ваши компоненты будут перерендериваться дополнительно для поиска ошибок, вызванных нечистым рендерингом.
⏩Ваши компоненты будут перезапускать эффекты дополнительно, чтобы найти ошибки, вызванные отсутствием очистки эффектов.
⏩Ваши компоненты будут проверяться на использование устаревших API.

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

@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.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

🖥 Ручной триггер события 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

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

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

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

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

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

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

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

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

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

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

📎 Статья

@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

🖥 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

💥 Фотошоп не нужен, просто добавьте CSS

@react_tg

🖥 React Email 2.0

▶️Относительно недавно состоялся релиз мажорной версии открытого проекта для работы с электронной почтой (коллекция компонентов для создания электронных писем с использованием React и TypeScript) React Email 2.0.

Разработчики проекта пояснили, что в React Email 2.0 переосмысленный опыт предварительного просмотра, в код внесены изменения для значительного улучшения производительности, добавлены новые компоненты (Code Block, Inline Code, ), появилась поддержка развёртывания в Vercel, а также улучшена поддержка монорепозиториев.

Команда проекта React Email опубликовала инструкцию по обновлению на версию 2.0.

▶️ Основные изменения и добавления в проекте React Email 2.0:
— обновлены компоненты и основные блоки;
— статические файлы для сервера предварительного просмотра теперь хранятся в папке ./emails/static или в указанном каталоге электронной почты;
— улучшен пользовательский интерфейс и обновлены иконки;
— добавлена возможность просмотра, как ваша электронная почта будет выглядеть на мобильных устройствах;
— появилась поддержка подпапок, что позволяет приложению предварительного просмотра игнорировать некоторые из них, если они имеют префикс _ (например: _comComponents);
— время запуска локального сервера React Email 2.0 при новой установке составляет около 7 секунд (для React Email 1.10.1 этот параметр составляет 40 секунд);
— после завершения первоначальной настройки время загрузки составляет около 1 секунды (зависит от конфигурации сервера);
— улучшена фильтрация отображения электронных писем на боковой панели, которая показывает их только в том случае, если где-то внутри у них есть настройки экспорта по умолчанию. Это своего рода эвристика, и её всё еще можно улучшить.

🖥 Исходный код проекта доступен на GitHub под лицензией MIT License
⭐️ 11.9K

@react_tg

🖥 Деплой React-приложения с помощью Kubernetes 🖥

⏩Держите пошаговый гайд, как задеплоить приложение React.
Здесь максимально подробно описывается каждый шаг:
— создание приложения, запуск
— упаковка в Docker-контейнер, конфигурирование Dockerfile
— создание Docker-образа
— установка kubectl и minikube, запуск
— конфигурирование YAML-файла
— ...короче, весь процесс

Супер полезно, экономит время, не нужно проверять всё методом тыка

📎 Гайд

@react_tg