Опановуємо React

Зміст курсу

Опановуємо React

Опановуємо 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 в Реальному Світі Підсумок Розділу

Челендж: Стилізація за Допомогою CSS Файлу

Завдання

Перейдемо до створення компонента Alert, який буде відображати всі елементи, передані як дочірні, і застосовувати до них певні стилі. Завдання полягає в наступному:

Створіть компонент Alert, який містить елемент div.
Елемент div повинен мати ім'я класу alert.
Елемент div повинен мати проп children в якості вмісту.
Елемент div повинен мати наступний CSS.

To create a div element in the component, use <div>...</div>.
To pass props.children as the text content enclose it within {...} and set props.children. Result: <div>{props.children}</div>.
To add a class name to the div element, use the className attribute and set it to alert. Result: className="alert".
To import the file with styles in the index.js file, use import statement and provide the correct path to the file. Result: import './index.css'.
To apply styles to the div element, use the class name selector .alert and insert the styles from the task.

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

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

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

some-alt