Давайте попрактикуємось у створенні компонента картки, що складається з трьох компонентів. Ми прагнемо використати різні компоненти та застосувати стилі, щоб зробити її візуально привабливою. Ми будемо діяти крок за кроком, щоб досягти цього.

Перш ніж ми почнемо, давайте вивчимо функціональність спеціального пропса під назвою children, який дозволяє нам передавати компоненти, елементи або текст як дочірні елементи. Ось як це працює:

jsx
Скопіювати код
Expand

Компонент Container містить проп children, який міститиме компоненти Notification та Message. Будь-який вміст, розміщений між відкриваючим та закриваючим тегами компонента Container, буде розглядатися як його дочірні елементи.

Компонент Container має наступний код:

jsx
Скопіювати код
Expand

Примітка

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

Ми можемо починати.

Крок 1

Створюємо всі необхідні компоненти: Container, UserImage та UserInfo. Створимо весь додаток, включивши ці компоненти в компонент App.

Приклад:

jsx
Скопіювати код
Expand

Крок 2

Переконайтеся, що всі необхідні імена класів додано до елементів за допомогою атрибуту className.

jsx
Скопіювати код
Expand

Крок 3

Імпортуємо файл CSS у файл, який містить усі компоненти. Зробимо це у верхній частині файлу.

js
Скопіювати код
Expand

Крок 4

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

css
Скопіювати код
Expand

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