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

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

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

☝️ Рекурсия — это метод программирования, при котором функция вызывает саму себя для решения задачи. Это позволяет разбивать сложные задачи на более простые подзадачи. В JavaScript рекурсия часто используется для работы с деревьями и графами, а также для реализации алгоритмов, таких как сортировка и поиск. Пример рекурсивной функции для вычисления факториала числа:

function factorial(n) {
  // Базовый случай: факториал 0 равен 1
  if (n === 0) return 1;
  // Рекурсивный вызов: n * факториал (n-1)
  return n * factorial(n - 1);
}

Важно учитывать базовый случай, чтобы избежать бесконечной рекурсии.

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

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

Элементы "inline" занимают только необходимое пространство и располагаются в одной строке с другими элементами, например, теги <span> и <a>. Элементы "block" занимают всю ширину родительского контейнера и начинаются с новой строки, как <div>, а "inline-block" элементы, такие как <button>, сочетают свойства обоих: они располагаются в одной строке, но могут иметь заданные ширину и высоту.

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

☝️ Экземпляр Vue — это основа любого приложения на Vue.js. Он управляет данными, рендерингом и реактивностью. Создание экземпляра Vue — первый шаг в разработке приложения.

🔴 Для создания экземпляра Vue используется конструктор Vue. В него передаются опции, такие как el, data, methods и computed.

new Vue({
  // Указывает элемент, к которому будет привязан экземпляр
  el: '#app',
  // Данные, которые будут реактивными
  data: {
    message: 'Hello, Vue!'
  },
  // Методы, которые можно вызывать из шаблона
  methods: {
    greet() {
      return `Message: ${this.message}`;
    }
  }
});

🔴 Экземпляр Vue связывается с DOM и управляет его обновлением.

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

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

🔘 В React передача данных от родительского компонента к дочернему осуществляется через props. Родительский компонент передает данные в виде атрибутов, которые затем доступны в дочернем компоненте через объект props.

// Родительский компонент
function ParentComponent() {
  const data = "Привет, мир!";
  return <ChildComponent message={data} />;
}

// Дочерний компонент
function ChildComponent(props) {
  // Доступ к переданным данным через props
  return <div>{props.message}</div>;
}

😊 В этом примере ParentComponent передает строку "Привет, мир!" в ChildComponent через prop message. Дочерний компонент получает доступ к этому значению через props.message и отображает его.

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

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