Зміст курсу

Опановуємо React

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

Що таке React?SPA vs. MPA у Веб Розробці Як React Працює з Віртуальним DOM Знайомство з JSX в React Створення Складних JSX Елементів Рендеринг Елементів у React Челендж: Рендеринг Елемента Компонент React Пропси в React Челендж: Функціональні Компоненти Умовний Рендеринг Челендж: Умовний Рендеринг Контенту Challenge: Implement 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 з Vite React в Реальному Світі Підсумок Розділу

Вбудовані Стилі на Практиці

Створимо універсальний компонент Notification, який відображає текст і динамічно змінює властивість background-color на основі пропсу behavior. Розглянемо реалізацію покроково.

Крок 1

Ми почнемо зі створення батьківського компонента, App, разом з дочірнім компонентом, Notification, використовуючи базову структуру React.

jsx

Крок 2

Щоб забезпечити стандартний стиль для компонента Notification, ми створюємо об'єкт з назвою notificationStyles і призначаємо йому наступні властивості: padding зі значенням "20px"; fontSize зі значенням "24px"; color зі значенням "aquamarine";

js

Присвоїмо об'єкту notificationStyles значення атрибуту style компонента Notification, який буде застосовано до повернутого елемента p.

jsx

Крок 3

У компоненті App ми можемо використовувати компонент Notification, передавши йому проп behavior і проп text. Проп behavior визначає зовнішній вигляд сповіщення, в той час як проп text визначає текст, який буде відображено в сповіщенні.

jsx

Крок 4

Ми можемо реалізувати логіку розфарбовування фону кожного повідомлення-сповіщення на основі пропсу behavior наступним чином:

Якщо значення behavior є "positive", колір фону має бути встановлений на green.
Якщо значення behavior є "negative", колір фону слід встановити red.
Якщо значення behavior є "neutral", колір фону має бути blue.

Ми можемо створити функцію для обробки логіки за допомогою оператора switch в JavaScript. Ось приклад того, як це можна реалізувати:

js

Ця функція приймає проп behavior як аргумент і повертає відповідний колір фону на основі значення за допомогою оператора switch. Проп behavior поверне transparent колір фону, якщо він не відповідає вказаним випадкам.

Давайте включимо цю функцію в об'єкт стилю компонента:

jsx

Ми використовуємо домовленості JavaScript, щоб забезпечити належну структуру об'єкта стилю. Спочатку ми поширюємо існуючий об'єкт notificationStyles. Потім ми вводимо додаткову властивість backgroundColor, значення якої отримується з рядка, що повертається функцією setBackgroundColor.

Повний код програми:

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

Дякуємо за ваш відгук!

Секція 2. Розділ 3

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат