Практичне завдання: створення компоненту картки, що складається з трьох компонентів. Мета — використати різні компоненти та застосувати стилі для досягнення привабливого вигляду. Виконання завдання відбуватиметься поетапно.

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

const App = () => (
  <Container>
    <Notification />
    <Message />
  </Container>
);

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

Код компонента Container виглядає так:

const Container = (props) => (
  <div>{props.children}</div>
);

Примітка

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

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

Крок 1

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

Приклад:

// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => (
  <div>{props.children}</div>
);

// `UserImage` component to display user image
const UserImage = () => (
  <img
    className="image"
    src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
    alt="user"
    width={200}
  />
);

// `UserInfo` component to display user information
const UserInfo = (props) => (
  <div>
    <p>
      <span>Name:</span> {props.name}
    </p>
    <p>
      <span>Age:</span> {props.age}
    </p>
    <p>
      <span>Occupation:</span> {props.occupation}
    </p>
  </div>
);

// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
  <Container>
    <UserImage />
    <UserInfo name="Michelle" age="36 years" occupation="Accountant" />
  </Container>
);

Крок 2

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

// `Container` component to hold `UserImage` and `UserInfo`
const Container = (props) => <div className="container">{props.children}</div>;

// `UserImage` component to display user image
const UserImage = () => (
  <img
    className="image"
    src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/styling/user.png"
    alt="user"
    width={200}
  />
);

// `UserInfo` component to display user information
const UserInfo = (props) => (
  <div className="description">
    <p className="text">
      <span className="label">Name:</span> {props.name}
    </p>
    <p className="text">
      <span className="label">Age:</span> {props.age}
    </p>
    <p className="text">
      <span className="label">Occupation:</span> {props.occupation}
    </p>
  </div>
);

// `App` component that combines `Container`, `UserImage`, and `UserInfo`
const App = () => (
  <Container>
    <UserImage />
    <UserInfo name="Michelle" age="36 years" occupation="Accountant" />
  </Container>
);

Крок 3

Імпортуйте CSS-файл у файл, який містить усі компоненти. Це робиться на початку файлу.

import "./index.css"; // Importing the CSS file

Крок 4

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

/* Styling for the `Container` component */
.container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 3px solid #4f5e77;
  border-radius: 10px;
  width: 320px;
  background-color: #ff8a00;
}

/* Styling for the `UserImage` component */
.image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* Styling for the `UserInfo` component text */
.text {
  font-size: 22px;
  color: #bbdefb;
}

/* Styling for the `UserInfo` component label */
.label {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  color: #4f5e77;
}

Повний код застосунку: