Вопросы 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. Этот элемент полезен для анимаций, игр и динамического рендеринга изображений, но он требует программирования для каждой детали.

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

Специфичность в CSS — это способ определения приоритета CSS-правил, когда к одному элементу применяются несколько конфликтующих стилей. Она рассчитывается на основе количества селекторов разных типов в правиле:

• Инлайн-стили (например, style="color: red;") имеют наивысший приоритет.

• ID-селекторы (#id) более специфичны, чем классы (.class) или теги (div).

• Универсальные селекторы (*) и каскадность имеют минимальный приоритет.

 Например:

#id { color: blue; } /* более специфично, чем */
.class { color: green; }

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

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

Функции — это блоки кода, которые выполняют определённую задачу. Они помогают избежать дублирования кода, упрощают его обслуживание и делают программу более понятной. Функция может принимать данные (параметры) и возвращать результат. Например:

function greet(name) {
  return `Привет, ${name}!`;
}
console.log(greet("Иван")); // Выведет: Привет, Иван!