👩‍💻 Чем отличаются контролируемые и неконтролируемые компоненты?

Контролируемые и неконтролируемые компоненты в React отличаются способом управления состоянием формы.

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

function ControlledInput() {
  const [value, setValue] = useState('');
  return (
    <input
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  );
}

Неконтролируемые компоненты полагаются на DOM для управления состоянием формы. Значения элементов собираются с помощью ссылок (refs), что упрощает использование, но предоставляет меньше контроля и усложняет валидацию.

function UncontrolledInput() {
  const inputRef = useRef();
  
  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };
  
  return (
    <input ref={inputRef} />
  );
}

Основные различия:
- Управление данными: Контролируемые – через состояние, неконтролируемые – через DOM.
- Контроль и валидация: Контролируемые обеспечивают больший контроль и удобную валидацию.
- Простота использования: Неконтролируемые проще в реализации для простых форм.

Выбор между ними зависит от требований к контролю над формой и сложности приложения.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Объясни использование тега <nonoscript>

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

Применение:

1. Отображение сообщения:

<nonoscript>
  Ваш браузер не поддерживает JavaScript или он отключен. Для корректной работы сайта включите JavaScript.
</nonoscript>

2. Альтернативный контент:

<nonoscript>
  <img src="static-image.jpg" alt="Статическое изображение для пользователей без JavaScript">
</nonoscript>

Преимущества:

- Улучшение доступности: Обеспечивает доступ к важной информации для пользователей без JavaScript.
- SEO: Помогает поисковым системам понимать альтернативный контент.
- Фолбэк решения: Предоставляет альтернативные пути взаимодействия при отсутствии скриптов.

Особенности:

- Содержимое <nonoscript> отображается только в том случае, если JavaScript отключен или не поддерживается.
- Использовать этот тег стоит для важной информации или функционала, критичного для работы сайта.

Использование <nonoscript> способствует созданию более универсальных и надежных веб-приложений, учитывающих различные сценарии использования.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как создать сетку с помощью CSS Grid?

Создание сетки с помощью CSS Grid начинается с задания контейнера как grid и определения строк и столбцов.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 200px 200px;
  gap: 10px;
}

В этом примере:

- display: grid; превращает элемент в grid-контейнер.
- grid-template-columns: repeat(3, 1fr); создаёт три столбца одинаковой ширины.
- grid-template-rows: 200px 200px; задаёт две строки высотой по 200 пикселей.
- gap: 10px; устанавливает расстояние между ячейками сетки.

Размещение элементов:

Элементы внутри контейнера автоматически размещаются в ячейках сетки по порядку. Можно явно позиционировать элементы с помощью свойств grid-column и grid-row.

.item {
  grid-column: 1 / 3;
  grid-row: 1;
}

Этот код размещает элемент item от первого до третьего столбца в первой строке.

Преимущества CSS Grid:

- Двумерное построение макетов (строки и столбцы).
- Простое и интуитивное размещение элементов.
- Гибкость в создании адаптивных дизайнов.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 В чем разница между splice и slice?

Методы splice и slice в JavaScript используются для работы с массивами, но имеют разные назначения и поведение.

splice

Метод splice изменяет исходный массив, позволяя добавлять, удалять или заменять элементы.

const array = [1, 2, 3, 4];
array.splice(2, 1, 'a', 'b');
console.log(array); // [1, 2, 'a', 'b', 4]

В данном примере начиная с индекса 2 удаляется 1 элемент и добавляются 'a' и 'b'.

slice

Метод slice не изменяет исходный массив, а возвращает новый массив, содержащий копию части оригинала.

const array = [1, 2, 3, 4];
const newArray = array.slice(1, 3);
console.log(newArray); // [2, 3]
console.log(array); // [1, 2, 3, 4]

Здесь slice возвращает элементы с индексов 1 до 3 (не включая 3), оставляя оригинальный массив неизменным.

Ключевые различия:
- Изменение массива: splice изменяет исходный массив, slice — нет.
- Назначение: splice для добавления/удаления элементов, slice для копирования части массива.
- Возвращаемое значение: splice возвращает массив удалённых элементов, slice — новый массив.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как наследовать интерфейсы в TypeScript?

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

Пример наследования интерфейсов:

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  employeeId: string;
}

const emp: Employee = {
  name: "Иван",
  age: 30,
  employeeId: "E123"
};

В этом примере интерфейс Employee наследует свойства из интерфейса Person и добавляет своё свойство employeeId.

Множественное наследование:

Интерфейс может наследовать несколько интерфейсов одновременно.

interface Manager extends Employee, Lead {
  department: string;
}

Расширение через extends:

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

Использование наследования интерфейсов способствует структурированности и ясности в определении типов данных в TypeScript.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как использовать ref для доступа к DOM-элементам?

В React ref используется для прямого доступа к DOM-элементам. Это необходимо для управления фокусом, выделения текста или интеграции со сторонними библиотеками.

Как использовать ref:

1. Импортировать хук useRef:

import React, { useRef } from 'react';

2. Создать ref:

const inputRef = useRef(null);

3. Присоединить ref к элементу:

<input ref={inputRef} type="text" />

4. Установить фокус:

inputRef.current.focus();

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

function TextInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Фокус</button>
    </div>
  );
}

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

- Прямой доступ к DOM-элементам
- Управление фокусом и текстом
- Интеграция со сторонними библиотеками

Использование ref должно быть ограничено случаями, когда необходим прямой доступ к элементам, чтобы сохранять декларативный подход React.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое медиазапросы в CSS?

Медиазапросы в CSS позволяют применять стили в зависимости от характеристик устройства, например, размера экрана. Это основной инструмент для создания адаптивного дизайна, обеспечивающий корректное отображение сайта на различных устройствах.

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

/* Стили по умолчанию */
.container {
  width: 100%;
  padding: 20px;
}

/* Медиазапрос для экранов шириной 768px и больше */
@media (min-width: 768px) {
  .container {
    width: 750px;
    padding: 40px;
  }
}

/* Медиазапрос для экранов шириной 1024px и больше */
@media (min-width: 1024px) {
  .container {
    width: 960px;
    padding: 60px;
  }
}

Основные возможности:

- Адаптация к различным устройствам: Настройка стилей для мобильных, планшетов, десктопов.
- Оптимизация производительности: Применение только необходимых стилей для конкретного устройства.
- Гибкость дизайна: Изменение макета и элементов интерфейса под разные размеры экранов.

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как включить файл JavaScript в HTML-документ?

Для включения JavaScript файла в HTML-документ используется тег <noscript>. Этот тег может быть размещен в <head> или в <body> секциях HTML-документа.

Наиболее распространенный способ — это подключение скрипта перед закрывающим тегом </body>. Это позволяет загружать и выполнять JavaScript после того, как весь HTML-контент был загружен, что улучшает производительность страницы.

Пример подключения внешнего JavaScript файла:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <noscript>Document</noscript>
</head>
<body>
    <h1>Hello, World!</h1>
    <noscript src="noscript.js"></noscript>
</body>
</html>

Атрибут src указывает путь к JavaScript файлу. Если файл находится в той же директории, что и HTML-документ, достаточно указать его имя.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое объект в JS и как его создать?

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

Создать объект можно несколькими способами. Один из самых распространенных — использование литерала объекта.

Пример создания объекта с помощью литерала:

const person = {
    name: "John",
    age: 30,
    greet: function() {
        console.log("Hello!");
    }
};

В этом примере объект person имеет три свойства: name, age и метод greet.

Другой способ создания объекта — использование конструктора Object:

const car = new Object();
car.make = "Toyota";
car.model = "Camry";
car.year = 2020;

Оба подхода позволяют динамически добавлять и изменять свойства объекта.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как использовать интерфейсы для типизации функций?

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

Пример использования интерфейса для типизации функции:

interface Greet {
    (name: string, age: number): string;
}

const greet: Greet = (name, age) => {
    return `Hello, my name is ${name} and I am ${age} years old.`;
};

В этом примере интерфейс Greet определяет функцию, которая принимает два параметра: name типа string и age типа number, и возвращает строку. Функция greet реализует этот интерфейс, обеспечивая соответствие указанной сигнатуре.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое lazy loading компонентов?

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

В React для реализации lazy loading используется функция React.lazy(), которая позволяет загружать компонент асинхронно. В сочетании с компонентом Suspense можно указать, что отображать, пока компонент загружается.

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

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
    return (
        <div>
            <Suspense fallback={<div>Loading...</div>}>
                <LazyComponent />
            </Suspense>
        </div>
    );
}

export default App;

В этом примере LazyComponent загружается только при его рендеринге, а Suspense отображает сообщение "Loading..." до завершения загрузки.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое атрибут srcset и как он используется?

Атрибут srcset в HTML используется для указания набора изображений с разными разрешениями или размерами, позволяя браузеру выбрать наиболее подходящее изображение в зависимости от устройства и его характеристик. Это помогает оптимизировать загрузку изображений и улучшить производительность веб-страницы.

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

<img 
    src="image-1x.jpg" 
    srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" 
    alt="Example Image">

В этом примере атрибут srcset предоставляет три версии изображения: image-1x.jpg для стандартных дисплеев, image-2x.jpg для дисплеев с удвоенной плотностью пикселей и image-3x.jpg для дисплеев с утроенной плотностью. Браузер автоматически выберет наиболее подходящее изображение в зависимости от плотности пикселей устройства.

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое mobile-first разработка в CSS?

Mobile-first разработка в CSS — это подход к созданию веб-страниц, который предполагает первоначальную разработку для мобильных устройств, а затем адаптацию для более крупных экранов. Этот метод помогает обеспечить оптимальную производительность и пользовательский опыт на мобильных устройствах, которые часто имеют ограниченные ресурсы.

В mobile-first подходе стили для мобильных устройств пишутся первыми, а затем с помощью медиа-запросов добавляются стили для планшетов и десктопов.

Пример использования mobile-first подхода:

body {
    font-size: 16px;
    padding: 10px;
}

@media (min-width: 768px) {
    body {
        font-size: 18px;
        padding: 20px;
    }
}

@media (min-width: 1024px) {
    body {
        font-size: 20px;
        padding: 30px;
    }
}

В этом примере базовые стили применяются к мобильным устройствам, а затем с помощью медиа-запросов изменяются для более широких экранов.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как получить доступ к свойствам объекта?

В JavaScript доступ к свойствам объекта можно получить двумя основными способами: через точечную нотацию и через квадратные скобки.

Точечная нотация используется, когда имя свойства известно и является допустимым идентификатором:

const person = {
    name: "Alice",
    age: 25
};

console.log(person.name); // "Alice"
console.log(person.age);  // 25

Квадратные скобки позволяют использовать строки или переменные для доступа к свойствам, что особенно полезно, если имя свойства динамическое или содержит пробелы:

const property = "name";
console.log(person[property]); // "Alice"

const complexObject = {
    "first name": "Bob"
};

console.log(complexObject["first name"]); // "Bob"

Оба метода позволяют как читать, так и изменять значения свойств объекта.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как задать тип для класса?

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

Пример задания типов для класса:

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    greet(): string {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    }
}

const person = new Person("Alice", 25);
console.log(person.greet());

В этом примере класс Person имеет два свойства: name и age, типизированные как string и number соответственно. Конструктор и метод greet также имеют типизацию для параметров и возвращаемого значения. Это обеспечивает безопасность типов и облегчает поддержку кода.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Для чего нужен React.memo() и как его использовать?

React.memo() — это функция высшего порядка в React, используемая для оптимизации производительности функциональных компонентов. Она предотвращает ненужные повторные рендеры компонента, если его пропсы не изменились. Это особенно полезно для компонентов, которые часто получают одни и те же пропсы.

Пример использования React.memo():

import React from 'react';

const MyComponent = React.memo(({ name }) => {
    console.log("Rendering MyComponent");
    return <div>Hello, {name}!</div>;
});

export default MyComponent;

В этом примере MyComponent будет рендериться только тогда, когда его пропсы изменяются. Если name остается прежним, повторный рендер не произойдет, что может значительно улучшить производительность приложения, особенно при работе с большими компонентами или сложными деревьями компонентов.

React.memo() работает аналогично PureComponent для классовых компонентов, но предназначен для функциональных компонентов.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как использовать атрибут content в мета-тегах?

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

Пример использования атрибута content в мета-тегах:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="denoscription" content="This is an example of a meta denoscription.">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <noscript>Document</noscript>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое useState?

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

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

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Current count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

В этом примере useState(0) инициализирует состояние count со значением 0. Функция setCount используется для обновления состояния. При каждом вызове setCount, компонент перерисовывается с новым значением состояния.

useState упрощает управление состоянием в функциональных компонентах, делая их более компактными и понятными по сравнению с классовыми компонентами.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как добавить новое свойство в объект?

Добавление нового свойства в объект JavaScript — это простая и часто используемая операция. Существует несколько способов сделать это.

Первый способ — использование точечной нотации:

const person = {};
person.name = 'John';

Этот код добавляет свойство name со значением 'John' в объект person.

Второй способ — использование квадратных скобок:

const person = {};
person['age'] = 30;

Этот метод полезен, когда имя свойства хранится в переменной или содержит специальные символы.

Также можно использовать метод Object.assign() для добавления нескольких свойств:

const person = {};
Object.assign(person, { height: 180, weight: 75 });

Этот метод копирует свойства из одного или нескольких объектов в целевой объект.

Каждый из этих способов позволяет гибко и эффективно управлять свойствами объектов в JavaScript.

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Как задать шрифт для всего документа?

Задание шрифта для всего HTML-документа — важный шаг в стилизации веб-страницы. Это можно сделать с помощью CSS, применив стиль к элементу <body> или к селектору *, который охватывает все элементы.

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

body {
  font-family: 'Arial', sans-serif;
}

Этот код устанавливает шрифт Arial для всего содержимого страницы. Если Arial недоступен, будет использован ближайший доступный шрифт без засечек (sans-serif).

Альтернативный способ — использование универсального селектора *:

* {
  font-family: 'Arial', sans-serif;
}

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

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈

👩‍💻 Что такое namespaces в TypeScript и как они используются?

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

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

namespace Geometry {
  export class Circle {
    constructor(public radius: number) {}
    area(): number {
      return Math.PI * this.radius * this.radius;
    }
  }
}

const circle = new Geometry.Circle(5);
console.log(circle.area());

В этом примере класс Circle находится в пространстве имен Geometry. Использование export делает класс доступным за пределами namespace.

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

Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈