👩‍💻 В чем разница между тегами <strong> и <b>?

Теги <strong> и <b> в HTML используются для выделения текста, но имеют разные смысловые нагрузки и предназначения.

<strong>

Тег <strong> представляет собой семантический элемент, который указывает на важность или срочность содержимого. Он помогает поисковым системам и вспомогательным технологиям понимать структуру и значение текста.

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

<p>Обязательно прочитайте <strong>важные инструкции</strong> перед началом работы.</p>

<b>

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

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

<p>Это предложение содержит слово <b>жирным</b> шрифтом.</p>

Основные различия:

1. Семантика:
- <strong> несет смысловую нагрузку, указывая на важность текста.
- <b> служит только для визуального выделения без дополнительного смысла.

2. Доступность:
- Скринридеры могут по-разному интерпретировать <strong>, подчеркивая важность прочтения.
- <b> не передает дополнительной информации скринридерам.

3. SEO:
- Поисковые системы могут учитывать <strong> при ранжировании контента из-за его семантической важности.
- <b> не влияет на SEO, так как не несет смысловой информации.

Когда использовать:

- Использовать <strong>, когда требуется подчеркнуть важность или срочность текста.
- Использовать <b>, когда необходимо просто выделить текст визуально без передачи дополнительного смысла, например, для стилизации.

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

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

👩‍💻 Что такое children props в React?

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

Использование children:

// Определение компонента-обертки
function Container({ children }) {
    return (
        <div className="container">
            {children /* Отображение вложенных элементов */}
        </div>
    );
}

// Использование компонента с вложенными элементами
function App() {
    return (
        <Container>
            <h1>Заголовок приложения</h1>
            <p>Некоторый текст внутри контейнера.</p>
        </Container>
    );
}

В этом примере компонент Container принимает любые вложенные элементы, переданные между его открывающим и закрывающим тегами, и отображает их внутри div с классом container.

Ключевые аспекты children:

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

2. Композиция компонентов: С помощью children можно создавать сложные компоненты из более простых, комбинируя их функциональность.

3. Типы данных: Свойство children может содержать строки, числа, элементы React, массивы элементов и другие типы данных.

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

- Создание Layout-компонентов: Например, компоненты Header, Footer и основной контент могут быть организованы с помощью children в общем компоненте Layout.

- Higher-Order Components (HOC): Компоненты высшего порядка часто используют children для оборачивания других компонентов и добавления дополнительной функциональности.

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

Свойство children является фундаментальной концепцией в React, позволяющей создавать гибкие и переиспользуемые компоненты.

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

👩‍💻 Как работает свойство z-index?

Свойство z-index в CSS управляет порядком наложения элементов на странице. Оно определяет, какие элементы будут отображаться поверх других, основываясь на их значении z-index. Чем выше значение, тем выше элемент располагается по оси Z.

Основные принципы работы z-index:

1. Позиционирование: z-index работает только с элементами, у которых задано свойство position со значением relative, absolute, fixed или sticky. Без позиционирования z-index не применяется.

2. Контекст наложения: Каждый позиционированный элемент создает новый контекст наложения. Внутри этого контекста z-index элементов сравнивается между собой, но не с элементами из других контекстов.

3. Значения: Значения z-index могут быть как положительными, так и отрицательными числами. По умолчанию элементы имеют z-index: auto, что означает, что они располагаются в порядке появления в HTML.

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

<style>
  .box1 {
    position: absolute; /* Устанавливает позиционирование */
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: 1; /* Нижний слой */
  }
  
  .box2 {
    position: absolute;
    top: 80px;
    left: 80px;
    width: 100px;
    height: 100px;
    background-color: blue;
    z-index: 2; /* Верхний слой */
  }
</style>

<div class="box1"></div>
<div class="box2"></div>

В этом примере синий блок с z-index: 2 будет отображаться поверх красного блока с z-index: 1, несмотря на то, что красный блок объявлен первым в HTML.

Советы по использованию z-index:

- Избегать чрезмерного использования высоких значений z-index, чтобы не создавать сложных и запутанных контекстов наложения.
- Управлять z-index внутри отдельных контекстов наложения для лучшей организованности слоев.
- Проверять позиционирование элементов, если z-index не влияет на отображение, так как без заданного position свойство не работает.

Понимание работы z-index помогает управлять расположением элементов на странице и создавать интерфейсы без визуальных конфликтов.

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

👩‍💻 Что такое union-типы и как их использовать?

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

Синтаксис:

let value: string | number;

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

function display(value: string | number) {
    if (typeof value === "string") {
        console.log("Строка:", value.toUpperCase()); // Преобразование строки в верхний регистр
    } else {
        console.log("Число:", value.toFixed(2)); // Форматирование числа с двумя десятичными знаками
    }
}

display("hello");
display(123.456);

В этом примере функция display принимает параметр value, который может быть строкой или числом. Внутри функции с помощью проверки typeof определяется тип значения и выполняются соответствующие действия.

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

1. Гибкость: Позволяют функциям и переменным работать с несколькими типами данных без потери безопасности типов.
2. Упрощение кода: Снижают необходимость создавать дополнительные типы или интерфейсы для различных вариантов данных.
3. Безопасность: TypeScript обеспечивает проверку типов на этапе компиляции, предотвращая возможные ошибки.

Когда использовать union-типы:

- Когда функция или компонент может принимать различные типы данных.
- При работе с внешними данными, где тип может быть неоднозначным.
- Для создания универсальных и переиспользуемых компонентов в приложениях.

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

👩‍💻 В чем разница между тегами <em> и <i>?

Теги <em> и <i> в HTML используются для выделения текста, но имеют различные семантические значения.

<em>

Тег <em> обозначает подчёркивание с целью акцента или выделения важности текста. Он несёт семантическую нагрузку, что помогает поисковым системам и вспомогательным технологиям понимать структуру и смысл содержимого.

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

<p>Этот абзац содержит <em>важное</em> слово.</p>

<i>

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

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

<p>Слово <i>italic</i> пишется курсивом.</p>

Основные различия:

1. Семантика:
- <em> подчёркивает важность или акцент текста.
- <i> применяется для стилистического выделения без дополнительного смысла.

2. Доступность:
- Скринридеры могут акцентировать слова внутри <em>, передавая их важность.
- <i> не несёт дополнительной информации для вспомогательных технологий.

Когда использовать:

- Применять <em>, когда необходимо подчеркнуть значимость или акцентировать внимание на тексте.
- Использовать <i> для визуального выделения терминов, названий или других элементов без смысловой нагрузки.

Выбор между <em> и <i> зависит от цели выделения текста. Для улучшения семантики и доступности рекомендуется использовать <em> при необходимости акцента, а <i> – для чисто визуального оформления.

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

👇 Другие направления для подготовки тут:

👩‍💻 Python
👩‍💻 Go
👩‍💻 Java
👩‍💻 C/C++
👩‍💻 C#
👩‍💻 PHP
👩‍💻 QA
🖥 SQL
👩‍💻 Git

👩‍💻 Что такое массивы в JavaScript и как их создать?

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

Создание массивов:

1. Литерал массива:

const fruits = ['Apple', 'Banana', 'Cherry']; // Массив строк

2. С помощью конструктора Array:

const numbers = new Array(1, 2, 3, 4); // Массив чисел

3. Заполнение массива фиксированной длины:

const emptyArray = new Array(5); // Массив из 5 неопределенных элементов

Основные методы работы с массивами:

- push добавляет элемент в конец массива.
- pop удаляет последний элемент.
- shift удаляет первый элемент.
- unshift добавляет элемент в начало массива.
- forEach выполняет функцию для каждого элемента.
- map создает новый массив с результатами выполнения функции для каждого элемента.
- filter создает новый массив с элементами, прошедшими проверку.

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

const numbers = [1, 2, 3, 4, 5];

// Добавление элемента
numbers.push(6); // [1, 2, 3, 4, 5, 6]

// Удаление последнего элемента
const last = numbers.pop(); // last = 6, массив: [1, 2, 3, 4, 5]

// Итерация по элементам
numbers.forEach(num => console.log(num)); // Выводит числа 1, 2, 3, 4, 5

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

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

👩‍💻 Что такое flexbox? Объясни основные его свойства

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

Основные свойства контейнера (display: flex):

- flex-direction: определяет направление главной оси. Возможные значения:
- row — по горизонтали (по умолчанию),
- column — по вертикали,
- row-reverse и column-reverse — в обратном порядке.

- justify-content: управляет выравниванием элементов вдоль главной оси. Значения:
- flex-start,
- flex-end,
- center,
- space-between,
- space-around,
- space-evenly.

- align-items: выравнивание по поперечной оси. Значения:
- stretch (по умолчанию),
- flex-start,
- flex-end,
- center,
- baseline.

- flex-wrap: задает перенос элементов на новую строку. Значения:
- nowrap (по умолчанию),
- wrap,
- wrap-reverse.

Свойства элементов:

- flex-grow: определяет способность элемента расширяться.
- flex-shrink: способность элемента сжиматься.
- flex-basis: начальная основа для размера элемента.

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

.container {
  display: flex;
  flex-direction: row; /* направление элементов */
  justify-content: space-between; /* распределение пространства */
  align-items: center; /* выравнивание по центру */
}
.item {
  flex-grow: 1; /* элемент может расти */
}

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

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

👩‍💻 Объясни понятие приведения типов

Приведение типов в TypeScript позволяет явно указывать тип значения, обеспечивая безопасность и предсказуемость кода. Это особенно полезно при работе с данными типа any или при взаимодействии с DOM.

Существует два основных способа приведения типов:

1. Использование угловых скобок:

const someValue: any = "Hello TypeScript";
const strLength: number = (<string>someValue).length; // получаем длину строки

2. Использование ключевого слова as:

const someValue: any = "Hello TypeScript";
const strLength: number = (someValue as string).length; // получаем длину строки

Метод с as предпочтителен при работе с JSX, например, в React. Важно применять приведение типов осознанно, чтобы не нарушить безопасность типов, предоставляемую TypeScript.

Пример работы с DOM элементом:

const inputElement = document.getElementById('username') as HTMLInputElement;
console.log(inputElement.value); // доступ к свойству value

В этом примере элемент с id username приводится к типу HTMLInputElement, что позволяет безопасно обращаться к его свойствам. Приведение типов помогает избежать ошибок компиляции и улучшить автодополнение в редакторах кода, делая разработку более эффективной и надежной.

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

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

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

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

Классовый компонент:

import React from 'react';

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

Greeting.defaultProps = {
  name: 'Guest', // значение по умолчанию для пропса name
};

Функциональный компонент:

import React from 'react';

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

Greeting.defaultProps = {
  name: 'Guest', // значение по умолчанию для пропса name
};

С введением React Hooks и функциональных компонентов, используют значения по умолчанию непосредственно в параметрах функции:

const Greeting = ({ name = 'Guest' }) => {
  return <h1>Hello, {name}!</h1>;
};

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

👩‍💻 Каково назначение атрибута multiple в элементах select и input?

Атрибут multiple используется в элементах <select> и <input>, позволяя пользователям выбирать несколько значений одновременно. Это расширяет функциональность форм, обеспечивая более гибкий ввод данных.

Элемент <select> с атрибутом multiple:

Позволяет выбирать несколько опций из списка.

<select multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

Элемент <input> с атрибутом multiple:

Чаще всего применяется с типом file, позволяя загрузить несколько файлов одновременно.

<input type="file" multiple>

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

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

👩‍💻 Как выровнять элементы по центру с помощью flexbox?

Для выравнивания элементов по центру с помощью Flexbox используются основные свойства justify-content и align-items. Эти свойства позволяют центрировать элементы как по горизонтали, так и по вертикали, обеспечивая гибкость и адаптивность макета.

Основные шаги для центрирования элементов:

1. Установить для родительского контейнера свойство display: flex.
2. Использовать justify-content: center для горизонтального выравнивания.
3. Применить align-items: center для вертикального выравнивания.

Пример реализации:

.container {
  display: flex; /* активация Flexbox */
  justify-content: center; /* центрирование по горизонтали */
  align-items: center; /* центрирование по вертикали */
  height: 100vh; /* высота контейнера для вертикального центрирования */
  border: 1px solid #ccc; /* граница для наглядности */
}

.item {
  padding: 20px;
  background-color: #f0f0f0;
}

<div class="container">
  <div class="item">Центрированный элемент</div>
</div>

Дополнительные настройки:

- Центрирование вдоль нескольких строк: Если элементов много и они располагаются в несколько строк, можно использовать flex-wrap: wrap вместе с justify-content и align-items.

- Центрирование элемента внутри другого гибкого элемента: Свойство align-self: center может использоваться для индивидуального центрирования элемента по поперечной оси.

Использование Flexbox для центрирования элементов значительно упрощает создание адаптивных и аккуратных макетов, обеспечивая высокую совместимость с различными устройствами и экранами.

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

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

Доступ к элементам массива в JavaScript осуществляется несколькими способами. Основной метод — использование индексов, начиная с нуля.

Пример доступа по индексу:

const fruits = ['яблоко', 'банан', 'вишня'];
console.log(fruits[0]); // выводит 'яблоко'
console.log(fruits[2]); // выводит 'вишня'

В данном примере fruits[0] возвращает первый элемент массива, а fruits[2] — третий.

Методы перебора массива:

1. Цикл for:

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]); // выводит каждый элемент массива
}

Используется для доступа к каждому элементу по индексу.

2. Метод forEach:

fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`); // выводит индекс и элемент
});

Позволяет выполнить функцию для каждого элемента массива без явного использования индекса.

3. Деструктуризация:

const [first, second] = fruits;
console.log(first); // 'яблоко'
console.log(second); // 'банан'

Позволяет извлечь элементы массива в отдельные переменные.

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

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

👩‍💻 Что такое never тип и когда он применяется?

Тип never в TypeScript представляет тип для значений, которые никогда не встречаются. Он используется в случаях, когда функция никогда не возвращает результат, например, всегда выбрасывает ошибку. Также never применим для обеспечения полной проверки исчерпывающих условий в конструкциях switch или if.

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

function throwError(message: string): never {
    throw new Error(message); // Эта функция всегда выбрасывает ошибку
}

Использование never для обеспечения полноты проверок:

type Animal = Fish | Bird;

function getAnimal(): Animal {
    // Логика получения животного
}

function assertNever(x: never): never {
    throw new Error("Unexpected object: " + x); // Обработка неучтенного случая
}

switch (getAnimal()) {
    case "Fish":
        // Обработка кейса
        break;
    case "Bird":
        // Обработка кейса
        break;
    default:
        assertNever(x); // Компилятор проверяет, все ли случаи обработаны
}

Использование типа never помогает повысить надежность кода, гарантируя, что все возможные варианты учтены, и предотвращает неожиданные состояния в приложении.

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

👩‍💻 Для чего используются propTypes?

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

Основные преимущества использования PropTypes:

- Валидация типов пропсов: гарантирует, что переданные пропсы соответствуют ожидаемым типам.
- Улучшение отладки: облегчает обнаружение и исправление ошибок при неправильном использовании компонентов.
- Документация компонентов: служит своеобразной документацией, показывая, какие пропсы ожидает компонент.

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

import PropTypes from 'prop-types';

function UserProfile({ username, age }) {
    return (
        <div>
            <h1>{username}</h1>
            <p>Age: {age}</p>
        </div>
    );
}

UserProfile.propTypes = {
    username: PropTypes.string.isRequired, // Имя должно быть строкой и обязательно
    age: PropTypes.number, // Возраст должен быть числом
};

В этом примере компонент UserProfile ожидает пропсы username и age. Если переданный username не будет строкой или отсутствовать, React выведет предупреждение в консоль.

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

👩‍💻 Для чего используется атрибут rel="noopener noreferrer"?

Атрибут rel="noopener noreferrer" используется в HTML для обеспечения безопасности при открытии ссылок в новых вкладках с помощью target="_blank".

Зачем нужен noopener:

Когда ссылка открывается с target="_blank", новая страница получает доступ к объекту window.opener, что позволяет ей изменять оригинальную страницу через JavaScript. Это может привести к фишинговым атакам или другим уязвимостям. Атрибут noopener предотвращает доступ новой страницы к window.opener, защищая исходный сайт.

Зачем нужен noreferrer:

Атрибут noreferrer дополнительно блокирует передачу информации о реферере (URL исходной страницы) на новую страницу. Это улучшает конфиденциальность пользователя и предотвращает утечку данных о источнике перехода.

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

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Посетить Example.com
</a>

В этом примере ссылка открывается в новой вкладке без предоставления доступа к window.opener и без передачи реферера. Это стандартная практика для повышения безопасности веб-приложений и предотвращения потенциальных атак через внешние ссылки.

Использование rel="noopener noreferrer" является важным аспектом безопасной разработки веб-приложений, особенно при работе с внешними ресурсами.

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

👩‍💻 Что такое CSS Grid и какие задачи он решает?

CSS Grid — это модуль компоновки в CSS, позволяющий создавать сложные 2D макеты веб-страниц. Он обеспечивает гибкость и контроль над размещением элементов как по строкам, так и по колонкам, что значительно упрощает процесс разработки интерфейсов.

Основные задачи, которые решает CSS Grid:

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

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

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Создание трех колонок одинаковой ширины */
    grid-gap: 20px; /* Промежуток между элементами */
}

.item {
    background-color: #f0f0f0;
    padding: 10px;
}

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

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

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

👩‍💻 Как использовать generics (обобщенные типы)?

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

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

- Повторное использование кода: позволяет писать универсальные функции и классы, которые работают с любыми типами.
- Типовая безопасность: обеспечивает проверку типов во время компиляции, предотвращая ошибки.
- Улучшенная читаемость и поддержка кода: делает намерения разработчика явными, облегчая понимание кода.

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

// Функция, возвращающая переданный аргумент
function identity<T>(arg: T): T {
    return arg; // Возвращает аргумент того же типа
}

// Использование функции с различными типами
const num = identity<number>(42); // Тип number
const str = identity<string>("Hello"); // Тип string

// Generic интерфейс
interface GenericBox<T> {
    value: T; // Значение типа T
}

const box: GenericBox<string> = { value: "Box content" }; // Тип string

В этом примере функция identity использует обобщенный тип T, позволяя ей возвращать значение того же типа, что и аргумент. Интерфейс GenericBox демонстрирует, как можно создавать обобщенные структуры данных. Generics значительно улучшают гибкость и надежность кода, делая его более адаптируемым к различным сценариям использования.

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

👩‍💻 Что такое форма в React?

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

Контролируемые компоненты:

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

import React, { useState } from 'react';

function MyForm() {
    const [value, setValue] = useState('');

    const handleChange = (e) => {
        setValue(e.target.value); // Обновление состояния при изменении ввода
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(value); // Обработка отправки формы
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" value={value} onChange={handleChange} />
            <button type="submit">Submit</button>
        </form>
    );
}

Неконтролируемые компоненты:

Используют рефы (refs) для доступа к значениям формы без управления состоянием через React.

import React, { useRef } from 'react';

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

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(inputRef.current.value); // Получение значения через ref
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" ref={inputRef} />
            <button type="submit">Submit</button>
        </form>
    );
}

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

👩‍💻 Как добавить элемент в конец массива?

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

Использование метода push:

Метод push добавляет один или несколько элементов в конец существующего массива и возвращает новую длину массива. Этот метод изменяет оригинальный массив.

const fruits = ['Apple', 'Banana'];
fruits.push('Orange'); // Добавление 'Orange' в конец массива
console.log(fruits); // Вывод: ['Apple', 'Banana', 'Orange']

Использование оператора spread:

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

const fruits = ['Apple', 'Banana'];
const newFruits = [...fruits, 'Orange']; // Создание нового массива с добавлением 'Orange'
console.log(newFruits); // Вывод: ['Apple', 'Banana', 'Orange']

Использование метода concat:

Метод concat объединяет два или более массивов, возвращая новый массив без изменения исходных.

const fruits = ['Apple', 'Banana'];
const newFruits = fruits.concat('Orange'); // Объединение массивов с добавлением 'Orange'
console.log(newFruits); // Вывод: ['Apple', 'Banana', 'Orange']

Выбор метода зависит от конкретных требований проекта. Метод push эффективен для изменения существующих массивов, тогда как оператор распространения и concat предпочтительны для создания новых массивов, что соответствует принципам иммутабельности в современных фреймворках.

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