Специализация
Python Backend Developer
Java Backend Developer
Node.js Backend Developer
Golang Backend Developer
React Frontend Developer
Выберите навыки
React
JavaScript
Git
Redux
Webpack
Сложность
1-3
4-6
7-8
9-10
Рейтинг вопросов
1
2
3
4
5
Подпишись на React Developer в телеграм
Что такое специфичность в CSS?
Специфичность в CSS — это способ определения приоритета CSS-правил, когда к одному элементу применяются несколько конфликтующих стилей. Она рассчитывается на основе количества селекторов разных типов в правиле:
Инлайн-стили (например, style="color: red;") имеют наивысший приоритет.
ID-селекторы (#id) более специфичны, чем классы (.class) или теги (div).
Универсальные селекторы (*) и каскадность имеют минимальный приоритет.
Например:
#id { color: blue; } /* более специфично, чем */
.class { color: green; }Можете объяснить концепцию CSS box model (блочная модель)?
CSS box model - это основной концепт в CSS, описывающий как элементы на веб-странице представлены в виде прямоугольных блоков, состоящих из контента, отступов, границ и внутренних полей.
Расскажите про this и контекст
this в JavaScript — это ключевое слово, которое ссылается на текущий контекст выполнения. Контекст зависит от того, где и как используется this:
В методе объекта this указывает на этот объект.
В функции this по умолчанию указывает на глобальный объект (в строгом режиме — undefined).
В стрелочных функциях this наследуется из внешнего контекста.
Пример:
const obj = {
name: "Иван",
greet() {
console.log(`Привет, ${this.name}!`);
},
};
obj.greet(); // Привет, Иван!Для чего нужен прототип?
Прототип — это объект, от которого другой объект может наследовать свойства и методы. В JavaScript каждый объект имеет скрытое свойство [[Prototype]], которое указывает на его прототип. Это позволяет организовать наследование, чтобы не дублировать код и переиспользовать общие методы. Например, если метод не найден в объекте, JavaScript ищет его в прототипе.
Пример:
const animal = { eats: true };
const dog = Object.create(animal);
console.log(dog.eats); // trueЧто такое делегирование событий в JavaScript?
Делегирование событий — это подход, при котором событие обрабатывается на родительском элементе, а не на каждом дочернем элементе, к которому оно относится. Это работает благодаря всплытию событий: событие, вызванное на дочернем элементе, поднимается вверх по дереву DOM до родителя. Этот метод позволяет сократить количество обработчиков событий и упростить их управление.
Пример:
document.getElementById("parent").addEventListener("click", (event) => {
if (event.target.tagName === "BUTTON") {
console.log(`Нажата кнопка: ${event.target.textContent}`);
}
});Что такое JSX?
Что такое prop drilling?
Для чего использует ref?
Какие есть виды подключения CSS в HTML?
Что такое React и какие ключевые особенности он имеет?
Рейтинг:
2
Сложность:
2
JSX (JavaScript XML) — это расширение синтаксиса JavaScript, которое позволяет писать HTML-подобный код прямо в JavaScript. Он используется в React для описания того, как должен выглядеть интерфейс. JSX упрощает создание компонентов, объединяя разметку и логику в одном месте.
Пример:
const element = <h1>Привет, мир!</h1>;Под капотом JSX преобразуется в вызовы функций, например:
React.createElement('h1', null, 'Привет, мир!');Рейтинг:
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>;
}Рейтинг:
3
Сложность:
5
В React ref используется для получения прямого доступа к DOM-элементам или управления ими, а также для хранения данных, которые не влияют на перерисовку компонента. Например, с помощью ref можно фокусировать элементы ввода, отслеживать состояние анимации или сохранять значения между рендерами без их обновления.
import React, { useRef } from "react";
function App() {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} />
<button onClick={focusInput}>Фокус</button>
</div>
);
}Рейтинг:
3
Сложность:
4
Существует три основных способа подключения CSS к HTML: встроенный, внутренний и внешний. Встроенный CSS применяет стили непосредственно к элементу с помощью атрибута style. Внутренний CSS размещается внутри тега <style> в <head> HTML-документа и применяется ко всем элементам на странице. Внешний CSS хранится в отдельном файле с расширением .css, который подключается к HTML через тег <link> в <head>, что позволяет использовать одни и те же стили на нескольких страницах.
Рейтинг:
3
Сложность:
4
React — это библиотека JavaScript для создания интерфейсов. Она позволяет разработчикам строить приложения из компонентов, которые можно переиспользовать. Ключевые особенности: использование виртуального DOM для высокой производительности, однонаправленный поток данных (unidirectional data flow), компонентный подход, а также поддержка хуков для работы с состоянием и эффектами.
Пример простого компонента:
function Hello() {
return <h1>Привет, React!</h1>;
}Рейтинг:
3
Сложность:
3
Рейтинг:
2
Сложность:
3
Рейтинг:
4
Сложность:
6
Рейтинг:
3
Сложность:
7
Рейтинг:
3
Сложность:
6