React JS

🖥 Современный подход к разработке с использованием Next.js ⏩Использование традиционных подходов и инструментов разработки приводит к трудностям в достижении эффективной изоляции компонентов. По мере усложнения приложения, управление и повторное использование компонентов в различных проектах становится все более сложной задачей. ⏩Здесь на помощь приходит Bit, предлагая современное и эффективное решение. Bit — это система сборки, предназначенная для создания составного (композитного) программного обеспечения. Используя Bit, вы можете создавать компоненты как независимые фрагменты кода, которые можно совместно использовать и которыми можно обмениваться через удаленный хостинг компонентов. ⏩Именно про Bit в связке с Next.js и говорится в этой статье Ну и про React само собой, рекомендую к прочтению) 📎 Статья @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

🖥 React 19 и Forget вводят новый стандарт производительности ⏩Недавно команда React объявила, что их новая разработка — компилятор React (внутреннее название «Forget») — больше не является экспериментальным проектом. Это компилятор, который конвертирует код приложений на React в оптимизированный JavaScript код. За счёт этого достигается автоматическое ускорение работы приложений. ⏩Также разработчики анонсировали React 19 — следующую большую версию популярной библиотеки для создания пользовательских интерфейсов. ⏩В React 19 появятся такие новые возможности как Actions (ранее — Server Actions), Asset Loading и поддержка Web Components. Asset Loading позволит интегрировать загрузку различных ресурсов (стилей, шрифтов, скриптов) с механизмом Suspense. Это даст возможность гибко управлять отображением интерфейса. ⏩А функция Document Metadata позволит манипулировать рендером метаданных страницы (например, мета-тегов, описанных для SEO). Их можно будет отрендерить в любом месте дерева компонентов, как на клиенте, так и на сервере. Раньше метаданные можно было задать только в корневом компоненте. ⏩Больше информации о React 19 и компиляторе будет анонсировано на конференции React Conf 2024, которая пройдёт 15-16 мая в Хендерсоне, Невада, США. Организаторы ожидают большой наплыв посетителей и уже ввели лотерею на получение билетов. @react_tg

🖥 Немного о производительность React.js Преждевременная оптимизация — корень всех зол. © Перед тем, как рассуждать о производительности, настоятельно рекомендуется прочитать Optimization.guide. Для начала стоит вспомнить, что виртуальный DOM — это уже оптимизация, которая позволяет React из коробки работать достаточно быстро, чтобы вы могли вообще не задумываться о производительности долгое время. В общих чертах, React работает так: — Монтирование вызывает рендеринг приложения. — Получившийся DOM вставляется в реальный DOM целиком, так как там еще ничего нет. Виртуальный DOM сохраняется внутри React для последующего обновления. — Изменение состояния приводит к вычислению нового виртуального DOM. — Вычисляется разница между старым виртуальным DOM и новым. — Разница применяется к реальному DOM. ⏩Согласование Когда происходит изменение в состоянии компонента, запускается механизм «согласование» (reconciliation), который вычисляет разницу между прошлым состоянием и новым. С алгоритмической точки зрения происходит поиск отличий в двух деревьях. В общем случае алгоритм, выполняющий это вычисление, работает со сложностью O(n³). Для решения этой проблемы React настоятельно просит для всех элементов списков использовать атрибут key, который не меняется для конкретного элемента списка. Подобное требование позволяет оптимизировать работу алгоритма, уменьшив сложность до О(n). ⏩Пропсы по умолчанию Первая засада ожидает при неправильной работе со свойствами по умолчанию, пример кода на изображении. Вроде безобидный код, но вызов [] каждый раз генерирует новый объект (при условии что options равен false). Проверяется это легко: [] === [] будет ложным. То есть данные не поменялись, но <Cell> будет отрисован заново. Вывод: используйте встроенный механизм для свойств по умолчанию. 📎 Читать подробнее @react_tg

🖥 Все хуки в React Норм видео о том, какие хуки вообще существуют в природе, и как их можно использовать. Речь идёт про такие хуки и не только: • useState() • setState() • useEffect() • useContext() • useReducer() • useCallback() • useMemo() • useRef() 📎 Видео @react_tg

🖥 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

Из джуна в мидла вместе с лидером* российского ИТ-рынка — Холдингом Т1🚀 Открытые школы Т1 — это уникальная возможность для быстрого роста в ИТ. Внутри два трека: образовательный ИТ-интенсив + карьерный в формате offer weeks в Т1. 🤚 Поможем прокачать скилы для развития внутри профессии, если ты: - имеешь опыт работы разработчиком JS+React от года - хочешь присоединиться к команде Т1. Лучшим назначим интервью и направим оффер! В программе интенсива: 🔹Архитектура, клиент-серверное взаимодействие 🔹BFF (Backend For Frontend) 🔹Микрофронты 🔹Паттерны программирования (SOLID, YAGNI, DRY, KISS) 🔹React 🔹State-менеджеры 🔹Тестирование, автотесты 📚 Формат: онлайн и по вечерам (8 часов в неделю на вебинары и практику). Длительность — 1 месяц, стартуем в конце марта! 🏳️Подай заявку до 26 марта на сайте. *По версии CNews Analytics 2022, TAdviser 2021 и RAEX 2023 Реклама. ООО "Т1". ИНН 7720484492.

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

Как стать Fullstack-разработчиком на JS? С чего начать? Начните с бесплатного урока по TypeScript и разработке server-side приложений на Node.js. Приходите на живой вебинар, где можно задавать свои вопросы! Что вы узнаете: 1. Введение в TypeScript 2. Интеграцию TypeScript с Node.js 3. Работу с модулями и зависимостями 4. Основные типы данных и аннотации типов 5. Работу с асинхронным кодом 6. Разработку серверной логики 7. Тестирование и отладку приложений 8. Лучшие практики разработки9. Практические примеры и демонстрации 🔥 Ведущий: Арсений Высоцкий — лид-инженер в крупной Software-компании. Встречаемся 21 марта в 20:00 мск в рамках старта курса «JavaScript Developer. Professional». Не упустите возможность присоединиться к группе. Осталось всего 3 места. Доступна рассрочка на обучение! А еще мы уговорили создателей подарить участникам вебинара скидку на курс 10% по 🎁промокоду js10🎁. 👉 Пройдите тест на знание JavaScript и зарегистрируйтесь на бесплатный урок прямо сейчас: https://otus.pw/79xL/?erid=LjN8KGYk8

🖥 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

Вариант для тех, кто ищет виртуальный сервер с хорошей веб-защитой — Aéza: – Виртуальные сервера до 6.0 ГГц на лучших процессорах; – Профессиональная фильтрация атак StormWall; – Круглосуточная поддержка; – Anycast фильтрация; – Низкие цены; – 15% кешбэка по ссылке. Бесконечно можно смотреть на три вещи: на огонь, воду и скидку от Aeza! Говорят: твоё от тебя не уйдет. А зачем ждать? Динозавры тоже ждали и остались в прошлом Используй 50% скидку и погнали в будущее! Кроме того, сейчас Aéza раздает личные бесплатные сервера, забираем тут. Регистрация, подписка, платежи не потребуются. Реклама. Индивидуальный предприниматель Лобанов Леонид Константинович. ИНН 781625705648 erid: LjN8KEr3S

🖥 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

Верстаешь? Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Ты сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Добавишь в портфолио 1 качественный проект; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова. 👉 Проскочить на интенсив бесплатно Начинаем 16 марта.

🖥 Деплой React-приложения с помощью Kubernetes 🖥 ⏩Держите пошаговый гайд, как задеплоить приложение React. Здесь максимально подробно описывается каждый шаг: — создание приложения, запуск — упаковка в Docker-контейнер, конфигурирование Dockerfile — создание Docker-образа — установка kubectl и minikube, запуск — конфигурирование YAML-файла — ...короче, весь процесс Супер полезно, экономит время, не нужно проверять всё методом тыка 📎 Гайд @react_tg

Яндекс Практикум запустил курс «Инженер по тестированию: от новичка до автоматизатора». На нём студенты научатся вручную тестировать приложения и сайты, а потом — писать код на языке Java, чтобы запускать автоматические тесты. Автоматизация — востребованный навык у опытных тестировщиков, который открывает путь к более высоким должностям. Что вас ждёт во время учёбы: — Интерактивный учебник, где всё объясняем простым языком. — Тренажёр с мгновенной проверкой заданий. — Практика на учебных приложениях и проекты для портфолио. — Команда сопровождения, которая поможет разобраться в сложных темах и дойти до конца. — Карьерные консультанты, которые научат составлять резюме, проходить собеседования и тестовые задания. Попробуйте курс бесплатно, а если понравится — приходите учиться.