Pratique de la création d’un composant carte composé de trois composants. L’objectif est d’utiliser différents composants et d’appliquer des styles pour obtenir un rendu visuel attrayant. La réalisation se fera étape par étape.

Avant de commencer, exploration de la fonctionnalité de la prop spéciale children, qui permet de transmettre des composants, des éléments ou du texte en tant qu’éléments enfants. Fonctionnement illustré ci-dessous :

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

Le composant Container inclut une prop children, qui contiendra les composants Notification et Message. Tout contenu placé entre les balises ouvrante et fermante du composant Container sera traité comme ses enfants.

Le composant Container possède le code suivant :

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

Remarque

Les props simples sont explicitement définies et accessibles via leurs noms spécifiques dans un composant. En revanche, la prop children permet de transmettre des composants, des éléments ou du texte en tant qu’enfants d’un composant sans définir explicitement un nom de prop. Elle représente le contenu situé entre les balises ouvrante et fermante du composant.

Nous pouvons commencer.

Étape 1

Créer tous les composants nécessaires : Container, UserImage et UserInfo. Construire l'application complète en intégrant ces composants dans le composant App.

Exemple :

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

Étape 2

S'assurer que tous les noms de classes essentiels sont ajoutés aux éléments à l'aide de l'attribut 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>
);

Étape 3

Importation du fichier CSS dans le fichier contenant tous les composants. Cette opération s'effectue en haut du fichier.

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

Étape 4

Enfin, possibilité d'appliquer les styles selon les préférences.

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

Code complet de l'application :