Хуки в React были введены для решения нескольких ключевых проблем, связанных с управлением состоянием и логикой в компонентах. До появления хуков использовались классовые компоненты для работы с состоянием и методами жизненного цикла, что приводило к более сложному и менее читаемому коду.
Основные причины введения хуков:
- Упрощение кода: хуки позволяют использовать состояние и другие возможности React в функциональных компонентах, делая код более простым и понятным.
- Повторное использование логики: хуки упрощают повторное использование логики состояния между компонентами без необходимости использовать HOC или render props.
- Управление побочными эффектами:
useEffect заменяет методы жизненного цикла, упрощая управление побочными эффектами и улучшая читаемость кода.- Избежание дублирования: хуки помогают избежать дублирования кода, связанного с состоянием и логикой, улучшая структуру и поддержку компонентов.
Введение хуков значительно улучшило разработку на React, сделав её более гибкой и эффективной.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8❤2
Подключение CSS к HTML-документу — важный шаг для стилизации веб-страницы. Существует несколько способов сделать это:
1. Внешний файл CSS: наиболее распространенный метод, который позволяет хранить стили отдельно от HTML. Используется тег
<link> в разделе <head>:
<link rel="stylesheet" href="styles.css">
2. Встроенные стили: стили добавляются непосредственно в HTML-документ внутри тега
<style> в разделе <head>:
<style>
body {
background-color: #f0f0f0;
}
</style>
3. Inline-стили: стили применяются непосредственно к элементам через атрибут
style. Этот метод менее предпочтителен из-за плохой читаемости и поддержки:
<div style="color: red;">Hello World</div>
Использование внешнего файла CSS рекомендуется для лучшей организации и повторного использования стилей.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🤔1💯1
Прототипное наследование в JavaScript — это механизм, позволяющий объектам наследовать свойства и методы от других объектов. В основе этого механизма лежит концепция прототипов, где каждый объект может иметь ссылку на другой объект, называемый прототипом.
Когда обращение к свойству объекта происходит, JavaScript сначала ищет это свойство в самом объекте. Если оно не найдено, поиск продолжается в прототипе объекта, и так далее, по цепочке прототипов.
Пример создания объекта с прототипным наследованием:
const animal = {
eat() {
console.log('Eating');
}
};
const dog = Object.create(animal);
dog.bark = function() {
console.log('Barking');
};
dog.eat(); // 'Eating'
dog.bark(); // 'Barking'
В этом примере объект
dog наследует метод eat от объекта animal через прототип. Прототипное наследование позволяет создавать иерархии объектов, обеспечивая гибкость и повторное использование кода.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥3💯1
Тег
<link> в HTML используется для установления связей между текущим документом и внешними ресурсами. Он обычно располагается в разделе <head> и не отображается на странице. Основные применения тега <link> включают:- Подключение CSS: наиболее распространенное использование — подключение внешних таблиц стилей для стилизации веб-страницы.
<link rel="stylesheet" href="styles.css">
- Фавикон: указание иконки сайта, отображаемой на вкладке браузера.
<link rel="icon" href="favicon.ico" type="image/x-icon">
- Шрифты и другие ресурсы: подключение шрифтов или других ресурсов, таких как RSS-ленты.
<link rel="alternate" type="application/rss+xml" href="feed.xml">
Тег
<link> играет важную роль в управлении внешними ресурсами, обеспечивая гибкость и модульность веб-страниц.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥2💯1
"use strict" — это директива в JavaScript, которая активирует строгий режим. Строгий режим изменяет семантику JavaScript, делая его более безопасным и оптимизированным. Он помогает выявлять потенциальные ошибки и улучшает производительность кода.
Пример использования:
"use strict";
function example() {
x = 10; // Ошибка: x не определена
}
example();
В строгом режиме запрещено использование необъявленных переменных, что помогает избежать ошибок. Также он предотвращает дублирование имен параметров в функциях и запрещает использование некоторых зарезервированных слов для будущих версий JavaScript.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤1
Ключевое слово
abstract в TypeScript используется для определения абстрактных классов и методов. Абстрактный класс не может быть инстанцирован напрямую и служит в качестве базового класса для других классов. Он может содержать как реализованные методы, так и абстрактные методы, которые должны быть реализованы в производных классах.Пример абстрактного класса:
abstract class Animal {
abstract makeSound(): void; // Абстрактный метод без реализации
move(): void {
console.log("Moving...");
}
}
class Dog extends Animal {
makeSound(): void {
console.log("Bark");
}
}
const dog = new Dog();
dog.makeSound(); // Выводит "Bark"
dog.move(); // Выводит "Moving..."
Абстрактные классы помогают создавать шаблоны для других классов, обеспечивая обязательную реализацию определенных методов в производных классах. Это способствует более строгой архитектуре и лучшей организации кода.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10⚡1
Элемент
<nav> в HTML используется для определения навигационных ссылок на веб-странице. Он служит контейнером для основных навигационных блоков, таких как меню, списки ссылок и другие элементы, которые помогают пользователям перемещаться по сайту.Пример использования:
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Элемент
<nav> улучшает семантику HTML-документа, делая его более понятным для поисковых систем и вспомогательных технологий. Он не должен использоваться для всех ссылок на странице, а только для тех, которые составляют основную навигацию. Это помогает улучшить доступность и SEO, подчеркивая важные навигационные области.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18💯1👨💻1
CSS-переменные, также известные как пользовательские свойства, позволяют хранить значения, которые можно использовать повторно в CSS-коде. Они упрощают управление стилями и делают код более гибким и читаемым.
Определение CSS-переменной:
:root {
--main-color: #3498db; // Определение переменной
--padding: 10px;
}
Использование CSS-переменной:
.button {
background-color: var(--main-color); // Применение переменной
padding: var(--padding);
}
Переменные определяются с помощью префикса
-- и доступны в пределах их области видимости. Обычно они объявляются в :root, чтобы быть доступными глобально. Для использования переменной применяется функция var(). CSS-переменные позволяют легко изменять темы и поддерживать консистентность стилей.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12✍2
Работа с типами TypeScript, определенными в сторонних библиотеках, упрощает интеграцию и использование этих библиотек в проектах. Обычно такие типы предоставляются в виде файлов деклараций
.d.ts, которые содержат описание типов и интерфейсов.1. Установка типов: многие популярные библиотеки имеют отдельные пакеты с типами, которые можно установить через npm. Например, для библиотеки
lodash:
npm install @types/lodash
2. Импорт типов: после установки типов можно использовать их в коде, импортируя необходимые функции или классы:
import _ from 'lodash';
const result: number = _.add(5, 10);
3. Проверка типов: TypeScript автоматически использует файлы деклараций для проверки типов и автодополнения в редакторах, что упрощает разработку и снижает вероятность ошибок.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥2
Метод
forEach в JavaScript используется для перебора элементов массива. Он выполняет указанную функцию один раз для каждого элемента массива, в порядке их появления. Это метод массива, который не возвращает новый массив, а просто выполняет функцию для каждого элемента.Синтаксис:
array.forEach(function(element, index, array) {
// Действия с элементом
});
Первый параметр — это текущий элемент массива, второй — индекс элемента, третий — сам массив. Индекс и массив являются необязательными параметрами.
Пример использования:
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
console.log(number * 2); // Умножает каждый элемент на 2 и выводит результат
});
Этот метод удобен для выполнения операций, которые не требуют изменения исходного массива или его фильтрации.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17❤2🔥1
@keyframes в CSS используется для создания анимаций, задавая последовательность стилей для анимируемого элемента. Анимация определяется с помощью ключевых кадров, которые описывают, как элемент должен изменяться в течение времени.Синтаксис:
@keyframes animationName {
from {
/* Начальное состояние */
}
to {
/* Конечное состояние */
}
}
Или с использованием процентов:
@keyframes animationName {
0% {
/* Начальное состояние */
}
50% {
/* Промежуточное состояние */
}
100% {
/* Конечное состояние */
}
}
Для применения анимации к элементу используются свойства
animation-name, animation-duration и другие.Пример:
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.element {
animation-name: slideIn; // Название анимации
animation-duration: 2s; // Длительность анимации
animation-timing-function: ease-in-out; // Функция времени
}
Этот пример создает анимацию, которая перемещает элемент снаружи экрана внутрь за 2 секунды.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17❤2🔥2
Для встраивания видео в HTML используется элемент
<video>. Он позволяет воспроизводить видеофайлы непосредственно на веб-странице. Элемент <video> поддерживает различные атрибуты, такие как controls, autoplay, loop и muted.Пример использования:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Атрибут
controls добавляет элементы управления воспроизведением, такие как кнопки паузы и перемотки. Атрибуты width и height задают размеры видео. Внутри элемента <video> можно указать несколько источников <source> для обеспечения поддержки разных форматов видеофайлов. Текст внутри тега <video> отображается, если браузер не поддерживает видео.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20❤3
useEffect — это хук в React, который позволяет выполнять побочные эффекты в функциональных компонентах. Он заменяет методы жизненного цикла классовых компонентов, такие как componentDidMount, componentDidUpdate и componentWillUnmount.Синтаксис:
useEffect(() => {
// Код эффекта
return () => {
// Очистка эффекта (опционально)
};
}, [dependencies]);
Первый аргумент — это функция эффекта, которая может возвращать функцию очистки. Второй аргумент — массив зависимостей, который определяет, когда эффект должен быть повторно выполнен. Если массив пуст, эффект выполнится только при монтировании и размонтировании компонента.
Пример использования:
import React, { useState, useEffect } from 'react';
function ExampleComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
document.noscript = `Count: ${count}`; // Обновляет заголовок документа
}, [count]); // Эффект выполняется при изменении count
return (
<button onClick={() => setCount(count + 1)}>
Increment
</button>
);
}
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥3
Для создания полупрозрачного фона у элемента в CSS можно использовать свойство
background-color с функцией rgba(), которая позволяет задать цвет в формате RGB с дополнительным параметром прозрачности (альфа-канал).Пример использования
rgba():
.element {
background-color: rgba(0, 0, 0, 0.5);
}
В этом примере
rgba(0, 0, 0, 0.5) задает черный цвет с 50% прозрачностью. Значение альфа-канала варьируется от 0 (полностью прозрачный) до 1 (полностью непрозрачный).Альтернативный способ — использование свойства
opacity, но оно влияет на прозрачность всего содержимого элемента, включая текст и другие вложенные элементы:
.element {
opacity: 0.5;
}
Использование
rgba() предпочтительнее, если требуется изменить только фон, сохраняя непрозрачность содержимого.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16
Метод массива
reduce используется для последовательной обработки каждого элемента массива с целью вычисления единого значения. Он принимает два аргумента: функцию-аккумулятор и начальное значение аккумулятора.Функция-аккумулятор принимает четыре параметра: аккумулятор, текущий элемент, индекс текущего элемента и сам массив. На каждой итерации функция-аккумулятор обновляет значение аккумулятора, которое затем передается на следующую итерацию. В конце выполнения
reduce возвращает итоговое значение аккумулятора.Пример использования
reduce для суммирования элементов массива:
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // Вывод: 10
В этом примере начальное значение аккумулятора равно 0. На каждой итерации текущий элемент добавляется к аккумулятору, в результате чего получается сумма всех элементов массива.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥2❤1
Пересечения типов (intersection types) в TypeScript позволяют комбинировать несколько типов в один. Это полезно, когда требуется объект, который должен удовлетворять нескольким типам одновременно. Пересечения типов создаются с помощью оператора
&.Когда используется пересечение типов, объект должен содержать все свойства и методы всех типов, участвующих в пересечении.
Пример использования пересечения типов:
type Person = {
name: string;
age: number;
};
type Employee = {
employeeId: number;
};
type EmployeePerson = Person & Employee;
const employee: EmployeePerson = {
name: "John",
age: 30,
employeeId: 1234
};
В этом примере
EmployeePerson объединяет свойства Person и Employee, и объект employee должен содержать все эти свойства. Пересечения типов позволяют создавать более гибкие структуры данных.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤2✍1
Атрибут
hidden в HTML используется для скрытия элементов на веб-странице. Когда элемент имеет этот атрибут, он не отображается пользователю и не занимает места в документе. Это полезно для временного скрытия контента, который может быть показан позже с помощью JavaScript.Пример использования атрибута
hidden:
<div hidden>
Этот текст скрыт и не будет виден на странице.
</div>
Чтобы показать скрытый элемент, можно удалить атрибут
hidden с помощью JavaScript:
const element = document.querySelector('div');
element.hidden = false; // Показывает элемент
Атрибут
hidden отличается от CSS-свойства display: none; тем, что он является семантическим и может быть использован для указания на то, что элемент временно скрыт.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥2💯2❤1
Градиенты позволяют создавать плавные переходы между двумя или более цветами. Они могут быть линейными или радиальными, что дает возможность создавать разнообразные визуальные эффекты без использования изображений.
Линейный градиент создается с помощью функции
linear-gradient(). Можно задать направление и указать цвета:
background: linear-gradient(to right, red, blue);
В этом примере градиент переходит от красного к синему слева направо.
Радиальный градиент создается с помощью функции
radial-gradient(), где цвета расходятся от центра:
background: radial-gradient(circle, yellow, green);
Здесь градиент начинается с желтого в центре и переходит в зеленый.
Градиенты позволяют добавлять глубину и стиль к элементам, улучшая визуальное восприятие страницы.
Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13✍1🔥1
Порталы в React позволяют рендерить дочерние элементы в DOM-узел, который находится вне иерархии родительского компонента. Это полезно для создания модальных окон, всплывающих подсказок и других элементов, которые должны быть отделены от основного DOM-дерева.
Для создания портала используется метод
ReactDOM.createPortal(), который принимает два аргумента: элемент React и целевой DOM-узел.Пример использования портала:
import ReactDOM from 'react-dom';
function Modal({ children }) {
return ReactDOM.createPortal(
<div className="modal">
{children}
</div>,
document.getElementById('modal-root')
);
}
Здесь
Modal рендерит свои дочерние элементы в элемент с ID modal-root, который находится вне основного контейнера приложения. Порталы позволяют управлять элементами, сохраняя их стили и поведение в контексте React.Ставь 👍, если было полезно!
Еще больше ответов для подготовки к собеседованиям на сайте 👈
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11❤4⚡1
Для встраивания аудио на HTML-страницу используется тег
Пример использования:
Атрибут
Ставь👍 , если было полезно!
Больше ответов на сайте👈
✈️ Frontend собеседования
<audio>. Этот тег позволяет воспроизводить аудиофайлы непосредственно в браузере. Пример использования:
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
Ваш браузер не поддерживает элемент <code>audio</code>.
</audio>
Атрибут
controls добавляет элементы управления воспроизведением, такие как кнопки воспроизведения и паузы. Внутри тега <audio> можно использовать несколько <source> для указания разных форматов аудио, обеспечивая кроссбраузерную совместимость.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12❤3🔥1💯1
calc() в CSS используется для выполнения математических вычислений непосредственно в стилях. Оно позволяет комбинировать различные единицы измерения, такие как проценты, пиксели, em и другие, для более гибкой настройки размеров элементов.Пример использования:
.element {
width: calc(100% - 50px);
}В этом примере ширина элемента вычисляется как 100% от родительского элемента минус 50 пикселей.
calc() поддерживает операции сложения +, вычитания -, умножения * и деления /. Между операторами и операндами обязательно должны быть пробелы.Ставь
Больше ответов на сайте
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16❤3🔥2