React Frontend Developer

Question 1

Какой тег используется для создания ссылок в HTML?

Accepted Answer

# Пример текста с разной вложенностью и форматированием

## 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
```

**Конец документа.** 🚀

Question 2

Как браузер читает JSX?

Accepted Answer

Браузеры не могут напрямую читать JSX, так как это не валидный JavaScript. Для того чтобы браузер мог его исполнить, JSX необходимо транспилировать (преобразовать) в обычный JavaScript. Это обычно делается с помощью инструментов, таких как Babel, которые преобразуют JSX в вызовы функций, понятные браузеру.

Question 3

Как создать компонент в React?

Accepted Answer

Чтобы создать компонент в React, достаточно написать функцию или класс, который возвращает JSX. Функциональные компоненты сейчас являются стандартом, и их можно создавать с помощью простой функции, которая принимает props и возвращает разметку.

Question 4

Можете объяснить концепцию Virtual DOM в React?

Accepted Answer

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

Question 5

В чем разница между props и state?

Accepted Answer

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

Question 6

Можете объяснить концепцию "props" в React?

Accepted Answer

"Props" (сокращение от "properties") — это способ передачи данных от одного компонента к другому. Они неизменяемы и позволяют родительским компонентам передавать информацию дочерним компонентам, чтобы настраивать их поведение или внешний вид.

Question 7

Объясните концепцию компонентов в React

Accepted Answer

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

Question 8

Что такое 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 9

Что такое 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 10

Что такое 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, 'Привет, мир!');

Вопросы React Frontend Developer