Чтобы указать кодировку символов в HTML-документе, используется мета-тег
<meta> с атрибутом charset внутри элемента <head>. Это необходимо для правильного отображения символов на странице.Пример использования UTF-8 кодировки:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<noscript>Пример документа</noscript>
</head>
<body>
<p>Привет, мир!</p>
</body>
</html>
В этом примере атрибут
charset="UTF-8" сообщает браузеру использовать кодировку UTF-8 для интерпретации символов.Особенности:
- Расположение мета-тега: Метатег с кодировкой должен быть указан в начале секции
<head>, желательно перед любыми другими мета-тегами и ссылками на стили или скрипты.- Важность указания кодировки: Если кодировка не указана или указана неверно, браузер может неправильно отображать символы, особенно если документ содержит специальные или национальные символы.
Альтернативный вариант для HTML5:
<meta charset="UTF-8">
Для более старых версий HTML:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Однако в современных документах рекомендуется использовать первый вариант с атрибутом
charset.Указание правильной кодировки обеспечивает корректное отображение текстового контента и предотвращает проблемы с нечитаемыми символами на странице.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Ключевое слово
readonly в TypeScript используется для определения свойств объектов, которые нельзя изменить после их первоначальной установки. Это повышает безопасность кода, предотвращая непреднамеренные изменения данных.Применение с интерфейсами:
interface User {
readonly id: number;
name: string;
}
const user: User = { id: 1, name: "Alice" };
// Попытка изменить readonly-свойство вызовет ошибку
user.id = 2; // Ошибка: нельзя присвоить значение свойству "id", так как оно только для чтения
Использование с классами:
class Point {
readonly x: number;
readonly y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}
const point = new Point(10, 20);
// Попытка переопределить свойства
point.x = 15; // Ошибка: свойство "x" только для чтения
Для массивов:
const arr: ReadonlyArray<number> = [1, 2, 3];
// Методы, изменяющие массив, недоступны
arr.push(4); // Ошибка: метод "push" не существует на типе readonly массив
readonly обеспечивает неизменность данных после их инициализации, что помогает предотвращать ошибки и делает код более предсказуемым.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Цикл
while в JavaScript выполняет блок кода, пока условие остаётся истинным. Сначала проверяется условие, и если оно истинно, выполняется тело цикла. Это повторяется до тех пор, пока условие не станет ложным.Синтаксис цикла while:
while (condition) {
// Код, который выполняется, пока условие истинно
}
Пример использования цикла while:
let i = 0;
while (i < 5) {
// Вывод значения i
console.log(i);
// Увеличение i на 1
i++;
}
В этом примере цикл будет выполняться, пока значение переменной
i меньше 5. На каждой итерации выводится текущее значение i, после чего i увеличивается на 1.Важно следить за тем, чтобы условие цикла в конечном итоге стало ложным, иначе цикл станет бесконечным.
Пример бесконечного цикла:
while (true) {
// Этот код будет выполняться бесконечно
}
Бесконечные циклы могут привести к зависанию программы, поэтому необходимо всегда обеспечивать условия для выхода из цикла.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Float-элементы в CSS используются для создания обтекания и управления расположением элементов по горизонтали. Свойство
float определяет, что элемент будет выровнен по левому (left) или правому (right) краю, а последующие элементы будут обтекать его.Пример использования:
/* Элемент, который будет плавающим */
.float-left {
float: left;
width: 200px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
HTML-разметка:
<div class="float-left"></div>
<p>Текст обтекает плавающий элемент. Он располагается рядом и вокруг блока с классом "float-left".</p>
Особенности работы float:
- Плавающие элементы вынимаются из обычного потока документа.
- Элементы после плавающего обтекают его, занимая оставшееся пространство.
- Родительский контейнер может "схлопнуться", если внутри него только плавающие элементы. Для решения этой проблемы используют "очистку" (clear) или псевдоэлемент "clearfix".
Пример clearfix:
/* Очистка обтекания */
.container::after {
content: "";
display: table;
clear: both;
}
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Компонент высшего порядка (Higher-Order Component, HOC) в React — это функция, которая принимает компонент и возвращает новый компонент. HOC позволяет переиспользовать логику между компонентами, не изменяя их исходный код. Это аналог паттерна проектирования "Декоратор" в объектно-ориентированном программировании.
Основная идея:
HOC оборачивает исходный компонент, добавляя ему новые свойства или поведение. Это позволяет абстрагировать общую логику и использовать её в разных компонентах.
Пример создания HOC:
// Функция высшего порядка, принимающая компонент
function withLogging(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log('Компонент был смонтирован');
}
render() {
// Передача пропсов во вложенный компонент
return <WrappedComponent {...this.props} />;
}
};
}
В этом примере функция
withLogging принимает компонент WrappedComponent и возвращает новый компонент, который логирует сообщение при монтировании и рендерит исходный компонент с переданными пропсами.Использование HOC:
// Исходный компонент
class MyComponent extends React.Component {
render() {
return <div>Привет, {this.props.name}!</div>;
}
}
// Оборачиваем компонент в HOC
const MyComponentWithLogging = withLogging(MyComponent);
// Используем новый компонент
ReactDOM.render(
<MyComponentWithLogging name="Алиса" />,
document.getElementById('root')
);
Преимущества использования HOC:
- Переиспользование логики: Общая функциональность может быть вынесена в HOC и применена к разным компонентам.
- Разделение ответственности: Компоненты остаются чистыми и отвечают только за отображение, в то время как HOC добавляет дополнительное поведение.
- Абстрагирование кода: Сокращает дублирование кода и упрощает поддержку.
Важно учитывать:
- HOC не изменяет и не наследует поведение исходного компонента; вместо этого он оборачивает его.
- Обёрнутый компонент не должен изменять контракт исходного компонента.
- Следует осторожно обращаться с статическими методами и рефами, так как они могут быть недоступны в обёрнутом компоненте без дополнительной обработки.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Для создания checkbox и radio button используются элементы
<input> с соответствующими типами.Пример создания checkbox:
<!-- Создание checkbox с меткой -->
<label>
<input type="checkbox" name="agree" />
Согласен с условиями
</label>
В этом примере используется элемент
<label> для увеличения области клика и связывания текста с полем ввода.Пример создания radio button:
<!-- Создание группы radio buttons -->
<label>
<input type="radio" name="gender" value="male" />
Мужчина
</label>
<label>
<input type="radio" name="gender" value="female" />
Женщина
</label>
Важно, чтобы все radio buttons в группе имели одинаковое значение атрибута
name, чтобы они функционировали как взаимно исключающие варианты.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
static
По умолчанию все элементы имеют позиционирование
static. Элементы располагаются в обычном потоке документа без возможности изменения их положения с помощью свойств top, left, bottom, right.relative
Относительное позиционирование позволяет сдвигать элемент относительно его нормального положения.
/* Смещение элемента на 20px вправо и вниз */
.element {
position: relative;
top: 20px;
left: 20px;
}
absolute
Абсолютное позиционирование выводит элемент из обычного потока и позиционирует его относительно ближайшего предка с позиционированием, отличным от
static.
/* Родительский элемент */
.container {
position: relative; /* Задает точку отсчета для дочерних элементов */
}
/* Абсолютно позиционированный элемент */
.element {
position: absolute;
top: 0;
left: 0;
}
fixed
Фиксированное позиционирование привязывает элемент к определенной позиции в окне браузера, независимо от прокрутки страницы.
/* Фиксированный элемент в нижнем правом углу */
.element {
position: fixed;
bottom: 10px;
right: 10px;
}
Итог
-
static: стандартное позиционирование без изменений.-
relative: смещение относительно собственного места в документе.-
absolute: позиционирование относительно предка или окна, исключает из потока.-
fixed: фиксируется относительно окна браузера, не двигается при прокрутке.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤1🤩1
В TypeScript массивы можно типизировать для обеспечения строгой типизации и предотвращения ошибок. Существует несколько способов типизации массивов.
Использование нотации Type[]
// Массив строк
const names: string[] = ["Alice", "Bob", "Charlie"];
// Массив чисел
const numbers: number[] = [1, 2, 3, 4];
Использование обобщенного типа Array<Type>
// Массив булевых значений
const flags: Array<boolean> = [true, false, true];
// Массив объектов
const users: Array<{ id: number; name: string }> = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
];
Кортежи для фиксированных типов и длины
// Кортеж из строки и числа
const person: [string, number] = ["Alice", 30];
Многомерные массивы
// Двумерный массив чисел
const matrix: number[][] = [
[1, 2],
[3, 4],
];
Массивы с несколькими типами
// Массив строк и чисел
const mixed: (string | number)[] = ["Alice", 42];
Использование типов или интерфейсов
// Определение интерфейса
interface User {
id: number;
name: string;
}
// Массив объектов типа User
const userList: User[] = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
];
Обобщенные функции с массивами
// Обобщенная функция для вывода элементов массива
function logItems<T>(items: T[]): void {
items.forEach((item) => console.log(item));
}
Таким образом, типизация массивов в TypeScript обеспечивает гибкость и безопасность кода, позволяя точно определять структуры данных.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10
Цикл
do...while в JavaScript выполняет блок кода хотя бы один раз, а затем повторяет выполнение, пока указанное условие истинно. В отличие от цикла while, который сначала проверяет условие, do...while гарантирует выполнение тела цикла минимум один раз независимо от условия.Пример использования:
let count = 0;
do {
console.log("Текущее значение:", count); // Выводит значение счетчика
count++;
} while (count < 5);
В этом примере цикл
do...while выполняет тело цикла, увеличивая значение count и выводя его, пока count меньше 5. Даже если начальное значение count было бы больше или равно 5, блок кода внутри do всё равно выполнится один раз.Когда использовать do...while:
- Когда необходимо гарантировать хотя бы одно выполнение блока кода перед проверкой условия.
- В случаях, когда условие для повторения цикла зависит от выполнения действий внутри цикла.
Циклы
do...while полезны в ситуациях, где необходимо выполнить операцию минимум один раз, например, при запросе ввода от пользователя до тех пор, пока не будет введено корректное значение.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
Frontend собеседования pinned «Подписывайся на наши новые каналы! 👩💻 Git 🖥 SQL 👩💻 QA»
Теги
<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> подходит для чисто визуального выделения.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥1
Свойство
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, позволяющей создавать гибкие и переиспользуемые компоненты.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
Свойство
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 помогает управлять расположением элементов на странице и создавать интерфейсы без визуальных конфликтов.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤1🔥1
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-типы:
- Когда функция или компонент может принимать различные типы данных.
- При работе с внешними данными, где тип может быть неоднозначным.
- Для создания универсальных и переиспользуемых компонентов в приложениях.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Теги
<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> – для чисто визуального оформления.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
Массивы в 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 и широко используются для хранения и управления списками данных, выполнения итераций и реализации различных алгоритмов.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤1
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 значительно облегчает создание сложных интерфейсов, обеспечивая гибкость и адаптивность дизайна.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12
Приведение типов в 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, что позволяет безопасно обращаться к его свойствам. Приведение типов помогает избежать ошибок компиляции и улучшить автодополнение в редакторах кода, делая разработку более эффективной и надежной.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥1
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>;
};
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5