Вопросы React Frontend Developer

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

Пример:

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

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

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

"Props" — это данные, которые передаются в компонент извне, в то время как "state" — это внутренние данные компонента, которые могут изменяться. Props передаются родительским компонентом и неизменны, а state управляется внутри самого компонента и может изменяться в течение времени.

Virtual DOM — это абстракция реального DOM, которая используется React для улучшения производительности. Вместо того чтобы обновлять реальный DOM напрямую при каждом изменении состояния, React сначала обновляет виртуальный DOM, а затем сравнивает его с предыдущей версией, чтобы минимизировать количество операций с реальным DOM. Этот процесс называется дифференциацией (reconciliation).

<script src="https://cdn.example.com/library.js"></script>

Пример:

- React обновляет виртуальный DOM.

- Он сравнивает его с предыдущим состоянием.

- Изменяет только те части реального DOM, которые изменились.

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);
	},
});

Компоненты в React — это строительные блоки приложения. Каждый компонент представляет собой независимую часть пользовательского интерфейса, которую можно повторно использовать и комбинировать с другими компонентами. Компоненты могут быть либо функциями, либо классами, и они возвращают JSX для отображения.