## Завдання: Створення картки користувача за допомогою модулів CSS
У цьому завданні ви розробите картку користувача, яка відображатиме його фотографію та відповідну інформацію. Застосуйте відповідні стилі до кожного компонента та забезпечте їх правильне використання. Наша мета - досягти такого інтерфейсу:

Завдання таке:
1. У файлі `UserInfo.jsx` імпортуйте файл стилів (`UserInfo.module.css`) і призначити його як `s` для асоціації стилів.
2. Щоб завершити збірку програми, імпортуйте файл `UserInfo.jsx` до файлу `App.jsx`.





1. To import a file, use the `import` statement and specify the source file.
2. To associate the CSS file with the s, import it using `import s from "path_to_the_file";`.
3. To utilize the UserInfo component within the `App` component, use the syntax `</UserInfo />`.

Підніміть свої навички веб-розробки на новий рівень з курсом по створенню сучасних веб-додатків з використанням React. Навчіться створювати динамічні користувацькі інтерфейси, ефективно керувати станом та даними, а також використовувати новітні технології та найкращі практики веб-розробки. Приєднуйтесь зараз і розкрийте весь потенціал React для створення високоінтерактивних та цікавих веб-додатків, що відповідають вимогам сучасних користувачів.

Отримайте розуміння основних принципів React. Ви дізнаєтесь про JSX (JavaScript XML), створення багаторазових компонентів інтерфейсу користувача та рендеринг елементів. Крім того, ви вивчите важливість збору даних та умовного рендерингу в React-додатках. Наприкінці цього розділу ви матимете міцний фундамент з основних концепцій React, що підготує вас до успіху в більш складних темах, які будуть розглянуті в наступних розділах.

Вивчіть різні методи додавання стилів до React додатків. Ви дізнаєтесь, як застосовувати стилі до окремих компонентів, використовувати динамічні стилі та підтримувати масштабований і підтримуваний підхід до стилів у ваших проектах.

Потужні можливості в сучасній React-розробці. Хуки революціонізують те, як ми пишемо функціональні компоненти, надаючи стислий та інтуїтивно зрозумілий спосіб керувати станом та виконувати побічні ефекти. І навпаки, контекст дозволяє нам обмінюватися даними через дерево компонентів без використання пропсів. Поєднання хуків та контексту дозволяє ефективно керувати станами та спрощує обмін даними в React-додатках.


Покрокове керівництво про те, як розпочати реальний React-проект. Від налаштування середовища розробки до розуміння організації проекту та критично важливих інструментів - ви отримаєте знання та впевненість, щоб розпочати свою подорож з React.

Опановуємо React

Челендж: CSS Модулі

Завдання: Створення картки користувача за допомогою модулів CSS