Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Челендж: Умовний Рендеринг Контенту | Introduction to React Fundamentals
Опановуємо React

Челендж: Умовний Рендеринг КонтентуЧелендж: Умовний Рендеринг Контенту

Завдання: Створення сповіщення в чаті

Розробимо механізм, який показуватиме сповіщення лише тоді, коли користувач має непрочитані повідомлення. Ми перевіримо, чи є у користувача непрочитані повідомлення. Якщо ця умова вірна, ми покажемо повідомлення із зазначенням кількості повідомлень. Однак, ми не покажемо нічого, якщо користувач не має жодного повідомлення.

Завдання полягає в наступному:

  • Створити два компоненти: App як батьківський компонент і Notification як дочірній компонент.
  • Батьківський компонент, App, повинен передати дочірньому компоненту проп з назвою messages. Проп messages - це масив, що містить повідомлення. У дочірньому компоненті потрібно перевірити довжину масиву messages.
  • Якщо у масиві є повідомлення, вивести рядок: You have <amount> of unread messages.. При цьому <amount> слід замінити на фактичну кількість непрочитаних повідомлень.
Hint
1. Щоб визначити, чи є в масиві повідомлення, ми можемо перевірити його довжину за допомогою властивості length. Синтаксис - array.length.
2. У React ми використовуємо оператор && для реалізації логіки оператора if.
3. Щоб правильно побудувати рядок, замініть amount на фактичну довжину масиву.
4. Використовуйте фігурні дужки {array.length}, щоб додати довжину масиву в рядок.
  1. To determine if there are any messages in the array, we can check its length using the length property. The syntax is - array.length.
  2. In React, we use the operator && to implement the logic of an if statement.
  3. To construct the string correctly, replace the placeholder amount with the actual length of the array.
  4. Use curly braces {array.length} to set the array length in the string.

Все було зрозуміло?

Секція 1. Розділ 12
course content

Зміст курсу

Опановуємо React

1. Вступ до Основ React

Що таке React?SPA vs. MPA у Веб РозробціЯк React Працює з Віртуальним DOMЗнайомство з JSX в ReactСтворення Складних JSX Елементів Рендеринг Елементів у ReactЧелендж: Рендеринг ЕлементаКомпонент ReactПропси в ReactЧелендж: Функціональні КомпонентиУмовний РендерингЧелендж: Умовний Рендеринг КонтентуChallenge: Conditional Rendering - Bank AlertРендеринг Набору ДанихЧелендж: Рендеринг Набору ДанихВступ до Основ React Підсумок Розділу

2. Стилізація в React Додатках

Вступ до Стилізації в ReactВбудовані СтиліВбудовані Стилі на ПрактиціЧелендж: Вбудовані СтиліСтилізація за Допомогою CSS ФайлуСтилізація за Допомогою CSS файлу на ПрактиціЧелендж: Стилізація за Допомогою CSS ФайлуСтилізація за Допомогою CSS МодулівОрганізація Структури Файлів та ПапокЧелендж: CSS МодуліСтилізація в React Підсумок Розділу

3. React Хуки та Контекст

Вступ: React Хуки та КонтекстuseState ХукЧелендж: Перемикання ВидимостіuseRef ХукЧелендж: Створення Компонента ФормиuseEffect ХукЧелендж: Отримання та Відображення ДанихuseMemo ХукЧелендж: Фільтрація Списку АвтомобілівКонтекстКонтекст на ПрактиціЧелендж: World of Astronomy ДодатокReact Хуки та Контекст Підсумок Розділу

4. React в Реальному Світі

Налаштування СередовищаРедактор КодуНалаштування Папки ПроектуТерміналПочаток ПроектуReact в Реальному Світі Підсумок Розділу

Опановуємо React

Челендж: Умовний Рендеринг КонтентуЧелендж: Умовний Рендеринг Контенту

Завдання: Створення сповіщення в чаті

Розробимо механізм, який показуватиме сповіщення лише тоді, коли користувач має непрочитані повідомлення. Ми перевіримо, чи є у користувача непрочитані повідомлення. Якщо ця умова вірна, ми покажемо повідомлення із зазначенням кількості повідомлень. Однак, ми не покажемо нічого, якщо користувач не має жодного повідомлення.

Завдання полягає в наступному:

  • Створити два компоненти: App як батьківський компонент і Notification як дочірній компонент.
  • Батьківський компонент, App, повинен передати дочірньому компоненту проп з назвою messages. Проп messages - це масив, що містить повідомлення. У дочірньому компоненті потрібно перевірити довжину масиву messages.
  • Якщо у масиві є повідомлення, вивести рядок: You have <amount> of unread messages.. При цьому <amount> слід замінити на фактичну кількість непрочитаних повідомлень.
Hint
1. Щоб визначити, чи є в масиві повідомлення, ми можемо перевірити його довжину за допомогою властивості length. Синтаксис - array.length.
2. У React ми використовуємо оператор && для реалізації логіки оператора if.
3. Щоб правильно побудувати рядок, замініть amount на фактичну довжину масиву.
4. Використовуйте фігурні дужки {array.length}, щоб додати довжину масиву в рядок.
  1. To determine if there are any messages in the array, we can check its length using the length property. The syntax is - array.length.
  2. In React, we use the operator && to implement the logic of an if statement.
  3. To construct the string correctly, replace the placeholder amount with the actual length of the array.
  4. Use curly braces {array.length} to set the array length in the string.

Все було зрозуміло?

Секція 1. Розділ 12
some-alt