Ось готовий урок, створений спеціально для тебе у стилі курсу CS50.

🎓 Урок: Debugging і React DevTools

(Ваші рентгенівські окуляри у світі React)

1. 🔥 Вступ: Коли `console.log` вже не рятує

Уявіть ситуацію. Ви пишете свій "вбивцю Instagram". У вас є кнопка "Лайк". Ви натискаєте на неї... і нічого не відбувається. Або ще гірше: лічильник лайків замість 101 показує NaN або undefined.

Що ви робите зазвичай? Ви йдете в код і пишете:

console.log("Я тут");
console.log("А тепер тут");
console.log("Значення:", value);

І ваша консоль перетворюється на смітник повідомлень, у якому неможливо розібратися.

Запитання до вас: Як ви гадаєте, чи так лагодять двигуни інженери "Формули-1"? Чи вони просто стукають по капоту і слухають, де дзвенить? Ні, вони підключають комп’ютер і бачать стан кожного датчика в реальному часі.

React DevTools — це і є той самий діагностичний комп’ютер для вашого коду. Без нього розробка на React схожа на спробу зібрати LEGO в темній кімнаті: ви навпомацки щось з'єднуєте, але не бачите повної картини.

Сьогодні ми перестанемо "гадати" і почнемо "бачити".

2. 🧠 Теоретична база: Що там "під капотом"?

Давайте розберемося, чому стандартний інспектор браузера (той, що на F12) нам не підходить.

Браузер бачить DOM (Document Object Model) — це <div>, <span>, <h1>. Це кінцевий результат, те, що вже "спеклося". Але React працює з Компонентами, Станом (State) і Пропсами (Props).

Аналогія: Ресторан 🍝

DOM (HTML): Це готова страва на тарілці. Ви бачите пасту, соус і сир.
React DevTools: Це вхід на кухню. Ви бачите рецепт, інгредієнти (State/Props) і кухаря (Component), який це готує.

Що треба знати (Обов'язково):

Components Tab: Показує дерево компонентів React (а не HTML-тегів). Тут ви бачите, які пропси прийшли і який стейт зараз актуальний.
Profiler: Інструмент для вимірювання продуктивності (чому додаток гальмує?).
Зв'язок з консоллю: Ви можете взаємодіяти з компонентом прямо з консолі браузера.

Інтуїтивне розуміння: Уявіть, що React DevTools — це рентген. Ви дивитесь на сайт і бачите скелет вашого додатка: хто кому "батько", хто "дитина", і які дані передаються між ними.

3. 🧪 Приклади: Від простого до магії

Приклад №1: Чому воно не оновлюється?

Уявіть простий код. Є компонент User, який приймає ім'я.

function User({ name }) {
  return <h1>Привіт, {name}!</h1>;
}

Ви запускаєте додаток, а на екрані просто "Привіт, !". Ім'я зникло.

Що ми робимо? 1. Відкриваємо вкладку Components у DevTools. 2. Знаходимо компонент User. 3. Дивимося в праву панель у розділ props.

Очікування: Ми думаємо, що передали name="Андрій". Реальність: DevTools показує name: undefined або name: "".

Висновок: Помилка не в самому компоненті User, а в тому, хто його викликає (батьківський компонент). Миттєва діагностика без жодного console.log.

Приклад №2: Зміна даних на льоту (Live Editing)

Це моя улюблена частина. У вас є інтернет-магазин. Кнопка "Купити" стає активною тільки тоді, коли isValid: true.

В коді це виглядає так:

const [isValid, setIsValid] = useState(false);

Щоб протестувати кнопку, вам треба заповнити 10 полів форми, щоб isValid стало true. Це довго.

Магія DevTools: 1. Знаходимо компонент у DevTools. 2. Бачимо в розділі hooks -> State: false. 3. Ми просто клікаємо на це значення і змінюємо його на true. 4. Бум! Кнопка на сайті стає активною.

Чому це круто? Ви можете тестувати різні стани інтерфейсу (помилки, завантаження, успіх), не змінюючи код і не перезавантажуючи сторінку. Ви "хакаєте" власний додаток.

4. 🛠 Практична частина

Час забруднити руки кодом! (Якщо у вас ще не встановлено розширення React Developer Tools для Chrome/Firefox — зробіть це зараз).

Завдання 1: "Детектив" 🕵️‍♂️

Зайдіть на будь-який сайт, зроблений на React (наприклад, Airbnb, Netflix або документація React). 1. Відкрийте DevTools -> вкладка Components. 2. Знайдіть кореневий компонент. 3. Спробуйте зрозуміти структуру вкладеності.

Завдання 2: "Хірург" 👨‍⚕️

Створіть простий локальний проєкт (Counter). 1. Запустіть його. 2. Відкрийте DevTools. 3. Знайдіть компонент лічильника. 4. Змініть значення count (State) прямо в DevTools з 0 на 999. 5. Спостерігайте, як інтерфейс миттєво оновиться.

Завдання 3: "Пошук винного" 🐞

Створіть компонент, який приймає проп color, але не використовує його.

// Button.js
const Button = ({ color }) => <button style={{ background: 'red' }}>Click me</button>;

Викличте його як <Button color="blue" />. 1. Подивіться в браузер: кнопка червона. Чому? 2. Відкрийте DevTools, виберіть Button. 3. Переконайтеся, що props -> color: "blue". 4. Зрозумійте, що пропс прийшов, але ви його ігноруєте в стилях. Виправте код.

Міні-кейс: "А що, якщо..."

А що, якщо ви хочете дізнатися, який компонент спричинив перемальовку (re-render)? * У налаштуваннях React DevTools (шестерня ⚙️) увімкніть опцію "Highlight updates when components render". * Поклацайте свій додаток. Ви побачите зелені/жовті спалахи навколо компонентів. Це показує, де React працює в даний момент.

5. 💡 Мислення як у розробника

Ось що відрізняє новачка від профі в дебаггінгу:

Новачок: Змінює код навмання, сподіваючись, що запрацює. Пише console.log на кожному рядку.
Профі: Спочатку ізолює проблему.
- "Чи приходять дані в компонент?" (Дивимось Props).
- "Чи змінюється стан?" (Дивимось State).
- "Якщо дані є, але рендер неправильний — проблема в JSX/HTML".
- "Якщо даних немає — проблема в батьківському компоненті або API".

Порада з практики: Якщо ви бачите в DevTools значок 🐛 (bug) біля компонента або в консолі червоний текст — читайте його. React має одні з найкращих повідомлень про помилки. Він часто буквально пише: "Ви забули ключі (keys) у списку" або "Ви намагаєтесь змінити контрольований інпут на неконтрольований". Не ігноруйте ці підказки!

6. 🧩 Підсумок

Сьогодні ми не просто вивчили інструмент, ми змінили підхід до пошуку помилок.

Ми знаємо, що DOM != Component Tree.
Ми вміємо перевіряти Props і State без console.log.
Ми можемо змінювати дані на льоту, щоб тестувати поведінку UI.

Що ви тепер вмієте? Ви вмієте дивитися крізь стіни вашого коду. Ви більше не сліпі кошенята, ви — інженери з рентгенівським апаратом.

🔜 Тизер наступного уроку: Добре, ми навчилися бачити помилки. Але було б круто, якби ми могли виконувати певний код автоматично, коли наші дані змінюються, або коли компонент тільки з'являється на екрані (наприклад, завантажити дані з сервера). У наступному уроці ми познайомимося з найпотужнішим (і найпідступнішим) хуком — useEffect. Готуйтеся, буде цікаво!

Це був CS50... тобто, ваш урок з React! До зустрічі! 👋