🔥 HOC (Higher-Order Component) — это функция в React, которая принимает компонент и возвращает новый компонент. HOC используется для повторного использования логики между компонентами, не изменяя их структуру.

Пример HOC, добавляющего функциональность логирования:

function withLogging(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('Component rendered with props:', props);
    return <WrappedComponent {...props} />;
  };
}

👉 HOC позволяет оборачивать компоненты, добавляя к ним дополнительное поведение, такое как логирование, авторизация или кэширование, без изменения их внутренней логики.

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

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

<meta> теги используются в HTML для хранения метаданных о веб-странице. Они не отображаются на самой странице, но играют важную роль в SEO и управлении данными.

Основные метатеги:

1️⃣ <meta charset="UTF-8"> — определяет кодировку символов, обычно UTF-8.
2️⃣ <meta name="denoscription" content="Описание страницы"> — краткое описание страницы для поисковых систем.
3️⃣ <meta name="keywords" content="ключевые, слова"> — ключевые слова для SEO.
4️⃣ <meta name="author" content="Автор"> — указывает автора страницы.
5️⃣ <meta name="viewport" content="width=device-width, initial-scale=1.0"> — управляет отображением на мобильных устройствах.

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

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

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

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

✅Ссылочные якоря в HTML позволяют создавать ссылки, которые ведут к определенным частям веб-страницы. Это полезно для навигации по длинным документам или страницам с большим количеством контента.

✅Для создания якоря используется атрибут id. Например, <h2 id="section1">Section 1</h2> задает якорь с именем "section1". Чтобы создать ссылку на этот якорь, используется href с символом #: <a href="#section1">Перейти к Section 1</a>.

✅При клике на ссылку браузер прокручивает страницу до элемента с указанным id.

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

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

Модификатор readonly в TypeScript используется для обозначения свойств, которые могут быть установлены только при инициализации объекта или в конструкторе, предотвращая их изменение в дальнейшем. Модификатор static позволяет определять свойства и методы класса, доступные без создания экземпляра этого класса, что делает их общими для всех экземпляров.

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

📝 Цепочка промисов — это последовательное выполнение асинхронных операций, где каждый промис передает результат следующему через метод then(). Это позволяет обрабатывать результаты асинхронных вызовов поочередно, упрощая код и улучшая его читаемость.

fetchData()
  .then(response => processResponse(response)) // Обработка ответа
  .then(data => saveData(data)) // Сохранение данных
  .catch(error => handleError(error)); // Обработка ошибок

Каждый then() возвращает новый промис, что позволяет добавлять дополнительные шаги в цепочку.

👉 Тут еще больше JS

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

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

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

✅Рабочая директория — это текущая папка на локальной машине, где происходит работа с файлами проекта. Она содержит файлы, которые можно редактировать, добавлять или удалять. Изменения в рабочей директории можно зафиксировать в системе контроля версий с помощью команд git add и git commit.

# Добавление изменений в индекс
git add .

# Фиксация изменений с комментарием
git commit -m "Описание изменений"

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

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

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

import React, { useState } from 'react';

function Counter() {
  // Инициализация состояния с начальным значением 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Текущее значение: {count}</p>
      {/* Обновление состояния при клике */}
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

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

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

Тег <fieldset> используется для группировки связанных элементов формы, обеспечивая логическую организацию и улучшая доступность. Тег <legend> задает заголовок для содержимого <fieldset>, описывая его назначение и улучшая восприятие пользователями.

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

✔️ Для начала необходимо установить TypeScript глобально или в проекте. Для глобальной установки используется команда:

npm install -g typenoscript

Для установки в проекте:

npm install --save-dev typenoscript

После установки создается файл конфигурации tsconfig.json с помощью команды:

npx tsc --init

Этот файл позволяет настроить компилятор. Например, для указания директории с исходными файлами и директории для выходных файлов:

{
  "compilerOptions": {
    "outDir": "./dist", // Директория для выходных файлов
    "rootDir": "./src"  // Директория с исходными файлами
  }
}

Теперь компиляция TypeScript в JavaScript выполняется командой:

npx tsc

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

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

JWT (JSON Web Token) — это компактный, URL-безопасный способ передачи информации между сторонами в виде JSON-объекта. Он часто используется для аутентификации, где сервер генерирует токен, содержащий закодированную информацию о пользователе, и отправляет его клиенту, который затем прикрепляет этот токен к заголовкам последующих запросов для подтверждения своей личности. Валидация токена на сервере позволяет удостовериться в подлинности пользователя без необходимости хранения сессий на сервере.

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

🟠 Селекторы атрибутов позволяют выбирать элементы на основе наличия или значения их атрибутов. Они полезны для стилизации элементов без добавления дополнительных классов или идентификаторов.

/* Выбирает все элементы с атрибутом data-role */
[data-role] {
  border: 1px solid black;
}

/* Выбирает элементы с атрибутом data-role, значение которого равно "admin" */
[data-role="admin"] {
  background-color: lightblue;
}

/* Выбирает элементы, значение атрибута data-role которых начинается с "user" */
[data-role^="user"] {
  color: green;
}

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

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

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

Когда изменения вносятся в рабочую директорию, они сначала попадают в staging area с помощью команды git add. После этого можно создать коммит с помощью git commit, который зафиксирует изменения из staging area в репозитории.

git add file.txt  # Добавление изменений в staging area
git commit -m "Описание изменений"  # Создание коммита

Таким образом, staging area служит буфером между рабочей директорией и историей коммитов, обеспечивая гибкость в управлении изменениями.

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

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

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

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

💥 Для создания выпадающего списка в HTML используется элемент <select>, который содержит несколько элементов <option>. Каждый <option> представляет отдельный пункт списка, который пользователь может выбрать.

<select name="fruits">
  <option value="apple">Apple</option> <!-- Пункт "Apple" -->
  <option value="banana">Banana</option> <!-- Пункт "Banana" -->
  <option value="cherry">Cherry</option> <!-- Пункт "Cherry" -->
</select>

Атрибут name указывает имя списка, а value в <option> задаёт значение, которое будет отправлено на сервер при выборе этого пункта.

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

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

🟥 Метод push используется для добавления одного или нескольких элементов в конец массива. Он изменяет исходный массив и возвращает новую длину массива.

const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange', 'mango');

// Массив fruits теперь содержит ['apple', 'banana', 'orange', 'mango']
// newLength равно 4

Метод push полезен, когда необходимо динамически добавлять элементы в массив, сохраняя порядок добавления. Это один из наиболее часто используемых методов для работы с массивами в JavaScript.

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

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

"Margin" определяет внешнее пространство вокруг элемента, создавая отступы между ним и соседними элементами, тогда как "padding" задает внутреннее пространство, увеличивая расстояние между содержимым элемента и его границей. Оба свойства помогают управлять расположением и визуальным восприятием элементов на странице.

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

✅ Для просмотра статуса репозитория используется команда git status. Она отображает информацию о текущем состоянии рабочего каталога и индекса, включая изменения, которые были подготовлены для коммита, изменения, которые не были подготовлены, и файлы, которые не отслеживаются.

git status

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

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

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

Лучшие практики включают использование семантических тегов, таких как `<header>`, `<nav>`, `<article>`, и `<footer>`, чтобы улучшить структуру страницы и помочь поисковым системам понять контент. Также важно оптимизировать мета-теги, включая `<noscript>` и `<meta denoscription>`, чтобы обеспечить релевантность и привлекательность для пользователей и поисковых систем.

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

📝 Хук useContext позволяет компонентам React получать доступ к значению контекста без необходимости передавать его через пропсы. Это упрощает управление состоянием, которое должно быть доступно многим компонентам на разных уровнях вложенности.

import React, { useContext } from 'react';

// Создание контекста
const ThemeContext = React.createContext('light');

function ThemedComponent() {
    // Получение текущего значения контекста
    const theme = useContext(ThemeContext);

    // Использование значения контекста
    return <div>Current theme: {theme}</div>;
}

В этом примере useContext извлекает значение темы из ThemeContext, что позволяет компоненту использовать его напрямую.

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

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