Компонент в 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 собеседования

⏩ Приведение типов — это процесс преобразования значения одного типа в другой. Существует два вида приведения: неявное и явное. Неявное приведение происходит автоматически, когда компилятор преобразует типы без явного указания. Явное приведение требует явного указания программистом.

const value: any = "123";
const num: number = Number(value); // Явное приведение строки к числу

const str: string = num.toString(); // Явное приведение числа к строке

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

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

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

👉 Передача данных между компонентами осуществляется с помощью props и событий. Props позволяют передавать данные от родительского компонента к дочернему. Для передачи данных от дочернего компонента к родительскому используются события.

// Родительский компонент
<ChildComponent :message="parentMessage" @update="handleUpdate" />

// Дочерний компонент
props: ['message'],
methods: {
  sendUpdate() {
    this.$emit('update', 'новое сообщение'); // Отправка события с данными
  }
}

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

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

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

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

Тег <img> используется для вставки изображений на веб-страницы. Основные атрибуты включают src для указания источника изображения, alt для предоставления текстового описания на случай, если изображение не загрузится, и width и height для задания размеров изображения.

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

✅Для проверки, является ли значение конечным числом, используется функция isFinite(). Она возвращает true, если переданное значение является конечным числом, и false в противном случае.

isFinite(25); // true, так как 25 — конечное число
isFinite(Infinity); // false, так как Infinity — не конечное число
isFinite("123"); // true, строка "123" преобразуется в число 123
isFinite("abc"); // false, строка "abc" не может быть преобразована в число

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

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

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

Историю коммитов можно просмотреть с помощью команды git log, которая выводит список всех коммитов в репозитории с их хешами, авторами и сообщениями. Для более компактного отображения истории можно использовать git log --oneline, показывающую каждый коммит в одну строку.

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

📝 Списки создаются с помощью метода map(), который преобразует массив данных в массив JSX-элементов. Ключи необходимы для идентификации элементов списка и улучшения производительности при обновлениях.

const items = ['Apple', 'Banana', 'Cherry'];

const listItems = items.map((item, index) => (
  <li key={index}>{item}</li> // Использование ключей для каждого элемента
));

return <ul>{listItems}</ul>;

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

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

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

⏩Метатег viewport управляет отображением веб-страницы на мобильных устройствах, определяя размер и масштаб области просмотра. Он помогает адаптировать контент под разные экраны, улучшая пользовательский опыт.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Атрибут width=device-width устанавливает ширину страницы равной ширине экрана устройства, а initial-scale=1.0 задает начальный масштаб, обеспечивая корректное отображение.

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

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

Перегрузка функций в TypeScript позволяет объявлять несколько сигнатур для одной функции, обеспечивая различные варианты вызова с разными типами и количеством аргументов. Это улучшает гибкость и читаемость кода, позволяя одной функции обрабатывать различные сценарии использования.

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

👉 Директива v-for используется для рендеринга списка элементов на основе данных массива. Она перебирает элементы массива и создает экземпляр шаблона для каждого элемента.

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item }}
  </li>
</ul>

Атрибут :key помогает Vue отслеживать изменения в списке, обеспечивая эффективное обновление DOM.

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

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

➡️ Метод Date.now() возвращает количество миллисекунд, прошедших с 1 января 1970 года 00:00:00 по UTC. Это удобный способ получить текущее время в виде числового значения, что полезно для измерения интервалов или работы с временными метками.

const timestamp = Date.now();
// timestamp содержит количество миллисекунд с начала эпохи Unix

Метод не создает объект Date, что делает его более производительным по сравнению с использованием new Date().getTime(). Часто применяется для замера времени выполнения кода или генерации уникальных идентификаторов.

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

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

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

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

❌ Команда git merge --abort отменяет процесс слияния и вернет рабочую директорию в состояние, которое было до начала слияния. Это полезно, если в процессе возникли конфликты или слияние нужно прервать по другим причинам.

git merge --abort

Команда работает только в случае, если слияние не было завершено. После выполнения репозиторий возвращается к состоянию, в котором он находился до вызова git merge.

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

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

📝 Условный рендеринг в React позволяет отображать разные компоненты или элементы в зависимости от условий. Это можно реализовать несколькими способами.

1. Использование тернарного оператора:

const Component = ({ isLoggedIn }) => (
  isLoggedIn ? <WelcomeMessage /> : <LoginButton />
);

Если isLoggedIn истинно, отобразится WelcomeMessage, иначе — LoginButton.

2. Использование логического оператора &&:

const Component = ({ hasItems }) => (
  hasItems && <ItemList />
);

Если hasItems истинно, отобразится ItemList, иначе ничего не будет показано.

3. Использование условных операторов в JSX:

const Component = ({ isLoading }) => {
  if (isLoading) {
    return <Spinner />;
  }
  return <Content />;
};

В зависимости от значения isLoading возвращается либо Spinner, либо Content.

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

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

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