ReactJS - Création de Composants en Utilisant les Propriétés

Bonjour à tous, futurs développeurs React ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde des composants et des propriétés React. En tant que votre enseignant informatique bienveillant du quartier, je suis là pour vous guider à travers cette aventure étape par étape. Alors, prenez votre boisson favorite, installez-vous confortablement, et plongeons dedans !

Qu'est-ce que les Composants et Propriétés React ?

Avant de commencer à créer des composants, comprenstons ce qu'ils sont. Imaginez que vous construisez une maison avec des briques Lego. Chaque pièce Lego est comme un composant React - un bloc de construction réutilisable pour votre application web. Maintenant, que se passe-t-il si vous voulez personnaliser ces pièces Lego ? C'est là que les propriétés (ou props) entrent en jeu. Elles sont comme des instructions spéciales que vous donnez à chaque pièce Lego pour la rendre unique.

Comment Créer un Composant en Utilisant des Propriétés

Commençons par un exemple simple. Nous allons créer un composant "Greeting" qui dit bonjour à différentes personnes.

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
<Greeting name="Charlie" />
</div>
);
}

Décomposons cela :

1. Nous définissons une fonction Greeting qui prend props comme argument.
2. À l'intérieur de la fonction, nous retournons du JSX (c'est la manière de React d'écrire du code HTML-like dans JavaScript).
3. Nous utilisons {props.name} pour insérer la valeur de la propriété name.
4. Dans notre composant App, nous utilisons <Greeting /> trois fois avec différentes propriétés name.

Lorsque vous exécutez ce code, vous verrez trois salutations, chacune avec un nom différent. C'est comme avoir un robot amical qui peut saluer n'importe qui que vous lui présentez !

Ajouter Plus de Propriétés

Maintenant, rendons notre salutation plus intéressante en ajoutant quelques propriétés supplémentaires :

function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<pVous avez {props.age} ans et vous aimez {props.hobby}.</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={25} hobby="peinture" />
<Greeting name="Bob" age={30} hobby="jouer de la guitare" />
</div>
);
}

Ici, nous avons ajouté les propriétés age et hobby. Notez comment nous utilisons des accolades {} pour la propriété age ? C'est parce que nous passons un nombre, pas une chaîne de caractères. Pour les chaînes, nous utilisons des guillemets, mais pour les nombres ou les expressions JavaScript, nous utilisons des accolades.

Les Objets en tant que Propriétés

Parfois, il est pratique de regrouper des données liées dans un objet. Refaisons notre composant Greeting pour utiliser une propriété objet :

function Greeting(props) {
return (
<div>
<h1>Hello, {props.person.name}!</h1>
<pVous avez {props.person.age} ans et vous aimez {props.person.hobby}.</p>
</div>
);
}

function App() {
const alice = { name: "Alice", age: 25, hobby: "peinture" };
const bob = { name: "Bob", age: 30, hobby: "jouer de la guitare" };

return (
<div>
<Greeting person={alice} />
<Greeting person={bob} />
</div>
);
}

Dans cette version, nous passons un seul objet person comme propriété, qui contient toutes les informations sur chaque personne. Cela peut rendre votre code plus propre, surtout lorsque vous avez beaucoup de propriétés liées.

Destructuration des Propriétés

À mesure que vos composants grandissent, vous pourriez trouver que vous tapez props. souvent. Il y a un astuce appelée "destructuration" qui peut rendre votre code plus propre :

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<pVous avez {age} ans et vous aimez {hobby}.</p>
</div>
);
}

Cela fait la même chose que notre exemple précédent, mais c'est un peu plus concis. Nous disons "prends la propriété person et extrait name, age, et hobby de celle-ci".

Propriétés par Défaut

Que se passe-t-il si quelqu'un oublie de passer une propriété à notre composant ? Nous pouvons définir des valeurs par défaut pour éviter les erreurs :

function Greeting({ person = { name: "Invité", age: "inconnu", hobby: "mystères" } }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<pVous avez {age} ans et vous aimez {hobby}.</p>
</div>
);
}

Maintenant, si nous utilisons <Greeting /> sans aucune propriété, il utilisera ces valeurs par défaut au lieu de planter.

Types de Propriétés

À mesure que votre application grandit, il est une bonne idée de vérifier que vous recevez le bon type de propriétés. React a une fonctionnalité appelée PropTypes pour cela :

import PropTypes from 'prop-types';

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<pVous avez {age} ans et vous aimez {hobby}.</p>
</div>
);
}

Greeting.propTypes = {
person: PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
hobby: PropTypes.string.isRequired
}).isRequired
};

Cela vous avertira si vous passez un type de données incorrect à votre composant. C'est comme avoir un assistant amical qui vérifie votre travail !

Conclusion

Félicitations ! Vous venez d'apprendre les bases de la création de composants React avec des propriétés. Souvenez-vous, les props sont comme des instructions que vous donnez à vos composants pour les rendre dynamiques et réutilisables. Elles font partie intégrante de React, et les maîtriser vous fera faire un long chemin dans votre parcours React.

Voici un tableau de référence rapide des méthodes que nous avons couvertes :

Méthode	Description
Propriétés de Base	Passer des valeurs individuelles à un composant
Propriétés Objet	Passer un objet contenant plusieurs valeurs
Destructuration	Extraire des valeurs des props pour un code plus propre
Propriétés par Défaut	Définir des valeurs de secours pour les props manquantes
PropTypes	Valider les types de props passés

Continuez à pratiquer, expérimenter et construire ! React est un outil puissant, et vous êtes bien sur le chemin de devenir un maître de React. Bon codage !

Credits: Image by storyset