nmk

Практична робота №3 (2 години)

Тема: Логіка умовного відображення

Мета: Навчитися створювати динамічні інтерфейси, які змінюють свій вигляд залежно від стану додатка; опанувати використання логічних операторів (&&), тернарних операторів та складніших конструкцій для реалізації табів (вкладок) та перемикачів.

Необхідні інструменти: Проєкт, розроблений на попередніх заняттях (Vite + React), редактор коду (VS Code).

План заняття

Підготовка (Git branch)
Просте умовне відображення (Оператор &&)
Тернарний оператор (Toggle)
Реалізація інтерфейсу з табами
Фіксація змін (Git)

Хід виконання роботи

Ми продовжуємо розвивати наш додаток. На цьому етапі ми навчимося не просто виводити списки, а керувати їх видимістю та перемикатися між різними представленнями даних.

1. Підготовка (Git branch)

Перед початком роботи створіть нову гілку, щоб зберегти історію розробки:

git checkout -b feature/conditional-rendering

2. Просте умовне відображення (Оператор `&&`)

Найпростіший спосіб показати або приховати елемент у React — логічний оператор «І» (&&). Якщо ліва частина істинна, React відрендерить праву частину.

Завдання: Додати кнопку, яка показує або ховає коротку довідку про програму.

У компоненті App.jsx створіть стан showHelp за допомогою useState (за замовчуванням false).
```
const [showHelp, setShowHelp] = useState(false);
```

Додайте кнопку, яка змінює цей стан на протилежний.

<button onClick={() => setShowHelp(!showHelp)}>
  {showHelp ? "Приховати інструкцію" : "Показати інструкцію"}
</button>

Використовуйте конструкцію &&:

{
  showHelp && <p>Довідка: Дозволяє керувати списками студентів.</p>;
}

3. Тернарний оператор (Toggle)

Тернарний оператор ідеально підходить, коли у вас є два взаємовиключні стани (наприклад, “Увійти” / “Вийти” або “Список” / “Сітка”).

Завдання: Реалізувати перемикач режиму перегляду списку (повний список / тільки відфільтровані дані).

Створіть стан filterActive (boolean).
Створіть кнопку, текст якої змінюється залежно від стану: {filterActive ? "Показати всіх" : "Показати тільки успішних"}.
У блоці рендерингу списку використайте тернарний оператор, щоб вирішити, який масив мапити: filterActive ? filteredStudents : allStudents.
```
// Зміна кольору тексту залежно від балу
<span style=>
  {student.score >= 60 ? "Зараховано" : "Незараховано"}
</span>
```

4. Реалізація інтерфейсу з табами

Для складніших випадків, коли варіантів відображення більше ніж два, використовується стан-ідентифікатор (рядок або число).

Завдання: Створити систему табів: “Всі студенти”, “Статистика”, “Про автора”.

Створіть стан activeTab зі значенням за замовчуванням 'list'.
```
const [activeTab, setActiveTab] = useState("list"); // default
```
Створіть навігаційну панель (набір кнопок). При кліку на кнопку activeTab змінюється на 'list', 'stats' або 'about'.

Реалізуйте логіку відображення контенту:

<div className="content">
  {activeTab === "list" && <StudentList />}
  {activeTab === "stats" && <StatisticsData />}
  {activeTab === "about" && <AboutAuthor />}
</div>

5. Фіксація змін (Git)

Додайте зміни:
```
git add .
```

Зробіть коміт:

git commit -m "feat: add conditional rendering and tabs"

Поверніться в головну гілку:
```
git checkout main
```

Злийте зміни:

git merge feature/conditional-rendering

Завдання для самостійного виконання

Порожній стан (Empty State): Додайте перевірку: якщо після фільтрації масив студентів порожній, замість списку виведіть повідомлення: “За вашим запитом нікого не знайдено”.
Динамічні класи: Використовуючи тернарний оператор, додайте активній кнопці таба спеціальний CSS-клас (наприклад, active-tab), щоб візуально виділити її серед інших.
Захист від помилок: Реалізуйте перевірку: якщо в об’єкті студента відсутнє поле score, замість цифри виведіть текст “Оцінка відсутня” за допомогою оператора нульового злиття (??) або тернарного оператора.

Контрольні запитання

Чому використання if/else безпосередньо всередині JSX-розмітки призведе до помилки?
Яка небезпека криється у використанні числа 0 у лівій частині оператора && в JSX? (Підказка: що React виведе на екран?).
Як реалізувати умовний рендеринг, якщо логіка вибору компонента дуже складна (наприклад, 5+ варіантів)?
В яких випадках використання тернарного оператора є кращим за використання оператора &&?
Як React розуміє, що потрібно перерендерити частину інтерфейсу при зміні вкладки?

Результат заняття

Створено гнучкий інтерфейс, де користувач може перемикатися між різними екранами додатка без перезавантаження сторінки, використовуючи лише внутрішній стан React-компонентів.

nmk