Practiquemos creando un componente de tarjeta compuesto por tres componentes. El objetivo es utilizar diferentes componentes y aplicar estilos para que sea visualmente atractivo. Avanzaremos paso a paso para lograrlo.

Antes de comenzar, exploremos la funcionalidad de la prop especial llamada children, que permite pasar componentes, elementos o texto como elementos hijos. Así es como funciona:

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

El componente Container incluye una prop children, que contendrá los componentes Notification y Message. Cualquier contenido colocado entre las etiquetas de apertura y cierre del componente Container será tratado como sus hijos.

El componente Container tiene el siguiente código:

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

Nota

Las props simples se definen explícitamente y se accede a ellas usando sus nombres específicos dentro de un componente. Por otro lado, la prop children permite pasar componentes, elementos o texto como hijos de un componente sin definir explícitamente un nombre de prop. Representa el contenido entre las etiquetas de apertura y cierre del componente.

Podemos comenzar.

Paso 1

Creamos todos los componentes necesarios: Container, UserImage y UserInfo. Construyamos toda la aplicación incorporando estos componentes dentro del componente App.

Ejemplo:

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

Paso 2

Verificar que todos los nombres de clase esenciales estén añadidos a los elementos utilizando el atributo 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>
);

Paso 3

Importar el archivo CSS en el archivo que contiene todos los componentes. Esto se realiza en la parte superior del archivo.

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

Paso 4

Por último, tenemos la libertad de aplicar cualquier estilo según nuestras preferencias.

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

Código completo de la aplicación: