React Frontend Developer

Question 1

Что такое React и какие ключевые особенности он имеет?

Accepted Answer

React — это библиотека JavaScript для создания интерфейсов. Она позволяет разработчикам строить приложения из компонентов, которые можно переиспользовать. Ключевые особенности: использование виртуального DOM для высокой производительности, однонаправленный поток данных (unidirectional data flow), компонентный подход, а также поддержка хуков для работы с состоянием и эффектами.const CustomCodeBlock = CodeBlockLowlight.extend({
	addInputRules() {
		return [
			textblockTypeInputRule({
				find: /^```([a-z0-9+#/\-]*)?[\s
]$/i,
				type: this.type,
				getAttributes: (match) => ({
					language: match[1] || 'plaintext',
				}),
			}),
		];
	},

addNodeView() {
		return createCodeBlockNodeView(styles, lowlight);
	},
});Пример простого компонента:const CustomCodeBlock = CodeBlockLowlight.extend({
	addInputRules() {
		return [
			textblockTypeInputRule({
				find: /^```([a-z0-9+#/\-]*)?[\s
]$/i,
				type: this.type,
				getAttributes: (match) => ({
					language: match[1] || 'plaintext',
				}),
			}),
		];
	},

addNodeView() {
		return createCodeBlockNodeView(styles, lowlight);
	},
});

Question 2

Что такое prop drilling?

Accepted Answer

Prop drilling — это процесс передачи данных от родительского компонента к дочерним через "пропсы", даже если промежуточные компоненты не используют эти данные. Это может усложнить код, особенно при глубокой вложенности компонентов. Проблему prop drilling можно решить, используя такие подходы, как Context API или библиотеки управления состоянием (например, Redux). Пример:function App() { return ; } function Parent({ data }) { return ; } function Child({ data }) { return ; } function Grandchild({ data }) { return

{data}

; }

Question 3

Что такое JSX????

Accepted Answer

JSX (JavaScript XML) — это расширение синтаксиса JavaScript, которое позволяет писать HTML-подобный код прямо в JavaScript. Он используется в React для описания того, как должен выглядеть интерфейс. JSX упрощает создание компонентов, объединяя разметку и логику в одном месте.

Пример:

const element = <h1>Привет, мир!</h1>;

Под капотом JSX преобразуется в вызовы функций, например:

React.createElement('h1', null, 'Привет, мир!');

Привет, мир!

;Под капотом JSX преобразуется в вызовы функций, например:React.createElement('h1', null, 'Привет, мир!');

Question 4

Что такое Canvas?

Accepted Answer

<canvas> — это HTML-тег, который используется для рисования 2D и 3D графики через JavaScript. Сам по себе <canvas> не содержит графики; для её создания используется JavaScript API. Этот элемент полезен для анимаций, игр и динамического рендеринга изображений, но он требует программирования для каждой детали.

Question 5

Можете объяснить концепцию CSS box model (блочная модель)?

Accepted Answer

CSS box model - это основной концепт в CSS, описывающий как элементы на веб-странице представлены в виде прямоугольных блоков, состоящих из контента, отступов, границ и внутренних полей.

Question 6

Что такое специфичность в CSS?

Accepted Answer

Специфичность в CSS — это способ определения приоритета CSS-правил, когда к одному элементу применяются несколько конфликтующих стилей. Она рассчитывается на основе количества селекторов разных типов в правиле:Инлайн-стили (например, style="color: red;") имеют наивысший приоритет.ID-селекторы (#id) более специфичны, чем классы (.class) или теги (div).Универсальные селекторы (*) и каскадность имеют минимальный приоритет. Например:#id { color: blue; } /* более специфично, чем */
.class { color: green; }

Question 7

Что такое доступность (accessibility)?

Accepted Answer

Доступность (accessibility) — это практика создания веб-сайтов, которые могут использовать все пользователи, включая людей с ограниченными возможностями. Это включает улучшения, такие как использование правильных заголовков, текста для экранных читалок, цветовые контрасты и навигация с клавиатуры. Цель — обеспечить доступ к информации и функциональности всем пользователям, независимо от их возможностей.

Question 8

Зачем для тега <script> добавляют атрибуты async и defer?

Accepted Answer

Атрибуты async и defer у тега <script> используются для управления тем, как и когда браузер загружает и выполняет JavaScript. async загружает скрипт асинхронно и выполняет его сразу после загрузки, не дожидаясь завершения загрузки всей страницы. defer также загружает скрипт асинхронно, но откладывает его выполнение до полной загрузки HTML-документа, что предотвращает блокировку рендеринга страницы.

Question 9

Для чего нужны data-атрибуты?

Accepted Answer

Data-атрибуты — это пользовательские атрибуты, начинающиеся с data-, которые позволяют хранить дополнительные данные в HTML-элементах. Эти данные могут быть использованы JavaScript для динамической обработки элементов на странице. Data-атрибуты удобны для передачи данных без необходимости изменения структуры HTML или использования скрытых полей.

Question 10

Для чего нужен тег <noscript>?

Accepted Answer

Тег <noscript> отображает содержимое, если у пользователя отключен JavaScript или его браузер не поддерживает скрипты. Это полезно для обеспечения доступности сайта для всех пользователей, включая тех, кто не может использовать JavaScript. Внутри <noscript> можно размещать альтернативные версии контента или инструкции для пользователей.

Вопросы React Frontend Developer