ReactJS - Composants imbriqués : Un guide pour débutants

Bonjour à tous, futurs magiciens de React ! Aujourd'hui, nous allons entreprendre un voyage passionnant à la découverte des composants imbriqués dans ReactJS. Ne vous inquiétez pas si vous êtes nouveau dans le monde de la programmation - je serai votre guide bienveillant, expliquant tout étape par étape. À la fin de ce tutoriel, vous serez capable d'imbriquer des composants comme un pro !

Qu'est-ce que les composants imbriqués ?

Avant de plonger dedans, comprenstons ce qu'est un composant imbriqué. Imaginez que vous construisez une maison (votre application React). Les murs, le toit et les fondations sont vos composants principaux. Mais à l'intérieur de la maison, vous avez des chambres (composants imbriqués) qui peuvent contenir du mobilier (encore plus de composants imbriqués). Cette structure nous permet de créer des UI complexes d'une manière gérable.

Pourquoi utiliser des composants imbriqués ?

1. Réutilisabilité : Créez des composants une fois, utilisez-les plusieurs fois.
2. Maintenabilité : Plus facile à mettre à jour et à gérer des composants plus petits et ciblés.
3. Lisibilité : Votre code devient plus organisé et plus facile à comprendre.

Maintenant, mettons les mains dans le code !

Créer notre premier composant imbriqué

Commençons par un exemple simple. Imaginons que nous construisons une application de shopping. Nous allons créer un composant Product qui contiendra un composant Price.

// Product.js
import React from 'react';
import Price from './Price';

function Product({ name, price }) {
return (
<div className="product">
<h2>{name}</h2>
<Price amount={price} />
</div>
);
}

export default Product;

// Price.js
import React from 'react';

function Price({ amount }) {
return <p className="price">${amount.toFixed(2)}</p>;
}

export default Price;

Dans cet exemple, Product est notre composant parent, et Price est imbriqué à l'intérieur. Décomposons :

1. Nous importons le composant Price dans Product.
2. Le composant Product reçoit name et price comme props.
3. Nous utilisons le composant Price à l'intérieur de Product, en passant la prop price comme amount.

Maintenant, lorsque nous utilisons le composant Product :

<Product name="Super Cool Gadget" price={19.99} />

Il rendra :

<div class="product">
<h2>Super Cool Gadget</h2>
<p class="price">$19.99</p>
</div>

C'est pas génial ? Nous avons créé un affichage de prix réutilisable que nous pouvons utiliser pour n'importe quel produit !

Composant FormattedMoney

Maintenant, créons un composant imbriqué plus avancé pour formater l'argent. Cela sera utile pour afficher les prix dans différentes devises.

// FormattedMoney.js
import React from 'react';

function FormattedMoney({ amount, currency = 'USD' }) {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency,
});

return <span className="formatted-money">{formatter.format(amount)}</span>;
}

export default FormattedMoney;

// Product.js (mis à jour)
import React from 'react';
import FormattedMoney from './FormattedMoney';

function Product({ name, price, currency }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
</div>
);
}

export default Product;

Décomposons ce qui se passe dans FormattedMoney :

1. Nous utilisons l'API Intl.NumberFormat pour formater notre nombre comme devise.
2. Nous définissons une devise par défaut de 'USD' en utilisant les valeurs par défaut des paramètres.
3. Le composant retourne un span avec le montant formaté.

Maintenant, nous pouvons utiliser notre composant Product comme ceci :

<Product name="Amazing Widget" price={29.99} currency="EUR" />

Cela rendra :

<div class="product">
<h2>Amazing Widget</h2>
<span class="formatted-money">€29.99</span>
</div>

Cool, non ? Nous avons créé un composant flexible et réutilisable pour afficher les prix dans différentes devises !

Composant FormattedDate

Créons un dernier composant imbriqué pour afficher des dates formatées. Cela pourrait être utile pour afficher les dates de sortie des produits ou les dates de fin des promotions.

// FormattedDate.js
import React from 'react';

function FormattedDate({ date, format = 'long' }) {
const options = {
short: { month: 'short', day: 'numeric', year: 'numeric' },
long: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
};

const formatter = new Intl.DateTimeFormat('en-US', options[format]);

return <span className="formatted-date">{formatter.format(new Date(date))}</span>;
}

export default FormattedDate;

// Product.js (mis à jour à nouveau)
import React from 'react';
import FormattedMoney from './FormattedMoney';
import FormattedDate from './FormattedDate';

function Product({ name, price, currency, releaseDate }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
<p>Date de sortie : <FormattedDate date={releaseDate} /></p>
</div>
);
}

export default Product;

Dans ce composant FormattedDate :

1. Nous créons deux options de format : 'short' et 'long'.
2. Nous utilisons Intl.DateTimeFormat pour formater la date en fonction du format choisi.
3. Nous analysons la chaîne de date d'entrée en un objet Date.

Maintenant, nous pouvons utiliser notre composant Product comme ceci :

<Product
name="Futuristic Gizmo"
price={99.99}
currency="USD"
releaseDate="2023-12-25"
/>

Cela rendra :

<div class="product">
<h2>Futuristic Gizmo</h2>
<span class="formatted-money">$99.99</span>
<p>Date de sortie : <span class="formatted-date">Monday, December 25, 2023</span></p>
</div>

Mettre tout ensemble

Créons un composant ProductList qui utilise tous nos composants imbriqués :

// ProductList.js
import React from 'react';
import Product from './Product';

function ProductList({ products }) {
return (
<div className="product-list">
{products.map(product => (
<Product
key={product.id}
name={product.name}
price={product.price}
currency={product.currency}
releaseDate={product.releaseDate}
/>
))}
</div>
);
}

export default ProductList;

Maintenant, nous pouvons utiliser notre ProductList comme ceci :

const products = [
{ id: 1, name: "Super Gadget", price: 49.99, currency: "USD", releaseDate: "2023-06-15" },
{ id: 2, name: "Mega Widget", price: 39.99, currency: "EUR", releaseDate: "2023-07-01" },
{ id: 3, name: "Awesome Gizmo", price: 59.99, currency: "GBP", releaseDate: "2023-08-30" },
];

<ProductList products={products} />

Cela rendra une liste de produits, chacun avec des prix et des dates formatés !

Conclusion

Félicitations ! Vous avez刚刚 appris les composants imbriqués dans React. Nous avons créé des composants réutilisables pour formater l'argent et les dates, et les avons imbriqués dans un composant produit. C'est juste le début - les possibilités avec les composants imbriqués sont illimitées !

N'oubliez pas, la pratique rend parfait. Essayez de créer vos propres composants imbriqués et voyez comment ils peuvent rendre vos applications React plus modulaires et faciles à维护.

Bonne programmation, futurs maîtres de React ! ?

Composant	But	Props
FormattedMoney	Afficher une devise formatée	amount, currency
FormattedDate	Afficher des dates formatées	date, format
Product	Afficher les informations du produit	name, price, currency, releaseDate
ProductList	Afficher une liste de produits	products (tableau)

Credits: Image by storyset