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

Конкатенация строк в JavaScript может быть выполнена с помощью оператора +, который объединяет две или более строки в одну. Также можно использовать метод concat(), который принимает несколько строк в качестве аргументов и возвращает новую строку. В современных версиях JavaScript часто применяются шаблонные строки с использованием обратных кавычек, что позволяет вставлять переменные и выражения внутрь строк.

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

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

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

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

Пример функционального компонента:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Пример классового компонента:

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

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

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

Атрибут id и класс используются для идентификации и стилизации элементов, но имеют разные назначения и ограничения.

1⃣ id — уникальный идентификатор элемента на странице. Он должен быть уникальным в пределах документа и часто используется для JavaScript манипуляций и CSS селекторов:

<div id="header"></div>

2⃣ Класс (class) позволяет группировать элементы для применения общих стилей или поведения. Один элемент может иметь несколько классов, и один класс может быть применен к нескольким элементам:

<div class="button primary"></div>

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

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

🚀 Реактивность во Vue — это ключевая концепция, которая позволяет автоматически обновлять пользовательский интерфейс при изменении данных. Vue отслеживает изменения в объектах данных и обновляет DOM, когда данные изменяются. Это достигается благодаря использованию Proxy во Vue 3 или Object.defineProperty во Vue 2.

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
});

app.mount('#app');

При изменении message, Vue автоматически обновит все связанные с ним элементы в DOM.

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

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

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

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

CSS-in-JS — это подход к стилизации веб-приложений, при котором стили пишутся непосредственно в JavaScript-коде. Этот метод позволяет использовать динамические стили, которые могут изменяться в зависимости от состояния компонента или приложения. Преимущества CSS-in-JS:

😎 Изоляция стилей: Стили применяются только к конкретным компонентам, что предотвращает конфликты имен классов и утечку стилей.

😎 Динамичность: Легко изменять стили в зависимости от состояния приложения или пропсов компонентов.

😎 Поддержка темизации: Упрощает создание тем и их переключение.

😎 Удобство разработки: Стили и логика компонента находятся в одном месте, что упрощает поддержку и развитие кода.

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

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

👉 Наследование в ES6-классах позволяет создавать новые классы на основе существующих, используя ключевое слово extends. Это позволяет новому классу (производному) наследовать свойства и методы базового класса.

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak();

Метод super() используется для вызова конструктора базового класса, что позволяет инициализировать свойства, унаследованные от родителя.

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

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

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

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

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

📝 Виртуальный DOM (Virtual DOM) — это концепция, используемая в React для оптимизации обновлений пользовательского интерфейса. Он представляет собой легковесную копию реального DOM, которая хранится в памяти и синхронизируется с реальным DOM с помощью библиотеки React.

✅ Когда состояние компонента изменяется, React сначала обновляет виртуальный DOM. Затем сравнивает его с предыдущей версией, используя алгоритм "согласования" (reconciliation), чтобы определить минимальные изменения, необходимые для обновления реального DOM. Это позволяет значительно уменьшить количество операций с DOM, улучшая производительность приложения.

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

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

⏩ Тег <canvas> в HTML5 используется для рисования графики на веб-странице с помощью JavaScript. Он предоставляет область, в которой можно создавать динамические, интерактивные изображения, такие как графики, игры и анимации.

⏩ <canvas> сам по себе не содержит графики. Для рисования используется JavaScript API, который позволяет рисовать линии, фигуры, текст и изображения. Пример использования:

<canvas id="myCanvas" width="200" height="100"></canvas>
<noscript>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 150, 80);
</noscript>

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

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