Специализация
Python Backend Developer
Java Backend Developer
Node.js Backend Developer
Golang Backend Developer
React Frontend Developer
Выберите навыки
React
JavaScript
Git
Redux
Webpack
Сложность
1-3
4-6
7-8
9-10
Рейтинг вопросов
1
2
3
4
5
Подпишись на React Developer в телеграм
Как работает HTML Custom Elements API, и как можно создать и зарегистрировать собственные элементы?
HTML Custom Elements API позволяет разработчикам создавать собственные HTML-элементы, которые ведут себя как стандартные элементы, но могут иметь свою уникальную логику и стиль. Чтобы создать кастомный элемент, необходимо определить класс, который наследует от HTMLElement, и зарегистрировать его с помощью customElements.define(). Эти элементы могут быть использованы на странице так же, как и стандартные HTML-теги. Custom Elements расширяют возможности HTML, делая его более гибким для современных веб-приложений.
Что такое HTML Imports и почему они были отклонены стандартом? Какие современные альтернативы существуют для организации модулей?
HTML Imports — это экспериментальная технология, которая позволяла загружать и включать HTML-файлы в другие документы с помощью тега <link>. Она была отклонена из-за слабой поддержки и наличия альтернативных стандартов, таких как JavaScript модули и Web Components. Современные альтернативы включают ES-модули (import/export) и технологии, основанные на шаблонах и компонентах, такие как React и Web Components.
Как интегрировать веб-шрифты (например, Google Fonts) в HTML и какие факторы влияют на производительность загрузки?
Веб-шрифты, такие как Google Fonts, можно подключить через элемент <link> в разделе <head> HTML или использовать CSS @import. Однако шрифты могут замедлять рендеринг страницы, поэтому важно оптимизировать их загрузку. Основные факторы, влияющие на производительность, включают количество стилей шрифтов, их формат и стратегию загрузки (например, font-display: swap, чтобы избежать блокировки рендеринга текста).
Особенности стрелочных функций (this, arguments) и как изменить контекст?
Стрелочные функции не создают собственного контекста this и используют значение this из внешней функции. Они также не имеют объекта arguments, что делает их менее гибкими в некоторых ситуациях. Контекст стрелочной функции изменить нельзя, так как он жёстко привязан к внешней области видимости.
Объясните работу WebSockets и как реализовать двунаправленную связь между клиентом и сервером.
WebSockets — это протокол, который обеспечивает двунаправленную связь между клиентом и сервером по одному и тому же TCP-соединению. Он позволяет отправлять данные в режиме реального времени, что делает его идеальным для приложений, требующих постоянного обмена данными, таких как чаты или онлайн-игры. Для использования WebSockets необходимо создать WebSocket-клиент на стороне клиента и сервер, который будет обрабатывать подключения и сообщения.
Можете объяснить концепцию HOC (Higher-Order Components) в React?
Чем отличаются pure components от обычных компонентов?
Как использовать CSS-in-JS библиотеки (например, styled-components) в React-проектах?
Как использовать @supports для проверки поддержки браузером определенных CSS-свойств?
Как получать информацию в реальном времени?
Рейтинг:
3
Сложность:
5
HOC (компонент высшего порядка) — это функция, которая принимает компонент и возвращает новый компонент. Это позволяет повторно использовать логику между разными компонентами, не изменяя их исходный код. HOC полезны, когда нужно добавить общую функциональность, такую как авторизация или управление состоянием.
Рейтинг:
2
Сложность:
5
Pure components (чистые компоненты) автоматически предотвращают повторные рендеры, если их пропсы или состояние не изменились. Это делается с помощью поверхностного сравнения значений. Обычные компоненты, с другой стороны, рендерятся каждый раз, когда их родительский компонент обновляется, даже если их пропсы или состояние не изменились.
Рейтинг:
5
Сложность:
10
CSS-in-JS библиотеки позволяют писать стили прямо в JavaScript коде. В styled-components стили создаются как компоненты, что упрощает динамическое изменение стилей на основе состояния и использования тем.
Рейтинг:
2
Сложность:
5
Директива @supports позволяет проверить, поддерживает ли браузер конкретное CSS-свойство, и применить стили только в случае успешной проверки. Это полезно для использования новых возможностей, сохраняя при этом совместимость.
Рейтинг:
5
Сложность:
7
Для получения данных в реальном времени используют:
WebSocket – двустороннее соединение между клиентом и сервером.
Server-Sent Events (SSE) – поток односторонних сообщений от сервера.
Long Polling – запросы с долгим ожиданием ответа.
Рейтинг:
2
Сложность:
6
Рейтинг:
1
Сложность:
5
Рейтинг:
2
Сложность:
4
Рейтинг:
4
Сложность:
7
Рейтинг:
4
Сложность:
6
