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 :
```jsx
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 :
```jsx
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 :**
```jsx
// `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`.
```jsx
// `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.
```js
import "./index.css"; // Importing the CSS file
```


## Étape 4
Enfin, nous avons la liberté d'appliquer tous les styles selon nos préférences.
```css
/* 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;
}
```

Améliorez vos compétences en développement web avec le cours sur la création d'applications web modernes en utilisant React. Apprenez à créer des interfaces utilisateur dynamiques, à gérer efficacement l'état et les données, et à tirer parti des dernières technologies et meilleures pratiques en développement web. Rejoignez-nous maintenant et débloquez tout le potentiel de React pour créer des applications web hautement interactives et engageantes qui répondent aux exigences des utilisateurs d'aujourd'hui.

Acquérez une compréhension des principes fondamentaux de React. Vous apprendrez à propos de JSX (JavaScript XML), à construire des composants d'interface utilisateur réutilisables et à rendre des éléments. De plus, vous explorerez l'importance de la collecte de données et du rendu conditionnel dans les applications React. À la fin de cette section, vous aurez une base solide des concepts essentiels de React, vous préparant au succès dans les sujets plus avancés abordés dans les sections suivantes.

Explorez les différentes méthodes pour ajouter des styles aux applications React. Vous apprendrez à appliquer des styles à des composants individuels, à utiliser des styles dynamiques et à maintenir une approche de stylisation évolutive et facile à maintenir dans vos projets.

Fonctionnalités puissantes dans le développement moderne de React. Les hooks révolutionnent la manière dont nous écrivons des composants fonctionnels, offrant une méthode concise et intuitive pour gérer l'état et effectuer des effets secondaires. À l'inverse, le contexte nous permet de partager des données à travers l'arborescence des composants sans avoir à passer par les props. La combinaison des hooks et du contexte permet une gestion efficace de l'état et un partage simplifié des données dans les applications React.


Guide étape par étape sur la façon de démarrer un projet React dans le monde réel. De la configuration de votre environnement de développement à la compréhension de l'organisation du projet et des outils essentiels, vous acquerrez les connaissances et la confiance nécessaires pour vous lancer dans votre aventure React.

Maîtrise de React

Styliser avec le Fichier CSS en Pratique

Étape 1

Étape 2

Étape 3

Étape 4

Code complet de l'application :