👩‍💻 Что такое порталы в React?

Порталы в React позволяют рендерить дочерние элементы в DOM-узел, который находится вне иерархии родительского компонента. Это полезно для создания модальных окон, всплывающих подсказок и других элементов, которые должны быть отделены от основного DOM-дерева.

Для создания портала используется метод ReactDOM.createPortal(), который принимает два аргумента: элемент React и целевой DOM-узел.

Пример использования портала:

import ReactDOM from 'react-dom';

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

Здесь Modal рендерит свои дочерние элементы в элемент с ID modal-root, который находится вне основного контейнера приложения. Порталы позволяют управлять элементами, сохраняя их стили и поведение в контексте React.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

Для встраивания аудио на HTML-страницу используется тег <audio>. Этот тег позволяет воспроизводить аудиофайлы непосредственно в браузере.

Пример использования:

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает элемент <code>audio</code>.
</audio>

Атрибут controls добавляет элементы управления воспроизведением, такие как кнопки воспроизведения и паузы. Внутри тега <audio> можно использовать несколько <source> для указания разных форматов аудио, обеспечивая кроссбраузерную совместимость.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🔥Свойство calc() в CSS используется для выполнения математических вычислений непосредственно в стилях. Оно позволяет комбинировать различные единицы измерения, такие как проценты, пиксели, em и другие, для более гибкой настройки размеров элементов.

Пример использования:

.element {
  width: calc(100% - 50px);
}

В этом примере ширина элемента вычисляется как 100% от родительского элемента минус 50 пикселей. calc() поддерживает операции сложения +, вычитания -, умножения * и деления /. Между операторами и операндами обязательно должны быть пробелы.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

ℹ️Подписывайся на наши новые каналы!

🖥 JS собеседования
🖥 Backend собеседования

Методы map и forEach используются для работы с массивами.

1⃣ map создает новый массив, применяя функцию к каждому элементу исходного массива. Он возвращает новый массив с результатами вызова функции для каждого элемента. Пример:

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

2⃣ forEach выполняет функцию для каждого элемента массива, но не возвращает новый массив. Он используется для выполнения операций, которые не требуют возврата значений. Пример:

const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num)); // Выводит 1, 2, 3

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🔵useMemo используется для мемоизации вычисленных значений, чтобы избежать ненужных повторных вычислений при каждом рендере компонента. Это полезно, когда вычисление значений требует значительных ресурсов.

Синтаксис:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

🔵useMemo принимает функцию и массив зависимостей. Если зависимости не изменились, возвращается мемоизированное значение. Это помогает оптимизировать производительность, особенно в компонентах с тяжелыми вычислениями или при работе с большими данными.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🔥 Создание таблицы в HTML осуществляется с помощью тега <table>, который содержит строки <tr>, ячейки заголовков <th> и ячейки данных <td>.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Здесь <thead> используется для заголовка таблицы, а <tbody> для основного содержимого.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Типы void и never в TypeScript имеют принципиальные различия.

1⃣ void используется для функций, которые не возвращают значение. При этом функция с типом void может вернуть undefined или выполнить какое-то действие без возврата значения.

2⃣ never представляет значения, которые никогда не могут произойти. Функция с типом never никогда не завершит свое выполнение нормально - она либо выбросит ошибку, либо будет выполняться бесконечно.

Пример void:

function logMessage(): void {
  console.log("Hello");
}

Пример never:

function throwError(): never {
  throw new Error("Something went wrong");
}

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Spread operator (оператор расширения) - это синтаксис с тремя точками (...), который позволяет "распаковать" элементы массива или свойства объекта.

⏩ С массивами:

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5]; // [1, 2, 3, 4, 5]

⏩ С объектами:

const person = { name: 'John' };
const details = { age: 30 };
const fullPerson = { ...person, ...details }; // { name: 'John', age: 30 }

⏩ Spread также удобен для создания копий массивов и объектов, передачи аргументов в функции:

const copy = [...array];
Math.max(...numbers);

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🔥Сброс стилей (CSS Reset) — это техника, используемая для устранения различий в отображении элементов HTML в разных браузерах. Каждый браузер имеет свои собственные стили по умолчанию, которые могут влиять на внешний вид веб-страницы. Сброс стилей помогает создать единообразную основу для дальнейшей разработки.

Обычно сброс включает в себя обнуление отступов, полей, размеров шрифтов и других свойств. Это позволяет разработчикам начинать с чистого листа и задавать стили, которые будут одинаково отображаться во всех браузерах.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🌿 Создание новой ветки — это процесс, который позволяет работать над отдельными фичами или фиксами без влияния на основную кодовую базу.

▶️Для создания новой ветки используется команда git branch <имя_ветки>. Это создаст новую ветку с указанным именем, но не переключит на неё.

▶️Чтобы сразу создать и переключиться на новую ветку, используется команда git checkout -b <имя_ветки>. Эта команда создаёт ветку и делает её текущей.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🔥 Хук useState используется для добавления состояния в функциональные компоненты. Он возвращает пару значений: текущее состояние и функцию для его обновления.

При вызове useState передается начальное значение состояния. Важно помнить, что обновление состояния асинхронно и может быть объединено с другими обновлениями.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

➡️В этом примере useState инициализирует состояние count значением 0. Функция setCount обновляет это состояние при нажатии на кнопку.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

В HTML-формах атрибуты action и method играют ключевую роль в определении поведения формы при отправке данных.

1⃣ Атрибут action указывает URL, куда будут отправлены данные формы. Это может быть скрипт или API, который обработает полученные данные.

2⃣ Атрибут method определяет HTTP-метод, используемый для отправки данных. Чаще всего используются методы GET и POST. GET отправляет данные в URL-строке, а POST — в теле запроса.

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">Отправить</button>
</form>

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

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

😊При использовании CSS-модулей каждый класс и идентификатор автоматически преобразуется в уникальное имя. Это достигается за счет генерации хешей, которые добавляются к именам классов. Таким образом, даже если в разных модулях используются одинаковые имена классов, они не будут конфликтовать.

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

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🟢Vue.js — это прогрессивный JavaScript-фреймворк, используемый для создания пользовательских интерфейсов. Он отличается своей гибкостью и простотой, что делает его идеальным выбором как для небольших проектов, так и для крупных приложений. Vue.js позволяет создавать компоненты, которые можно легко переиспользовать и комбинировать, что упрощает управление сложностью приложения.

▶️ Основные особенности Vue.js включают реактивные привязки данных и мощную систему компонентов. Это позволяет автоматически обновлять пользовательский интерфейс при изменении данных, что упрощает разработку интерактивных приложений. Vue.js также поддерживает интеграцию с другими библиотеками, что делает его универсальным инструментом для веб-разработки.

Пример простого компонента на Vue.js:

Vue.component('example-component', {
  template: '<div>Hello, Vue!</div>'
});

▶️ Vue.js активно используется для создания одностраничных приложений (SPA), где требуется высокая интерактивность и отзывчивость интерфейса.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Функция — это блок кода, предназначенный для выполнения определенной задачи. Использование функций улучшает читаемость и повторное использование кода.

Объявление функции в JavaScript можно осуществить несколькими способами:

1⃣ Функциональное объявление:

function greet(name) {
    return `Hello, ${name}!`;
}

2⃣ Функциональное выражение:

const greet = function(name) {
    return

 Hello, ${name}!;

};

3⃣ Стрелочная функция:

const greet = (name) =>

 Hello, ${name}!;

🟥 Каждый из этих методов позволяет создавать функции, которые можно вызывать с разными аргументами для выполнения заданных действий.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

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

⚫️JSX не является валидным JavaScript, поэтому он компилируется в вызовы React.createElement(). Например, <div>Hello</div> преобразуется в React.createElement('div', null, 'Hello'). Это позволяет React создавать виртуальное DOM-дерево, оптимизируя обновления реального DOM. JSX поддерживает JavaScript-выражения внутри фигурных скобок {}.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

➡️ Margin — это внешний отступ элемента, который определяет пространство вокруг него. Он позволяет управлять расстоянием между элементами на странице. Margin может быть задан для каждой стороны элемента отдельно: margin-top, margin-right, margin-bottom, margin-left, или с помощью сокращенной записи margin, где значения указываются по часовой стрелке, начиная с верхнего отступа.

.element {
  margin: 10px 20px 15px 5px; /* top, right, bottom, left */
}

➡️ Margin может принимать значения в пикселях, процентах и других единицах измерения.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🟢Атрибут placeholder используется в HTML для предоставления подсказки или примера ввода в текстовых полях формы. Он отображает текст внутри поля ввода, когда оно пустое и не в фокусе, помогая пользователю понять, какую информацию следует ввести.

<input type="text" placeholder="Enter your name">

🟢Этот атрибут улучшает пользовательский интерфейс, делая формы более интуитивно понятными. Однако текст placeholder исчезает при вводе данных.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

📝 Перечисления (Enums) служат для создания именованных констант, что делает код более читаемым и управляемым. Они позволяют группировать связанные значения под одним именем, обеспечивая удобный доступ к ним.

enum Direction {
  Up,
  Down,
  Left,
  Right
}

const move: Direction = Direction.Up;

🟠 По умолчанию перечисления имеют числовые значения, начиная с 0. Можно задавать свои значения:

enum Status {
  Active = 1,
  Inactive,
  Pending
}

🟠 Перечисления помогают избежать ошибок, связанных с использованием "магических" чисел и строк в коде.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Блочная модель в CSS описывает структуру и расположение элементов на веб-странице, включая их содержимое, внутренние отступы (padding), границы (border) и внешние отступы (margin). Она позволяет управлять размерами и позиционированием элементов, что является ключевым аспектом при создании интерфейсов.

✈️ Frontend собеседования