Чтобы отменить изменения в файле, которые еще не были закоммичены, можно использовать команду 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 собеседования

✅Ссылочные якоря в 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 собеседования