Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Челендж: Стилізація за Допомогою CSS Файлу | Styling in React Apps
Опановуємо React

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

Завдання

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

  1. Створіть компонент Alert, який містить елемент div.
  2. Елемент div повинен мати ім'я класу alert.
  3. Елемент div повинен мати проп children в якості вмісту.
  4. Елемент div повинен мати наступний CSS.
Hint
1. Щоб створити елемент div у компоненті, використовуйте <div>...</div>.
2. Щоб передати props.childrenяк текстовий вміст помістіть його у {...} і встановіть props.children. Результат: <div>{props.children}</div>.
3. Щоб додати назву класу до елемента div, використовуйте атрибут className і встановіть для нього значення alert. Результат: className="alert".
4. Щоб імпортувати файл зі стилями у файл index.js, використовуйте оператор import і вкажіть правильний шлях до файлу. Результат: import './index.css'.
5. Щоб застосувати стилі до елемента div, використовуйте назву класу селектор .alert і вставте стилі із завдання.
  1. To create a div element in the component, use <div>...</div>.
  2. To pass props.children as the text content enclose it within {...} and set props.children. Result: <div>{props.children}</div>.
  3. To add a class name to the div element, use the className attribute and set it to alert. Result: className="alert".
  4. 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'.
  5. To apply styles to the div element, use the class name selector .alert and insert the styles from the task.

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

Секція 2. Розділ 7
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

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

Завдання

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

  1. Створіть компонент Alert, який містить елемент div.
  2. Елемент div повинен мати ім'я класу alert.
  3. Елемент div повинен мати проп children в якості вмісту.
  4. Елемент div повинен мати наступний CSS.
Hint
1. Щоб створити елемент div у компоненті, використовуйте <div>...</div>.
2. Щоб передати props.childrenяк текстовий вміст помістіть його у {...} і встановіть props.children. Результат: <div>{props.children}</div>.
3. Щоб додати назву класу до елемента div, використовуйте атрибут className і встановіть для нього значення alert. Результат: className="alert".
4. Щоб імпортувати файл зі стилями у файл index.js, використовуйте оператор import і вкажіть правильний шлях до файлу. Результат: import './index.css'.
5. Щоб застосувати стилі до елемента div, використовуйте назву класу селектор .alert і вставте стилі із завдання.
  1. To create a div element in the component, use <div>...</div>.
  2. To pass props.children as the text content enclose it within {...} and set props.children. Result: <div>{props.children}</div>.
  3. To add a class name to the div element, use the className attribute and set it to alert. Result: className="alert".
  4. 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'.
  5. To apply styles to the div element, use the class name selector .alert and insert the styles from the task.

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

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