Front-end

Question 1

Які є фази евентів?

Answer 1

1. Фаза захоплення (Capturing phase): подія спускається до елемента.
2. Фаза цільового об’єкта (Target phase): подія досягла цільового елемента.
3. Фаза спливання (Bubbling phase): подія “спливає” від елемента вгору.
   - Що таке DOM?

Question 2

Що таке DOM?

Answer 2

Document Object Model - придставляє html елементи як об’єкти

Browser Object Model - придставляє додаткові об’єкти браузера

Question 3

Порівняйте атрибути підключення скрипту async і defer в HTML-документі.

Answer 3

• async: Виконується асинхроно, як тільки завантажиться.
• defer: Завантажує асинхронно, але виконується після завантаження і парсингу HTML.

Question 4

Яка різниця між властивостями HTML-елементів innerHTML і innerText?

Answer 4

В innerHTML можна вставити теги

Question 5

Як зупинити спливання (bubbling) події? Як зупинити дефолтну обробку події?

Answer 5

stopPropagation, preventDefault

Question 5

Опишіть процес спливання (bubbling) подій у DOM.

Answer 5

Події обробляються від найглибшого елемента до кореня документа.

Question 6

Що таке LocalStorage і SessionStorage? Який максимальний розмір

Answer 6

Зберігає дані в форматі key/value. Local storage зберігає дані після закриття вкладки, session - ні. 5mb

Question 7

Як отримати висоту блоку? Його положення щодо меж документа?

Answer 7

Висота: element.clientHeight або element.offsetHeight
Положення: element.getBoundingClientRect()

Question 8

Що таке webpack?

Answer 8

Інструмент для збірки (bundle) JavaScript, CSS, та зображення.

Question 9

Чим відрізняється dev-збірка від prod?

Answer 9

Prod - має мінімізований та оптимізований код

Question 10

Що таке блокова модель CSS?

Answer 10

Визначає, як padding, margin і border впливають на кінцевий розмір

Question 11

Які способи центрування блокового контенту по горизонталі та вертикалі знаєте?

Answer 11

Абсолютне центрування, margin, flex, grid

Question 12

Як зробити додаток responsive?

Answer 12

Використовувати media queries, flex box, grid, для розмірів можна використовувани відсотки

Question 13

Які є принципи семантичної верстки?

Answer 13

Використовувати теги за призначенням

Question 14

Навіщо потрібні префікси для деяких CSS-властивостей (-webkit-, -moz- тощо)?

Answer 14

Забезпечити сумісність з різними браузерами

Question 15

Як спростити написання кросбраузерних стилів?

Answer 15

Використовувати autoprfixer, скидувати дефалт стилі

Question 16

Що таке CSS-препроцесори? З якими працювали? Що нового вони приносять у стандартний CSS?

Answer 16

Інструмен, який дозволяє використовувати змінні, міксини та інші функції, що полегшують написання, підтримку коду, повторно використування

Question 17

Чи працювали з класовими компонентами? У чому їхня особливість?

Answer 17

Класові компоненти наслідують від базового класу React.Component. В конструкторі призначаєтсья state та передаються пропси. Класи мають доступ до методів жит циклу (componentDidMount, componentDidUpdate, і componentWillUnmount)

Question 18

Що таке хуки? Переліч хучки і для чого вони слугують.

Answer 18

Функції які дозволяють ізолювати частину коду яка перевикористовується в функціональних компонентах.

Хуки:
useState - використовується для менеджменту стейту. Асинхроний. Викликає ререндерінг компонента. Немутабельний, треба використовувати state updater ф-цію.
useEffect і useLayoutEffect - використовуються для виконання стороніх подій, перший виконується після рендерінгу, другий до рендерінгу. перший асінхроний, другий сінхроний тобто блокує рендерінг, що впливає на швидкодійність. useLayoutEffect може використовуватися для розрахунку розміра елемента, чи для анімацій
useContext - використовується для отримування даних з контексту
useRef - з берігає значення або посилання на DOM елемент, який викликається з ref.current. Зберігає інформацію між рендерами, не викликає ререндерінгу.
useReducer - використовується для обробки більш складних стейтів. Аналог Redux
useMemo - використовується для оптимізації обчислень. Мемоізує результат, і повертає при наступних рендерах, якщо агументи не змінились.
useCallback - використовується для мемоізації функцій. Найчастіше використовується коли треба передвати ф-ції в props, або в “useEffect”, чи “useMemo”

Question 19

Чи доводилося писати кастомні хуки та з якою метою?

Answer 19

const useDebounce = (value, delay) => {
const [debouncedValue, setDebouncedValue] = useState(value);

useEffect(() => {
const timeoutId = setTimeout(() => {
setDebouncedValue(value);
}, delay);

return () => {
  clearTimeout(timeoutId);
};   }, [value, delay]);

return debouncedValue;
};

import { useEffect } from ‘react’;

const useClickOutside = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
useEffect(() => {
const handler = (event: MouseEvent | TouchEvent) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
callback();
}
};</HTMLElement>

    document.addEventListener('mousedown', handler);
    document.addEventListener('touchstart', handler);

    return () => {
        // Cleanup the event listener
        document.removeEventListener('mousedown', handler);
        document.removeEventListener('touchstart', handler);
    };
}, [ref, callback]); };

export default useClickOutside;

import { useState } from ‘react’;

const useLocalStorage = (key, initialValue) => {
const [storedValue, setStoredValue] = useState(() => {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
});

const setValue = (value) => {
setStoredValue(value);
window.localStorage.setItem(key, JSON.stringify(value));
};

return [storedValue, setValue];

Question 20

Чи ознайомлені з фрагментами та порталами? Навіщо вони потрібні?

Answer 20

Фрагменти обгортають елементи не створюючи зайвого DOM-контейнера <></>
Портали дозволяють переміщати дочірні елементи за межі їхнього батьківського компонента та монтувати їх в інший DOM-контейнер поза ієрархією компонентів.

Question 21

Які ви знаєте методи життєвого циклу компонента?

Answer 21

1. componentDidMount():Викликається після того, як компонент вперше відображається на екрані. Це часто використовується для виконання запитів до сервера або для підписки на події.
2. componentDidUpdate(prevProps, prevState):Викликається після оновлення компонента, якщо він отримує нові властивості (props) або стан. Використовується для виконання дій після оновлення компонента.
3. componentWillUnmount():Викликається перед тим, як компонент буде видалений з DOM. Використовується для відписки від подій або очищення ресурсів.
4. shouldComponentUpdate(nextProps, nextState):Визначає, чи потрібно виконувати оновлення компонента. Повертає true, якщо оновлення потрібне, і false в іншому випадку. Це може покращити продуктивність, уникаючи непотрібних оновлень.

З хуками, що вводяться у React 16.3, можна використовувати такі методи життєвого циклу:

1. useEffect(() => {}, []):
   
   • Хук, еквівалентний componentDidMount та componentDidUpdate в класових компонентах. Викликається після першого рендерингу та після кожного оновлення.
2. useEffect(() => { return () => {} }, []):
   
   • Хук, еквівалентний componentWillUnmount в класових компонентах. Викликається перед тим, як компонент буде видалений.

Question 22

Чи був досвід роботи з контекстом? Коли його варто використовувати?

Answer 22

Слугує для передачі даних глибоко вниз по дереву компонентів.
Використовується для передачі тем, локалізації, глобального стану

Question 23

У чому бачите переваги бібліотеки React?

Answer 23

• Віртуальний дом
• Компонентна архітектура
• SPA додатки
• Популярність, та доступу до інформації
• Зрозумілий JSX синтаксис
• Може використовувати також для моб додатків

Question 24

Чому бібліотека React швидка? Що таке Virtual DOM і Shadow DOM?

Answer 24

Virual DOM - власний DOM реакту. Замість змінювання реального DOM, реакт. React спочатку вносить зміни в віртуальний DOM. Потім порівнює віртуальний DOM з реальним DOM і визначає оптимальний спосіб оновлення. Це дозволяє зменшити кількість операцій.

Question 25

Навіщо в списках ключі? Чи можна робити ключами індекси елементів масиву? Коли це виправдано?

Answer 25

Ключі допомагають React визначити, які елементи додали, видалили або змінили своє місце у списку. Це дозволяє React оптимізувати оновлення DOM і уникати зайвого перерендерингу елементів.

Бажано застосовувати унікальні ключі для стабільность якщл це можливо. Але індексні ключі можна застосовувати в випадках, коли знаємо що порядок елементів не буде змінюватися

Question 26

В чому основна ідея Redux?

Answer 26

Глобальний store стану до якого можна отримати доступ з будь якого компоненту

Question 27

React - це бібліотека чи фреймворк? Яка різниця між цими двома поняттями.

Answer 27

Реакт - бібліотека

Білбліотека - набір ф-цій та інструментів без правил

Фреймвор - набір правил, стандартів, та інструментів

Question 28

Що таке codemod?

Answer 28

Модифікація коду - автоматичне оновлення програми за допомогою скриптів. Наприклад оновлення коду до нового стандарту

Question 29

Чи доводилося налаштовувати проєкт React з нуля? За допомогою яких інструментів ви це робили?

Answer 29

Використовув create-react-app та vite