Let's practice by creating a card component consisting of three components. We aim to utilize different components and apply styles to make it visually appealing. We will proceed step by step to achieve this.

Before we begin, let's explore the functionality of the special prop called children, which enables us to pass components, elements, or text as child elements. Here's how it works:

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

The Container component includes a children prop, which will contain the Notification and Message components. Any content placed between the opening and closing tags of the Container component will be treated as its children.

The Container component has the following code:

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

Note

Simple props are explicitly defined and accessed using their specific names within a component. On the other hand, the children prop allows us to pass components, elements, or text as children to a component without explicitly defining a prop name. It represents the content between the opening and closing tags of the component.

We can start.

Step 1

We create all the necessary components: Container, UserImage and UserInfo. Let's build the entire app by incorporating these components inside the App component.

Example:

// `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>
);

Step 2

Ensure that all the essential class names are added to the elements using the className attribute.

// `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>
);

Step 3

Let's import the CSS file into the file that contains all the components. We do it in the top of the file.

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

Step 4

Lastly, we have the freedom to apply any styles as per our preferences.

/* 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;
}

Full app code: