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

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

💥 События в React работают аналогично событиям в DOM, но с некоторыми отличиями. В React события именуются в стиле camelCase, например, onClick вместо onclick. Также в React передаются функции, а не строки, как обработчики событий.

Пример:

function handleClick() {
  console.log('Button clicked');
}

<button onClick={handleClick}>Click Me</button>

В этом примере handleClick вызывается при клике на кнопку.

🟥 React использует систему событий, которая называется SyntheticEvent. Это кроссбраузерная оболочка над нативными событиями браузера, обеспечивающая единое API для всех браузеров.

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

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

Для преобразования числа в строку в JavaScript можно использовать метод toString(), который вызывается на числовом значении. Также можно воспользоваться функцией String(), передав в неё число в качестве аргумента, что вернёт его строковое представление.

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

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

📝 CSS Grid — это система компоновки, которая позволяет создавать сложные макеты с помощью сетки. Она предоставляет возможность размещать элементы в двухмерной сетке, управляя как строками, так и столбцами.

Для использования Grid необходимо задать контейнеру свойство display: grid. Затем с помощью свойств, таких как grid-template-columns и grid-template-rows, можно определить структуру сетки.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Три равные колонки */
  grid-gap: 10px; /* Расстояние между элементами */
}

⚡️В этом примере создаётся сетка из трёх колонок с равной шириной и промежутком в 10 пикселей между элементами.

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

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

Теги <div> и <span> используются для группировки и стилизации элементов в HTML, но имеют разные цели и свойства.

1️⃣ <div> — блочный элемент. Он занимает всю ширину родительского контейнера и начинается с новой строки. Используется для создания крупных блоков контента, таких как секции или контейнеры.

2️⃣ <span> — строчный элемент. Он занимает только необходимую ширину и не нарушает поток текста. Применяется для стилизации отдельных частей текста или небольших элементов внутри блока.

<div> <!-- Блочный элемент -->
  <span>Текст</span> <!-- Строчный элемент -->
</div>

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

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

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

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

📝 var, let и const — это ключевые слова для объявления переменных в JavaScript, но они имеют различия в области видимости и изменяемости.

var имеет функциональную область видимости и подвержен всплытию, что может привести к неожиданным поведением в коде. let и const имеют блочную область видимости, что делает их более предсказуемыми. let позволяет изменять значение переменной, тогда как const используется для объявления констант, значение которых нельзя изменить после инициализации.

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

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

💡Box Model — это фундаментальная концепция CSS, описывающая, как элементы веб-страницы занимают пространство и взаимодействуют друг с другом. Каждый элемент представляется в виде прямоугольника, состоящего из четырех областей: содержимого (content), внутреннего отступа (padding), границы (border) и внешнего отступа (margin).

.element {
  width: 100px; /* Ширина содержимого */
  padding: 10px; /* Внутренний отступ */
  border: 5px solid black; /* Граница */
  margin: 20px; /* Внешний отступ */
}

⏩ Общая ширина элемента рассчитывается как сумма ширины содержимого, внутреннего отступа, границы и внешнего отступа. Box Model позволяет управлять расположением и размером элементов на странице.

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

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

Чтобы отменить изменения в файле, которые еще не были закоммичены, можно использовать команду git checkout -- <имя_файла>. Если изменения уже были добавлены в индекс, сначала нужно выполнить git reset HEAD <имя_файла>, а затем git checkout -- <имя_файла>.

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

🔥 React Router — это библиотека для маршрутизации в приложениях на React. Она позволяет создавать одностраничные приложения с навигацией без перезагрузки страницы. Основные компоненты: BrowserRouter, Route, Link, Switch.

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

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// Компонент главной страницы
function Home() {
  return <h2>Home</h2>;
}

// Компонент страницы "О нас"
function About() {
  return <h2>About</h2>;
}

// Основной компонент приложения
function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

BrowserRouter оборачивает приложение, Route определяет путь и компонент, Link создает навигацию.

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

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

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

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

⏩ Свойство white-space управляет тем, как обрабатываются пробелы в тексте. Оно определяет, сохраняются ли пробелы и переносы строк, а также как текст переносится на новую строку.

Основные значения:

1️⃣ normal: Пробелы сокращаются до одного, текст переносится по необходимости.
2️⃣ nowrap: Пробелы сокращаются, текст не переносится.
3️⃣ pre: Пробелы и переносы сохраняются, текст не переносится.
4️⃣ pre-wrap: Пробелы и переносы сохраняются, текст переносится.
5️⃣ pre-line: Пробелы сокращаются, переносы сохраняются, текст переносится.

p {
  white-space: pre-wrap; /* Сохраняет пробелы и переносы, текст переносится */
}

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

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

Цикл while выполняет блок кода до тех пор, пока заданное логическое условие истинно, проверяя его перед каждой итерацией. Если условие становится ложным, выполнение цикла прекращается, и программа продолжает выполнение следующего кода.

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

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

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

Для определения кортежа используется синтаксис массива с указанием типов:

// Определение кортежа с двумя элементами: строкой и числом
let user: [string, number];

// Присвоение значений кортежу
user = ["Alice", 25];

// Доступ к элементам кортежа
let name: string = user[0]; // "Alice"
let age: number = user[1]; // 25

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

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

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

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

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

⏩ typeof — это оператор, который возвращает строку, указывающую тип неинициализированного значения. Он полезен для проверки типа переменной или выражения.

console.log(typeof 42); // "number"
console.log(typeof 'Hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (особенность языка)
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"

Важно помнить, что typeof null возвращает "object", что является исторической ошибкой в языке.

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

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

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

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

➡️ Индексация — это процесс добавления изменений в промежуточную область, известную как индекс или staging area. Индекс служит буфером между рабочей директорией и репозиторием, позволяя подготовить набор изменений для коммита.

Чтобы добавить файл в индекс, используется команда:

git add <filename>

Для добавления всех изменений:

git add .

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

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

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

🔥 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 собеседования