Pratiquons en créant un composant de carte composé de trois composants. Nous visons à utiliser différents composants et à appliquer des styles pour le rendre visuellement attrayant. Nous procéderons étape par étape pour y parvenir.

Avant de commencer, explorons la fonctionnalité de la prop spéciale appelée children, qui nous permet de passer des composants, des éléments ou du texte en tant qu'éléments enfants. Voici comment cela fonctionne :

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 ouvrantes et fermantes du composant Container sera traité comme ses enfants.

Le composant Container a le code suivant :

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

Remarque

Les props simples sont explicitement définies et accessibles en utilisant leurs noms spécifiques au sein d'un composant. En revanche, la prop children nous permet de passer des composants, des éléments ou du texte en tant qu'enfants à un composant sans définir explicitement un nom de prop. Elle représente le contenu entre les balises ouvrantes et fermantes du composant.

Nous pouvons commencer.

Étape 1

Nous créons tous les composants nécessaires : Container, UserImage et UserInfo. Construisons l'application entière en incorporant ces composants à l'intérieur du 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

Assurez-vous que tous les noms de classe essentiels sont ajoutés aux éléments en utilisant 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

Importons le fichier CSS dans le fichier qui contient tous les composants. Nous le faisons en haut du fichier.

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

Étape 4

Enfin, nous avons la liberté d'appliquer tous les styles selon nos 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 :