Вопросы React Frontend Developer

# Пример текста с разной вложенностью и форматированием ## 1. Основной раздел Это **основной** текст с *разными* стилями форматирования. ### 1.1 Подраздел * Элемент списка 1 * Элемент списка 2 * Вложенный элемент * Еще один вложенный ### 1.2 Код Вот пример кода на Python: python Copy Download ```plaintext def hello_world(): print("Привет, мир!") hello_world() ``` ## 2. Дополнительная информация > Это цитата, которая выделяется для важности. ### 2.1 Таблица **Заголовок 1Заголовок 2**Данные 1Данные 2Данные 3Данные 4 ### 2.2 Форматированный текст Вот `моноширинный` текст, а также **жирный** и *курсив*. #### 2.2.1 Глубокая вложенность Этот текст находится на **третьем** уровне вложенности. --- ### 3. Заключение Спасибо за внимание! Вот еще один блок кода (JavaScript): javascript Copy Download ```plaintext const sum = (a, b) => a + b; console.log(sum(2, 3)); // 5 ``` **Конец документа.** 🚀

React — это библиотека JavaScript для создания интерфейсов. Она позволяет разработчикам строить приложения из компонентов, которые можно переиспользовать. Ключевые особенности: использование виртуального DOM для высокой производительности, однонаправленный поток данных (unidirectional data flow), компонентный подход, а также поддержка хуков для работы с состоянием и эффектами.

const CustomCodeBlock = CodeBlockLowlight.extend({
	addInputRules() {
		return [
			textblockTypeInputRule({
				find: /^```([a-z0-9+#/\\-]*)?[\s\n]$/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\n]$/i,
				type: this.type,
				getAttributes: (match) => ({
					language: match[1] || 'plaintext',
				}),
			}),
		];
	},

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

Prop drilling — это процесс передачи данных от родительского компонента к дочерним через "пропсы", даже если промежуточные компоненты не используют эти данные. Это может усложнить код, особенно при глубокой вложенности компонентов. Проблему prop drilling можно решить, используя такие подходы, как Context API или библиотеки управления состоянием (например, Redux).

 Пример:

function App() {
	return <Parent data="Привет" />;
}
function Parent({ data }) {
	return <Child data={data} />;
}
function Child({ data }) {
	return <Grandchild data={data} />;
}
function Grandchild({ data }) {
	return <h1>{data}</h1>;
}

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

Пример:

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

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

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

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

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

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

Тег <head> используется для хранения информации о веб-странице, которая не отображается непосредственно на экране. В него включают мета-теги, ссылки на стили и скрипты, заголовок страницы (через тег <title>), и другие элементы, необходимые для правильной работы сайта. Все, что находится внутри <head>, не отображается на веб-странице напрямую, но используется браузером для обработки страницы.

Тег <iframe> используется для встраивания на страницу содержимого с другого веб-ресурса, например, другого сайта, видео с YouTube или карты. Он создает окно внутри текущей страницы, где загружается внешний ресурс. <iframe> полезен для интеграции стороннего контента, сохраняя при этом основную структуру страницы.

Для вставки аудио в HTML используется тег <audio>. Как и в случае с видео, можно указывать несколько форматов аудиофайлов через тег <source>, а атрибуты controls, autoplay, и loop управляют воспроизведением аудио.