React JS

🖥 Вопросы с собеседования на фронтенд разработчика React.js

Держите отличную подборку 🔥
Здесь собраны самые популярные вопросы, задаваемые на собеседованиях front-end разработчиков на React.js.
Тематика вопросов включает в себя как основы JavaScript и веб-технологий так и глубокое понимание работы React.js и смежных технологий (Redux, MobX и прочего).

К каждому вопросу приведён подробный ответ в выпадающем меню

📎 Ссылка

@react_tg

⚡️ React Morph Clock

Оригинальные часы, созданные из svg-картинки на React.

#js #react

https://codepen.io/Siddharth11/pen/MjjdyW

@react_tg

🖥 Как создать локальную среду React с помощью Vite

Держите годный контент!
В этой статье вы узнаете, как создать локальную среду с помощью Vite, инструмента сборки и сервера разработки, разработанного для быстрой и эффективной работы.

⏩В процессе рассматриваются:
— Пошаговые инструкции по созданию проекта Vite
— Удаление шаблона по умолчанию
— Создание простых компонентов React
— Добавление основных стилей CSS.
— Развертывание проекта с помощью Netlify (необязательно)
— К концу этого руководства у вас будет четкое представление о создании локальной среды React с помощью Vite

Уверен, будет полезно, а вот ссылка:
📎 Статья

@react_tg

🖥 Как создать QR-код по строке и направить его пользователю на скачивание?

Вот так звучит реальный кейс, давайте подробнее.
⏩При нажатии на кнопку (onClick событие) должен создаваться QR-код (превью для пользователя не нужно) по строке (рандомно генерирующийся набор символов) и отправляться на скачивание пользователю в виде png-картинки.
Как же это можно реализовать?

⏩Например, можно сделать так:

import QRCode from "https://esm.sh/qrcode";

function download(dataurl, filename) {
  const link = document.createElement("a");

  link.href = dataurl;
  link.download = filename;
  link.click();

  document.removeElement(link);
}

QRCode.toDataURL("I am a pony!", function (err, qrCodeImageDataUrl) {
  console.log(qrCodeImageDataUrl);

  download(qrCodeImageDataUrl, "qrcode.png");
});

📎 Затестить, как работает, можно тут

@react_tg

🖥 Создание сложного веб-приложения с помощью React JS и Tailwind

Держите годный контент)
⏩В этом видео описано создание веб-приложения Brainwave с использованием React и Tailwind CSS. Приложение включает в себя различные элементы, реагирующие на курсор, навигационную панель, градиентные границы, схемы и другие элементы.

⏩Что происходит в видео?
00:04:24 — Настройка
00:22:07 — Header
00:44:28 — Компонент раздела оглавления
01:26:00 — Раздел о преимуществах
01:41:30 — Раздел о сотрудничестве
02:30:35 — Раздел о ценах
02:51:30 — Раздел roadmap
03:05:20 — Footer
03:10:10 — Деплой

📎 Кликабельный план видео
📎 Видео

Enjoy)
@react_tg

🖥 Хук дня — 'use client'

⏩'use client' позволяет отметить, какой код выполняется на клиенте.
Добавьте 'use client' в верхней части файла, чтобы отметить модуль и его транзитивные зависимости как клиентский код.

⏩Когда файл, помеченный директивой 'use client', импортируется из серверного компонента, совместимые бандлеры будут рассматривать импорт модуля как границу между кодом, выполняемым на сервере, и кодом, выполняемым на клиенте.

⏩Будучи зависимостями RichTextEditor, formatDate и Button также будут оцениваться на клиенте, независимо от того, содержат ли их модули директиву 'use client'. Обратите внимание, что один модуль может оцениваться на сервере при импорте из серверного кода и на клиенте при импорте из клиентского кода.


Некоторые нюансы

⏩'use client' должно находиться в самом начале файла, выше любого импорта или другого кода (комментарии допускаются). Они должны быть написаны с одинарными или двойными кавычками, но не с обратными знаками.

⏩Если модуль 'use client' импортируется из другого клиентского модуля, директива не имеет силы.

⏩Если модуль компонента содержит директиву 'use client', то любое использование этого компонента гарантированно является клиентским компонентом. Однако компонент может быть оценен на клиенте, даже если он не содержит директивы 'use client'.
Дополнение: компонент считается клиентским, если он определен в модуле с директивой 'use client' или является транзитивной зависимостью модуля, содержащего директиву 'use client'. В противном случае он является серверным компонентом.

⏩Код, помеченный для использования клиентом, не ограничивается компонентами. Весь код, входящий в поддерево модулей Client, отправляется клиенту и выполняется им.

⏩Когда модуль, работающий с сервером, импортирует значения из модуля 'use client', эти значения должны быть либо компонентами React, либо поддерживаемыми сериализуемыми значениями prop для передачи в клиентский компонент. При любом другом варианте использования будет возникать исключение.

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

@react_tg

🖥 Современный подход к разработке с использованием 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