Специализация
React Frontend Developer
Java Backend Developer
Node.js Backend Developer
Golang Backend Developer
Python Backend Developer
Выберите навыки
React
Git
Redux
Webpack
Docker
Сложность
1-3
4-6
7-8
9-10
Рейтинг вопросов
1
2
3
4
5
Подпишись на React Developer в телеграм
Можете объяснить концепцию Virtual DOM в React?
Virtual DOM — это абстракция реального DOM, которая используется React для улучшения производительности. Вместо того чтобы обновлять реальный DOM напрямую при каждом изменении состояния, React сначала обновляет виртуальный DOM, а затем сравнивает его с предыдущей версией, чтобы минимизировать количество операций с реальным DOM. Этот процесс называется дифференциацией (reconciliation).
<script src="https://cdn.example.com/library.js"></script>Пример:
- React обновляет виртуальный DOM.
- Он сравнивает его с предыдущим состоянием.
- Изменяет только те части реального DOM, которые изменились.
В чем разница между props и state?
"Props" — это данные, которые передаются в компонент извне, в то время как "state" — это внутренние данные компонента, которые могут изменяться. Props передаются родительским компонентом и неизменны, а state управляется внутри самого компонента и может изменяться в течение времени.
Можете объяснить концепцию "props" в React?
"Props" (сокращение от "properties") — это способ передачи данных от одного компонента к другому. Они неизменяемы и позволяют родительским компонентам передавать информацию дочерним компонентам, чтобы настраивать их поведение или внешний вид.
Объясните концепцию компонентов в React
Компоненты в React — это строительные блоки приложения. Каждый компонент представляет собой независимую часть пользовательского интерфейса, которую можно повторно использовать и комбинировать с другими компонентами. Компоненты могут быть либо функциями, либо классами, и они возвращают JSX для отображения.
Что такое React и какие ключевые особенности он имеет?
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?
Что такое JSX????
Что такое webmanifest и как он используется для создания Progressive Web Apps (PWA)?
Что такое CORS (Cross-Origin Resource Sharing), и как он относится к встроенным элементам типа <iframe>, <img>, и <script>?
Что такое Progressive Enhancement и Graceful Degradation? Как HTML может поддерживать оба подхода?
Рейтинг:
3
Сложность:
5
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>;
}Рейтинг:
2
Сложность:
2
JSX (JavaScript XML) — это расширение синтаксиса JavaScript, которое позволяет писать HTML-подобный код прямо в JavaScript. Он используется в React для описания того, как должен выглядеть интерфейс. JSX упрощает создание компонентов, объединяя разметку и логику в одном месте.
Пример:
const element = <h1>Привет, мир!</h1>;Под капотом JSX преобразуется в вызовы функций, например:
React.createElement('h1', null, 'Привет, мир!');Рейтинг:
1
Сложность:
5
Webmanifest — это файл в формате JSON, который используется для определения метаданных веб-приложения. Он позволяет настроить иконки приложения, название, тему и поведение при добавлении на главный экран устройства. В PWA webmanifest помогает сделать веб-приложение похожим на нативное мобильное приложение, улучшая пользовательский опыт.
Рейтинг:
4
Сложность:
6
CORS — это механизм, который позволяет ограничить или разрешить обмен данными между разными доменами. Браузеры по умолчанию запрещают запросы к ресурсам с другого домена для обеспечения безопасности. Чтобы разрешить такие запросы, сервер должен отправить специальные заголовки. Элементы, такие как <iframe>, <img> и <script>, могут загружать ресурсы с других доменов, но для некоторых операций, например, доступа к содержимому <iframe> из другого домена, требуется поддержка CORS.
Рейтинг:
2
Сложность:
5
Progressive Enhancement и Graceful Degradation — это два подхода к веб-разработке, направленные на создание адаптивных и доступных веб-приложений.
Progressive Enhancement: Старт с базовой версии и добавление улучшений для современных браузеров.
Graceful Degradation: Старт с полной версии и адаптация для старых браузеров.
Рейтинг:
2
Сложность:
2
Рейтинг:
1
Сложность:
1
Рейтинг:
1
Сложность:
1
Рейтинг:
1
Сложность:
1
Рейтинг:
3
Сложность:
4