ReactJS - Utilisation de Composants Créés Récemment

Introduction

Salut à toi, futur développeur React ! Je suis ravi de devenir ton guide sur ce voyage passionnant dans le monde des composants React. En tant que quelqu'un qui enseigne l'informatique depuis des années, je peux te dire que comprendre les composants, c'est comme apprendre à construire avec des briques LEGO - une fois que tu as compris, tu peux créer des choses incroyables !

Qu'est-ce Que les Composants React ?

Avant de plonger dans l'utilisation des composants, comprendre ce qu'ils sont est essentiel. Pense aux composants comme des blocs de construction réutilisables pour ton interface utilisateur.Tout comme tu peux utiliser la même brique LEGO dans différentes parties de ta création, tu peux utiliser le même composant React dans diverses parties de ton application.

Types de Composants

React a deux types principaux de composants :

1. Composants de Fonction
2. Composants de Classe

Pour ce tutoriel, nous nous concentrerons sur les composants de fonction, car ils sont plus simples et plus modernes.

Création de Ton Premier Composant

Commençons par créer un composant simple. Nous allons faire un composant "Greeting" qui affiche un message de bienvenue.

function Greeting() {
return <h1>Salut, apprenant React !</h1>;
}

Cela peut sembler simple, mais il y a beaucoup de choses en cours :

• Nous définissons une fonction appelée Greeting
• La fonction retourne du JSX (cette syntaxe similaire à HTML)
• Le JSX représente ce qui sera rendu à l'écran

Utilisation de Ton Composant Créé Récemment

Maintenant que nous avons notre composant Greeting, utilisons-le dans notre application !

function App() {
return (
<div>
<Greeting />
<p>Bienvenue dans notre tutoriel React !</p>
</div>
);
}

Voici ce qui se passe :

• Nous avons un composant App (le composant principal de notre application)
• À l'intérieur de App, nous utilisons notre composant Greeting
• Nous utilisons les composants comme nous utiliserions des balises HTML

Lorsque vous exécutez ce code, vous verrez "Salut, apprenant React !" suivi de "Bienvenue dans notre tutoriel React !"

Composants avec Props

Les composants deviennent vraiment puissants lorsque nous les rendons dynamiques en utilisant les props. Les props sont comme des paramètres pour vos composants.

Modifions notre composant Greeting pour qu'il accepte un nom :

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

Maintenant, nous pouvons l'utiliser comme ceci :

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

Cela affichera :

Salut, Alice !
Salut, Bob !

C'est génial, non ? Nous avons créé un composant réutilisable qui peut saluer différentes personnes !

Composants avec Plusieurs Props

Reprenons et créons un composant plus complexe. Nous allons faire un composant UserCard qui affiche les informations d'un utilisateur.

function UserCard(props) {
return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Âge : {props.age}</p>
<p>Profession : {props.occupation}</p>
</div>
);
}

Maintenant, nous pouvons l'utiliser comme ceci :

function App() {
return (
<div>
<UserCard name="Alice" age={28} occupation="Développeur" />
<UserCard name="Bob" age={35} occupation="Designer" />
</div>
);
}

Encapsulation de Composants

L'une des fonctionnalités les plus puissantes de React est la capacité à imbriquer des composants. Créons un composant UserList qui utilise plusieurs composants UserCard :

function UserList() {
return (
<div>
<h1 Liste des utilisateurs</h1>
<UserCard name="Alice" age={28} occupation="Développeur" />
<UserCard name="Bob" age={35} occupation="Designer" />
<UserCard name="Charlie" age={42} occupation="Manager" />
</div>
);
}

Maintenant, notre composant App peut simplement utiliser le composant UserList :

function App() {
return (
<div>
<Greeting name="Apprenant React" />
<UserList />
</div>
);
}

Méthodes de Composants

Les composants peuvent également avoir leurs propres méthodes. Ajoutons une méthode à notre composant UserCard qui calcule l'année de naissance :

function UserCard(props) {
const calculateBirthYear = () => {
const currentYear = new Date().getFullYear();
return currentYear - props.age;
};

return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Âge : {props.age}</p>
<p>Année de naissance : {calculateBirthYear()}</p>
<p>Profession : {props.occupation}</p>
</div>
);
}

Conclusion

Félicitations ! Vous avez fait vos premiers pas dans le monde des composants React. Nous avons couvert la création de composants simples, l'utilisation des props, l'encapsulation des composants et même l'ajout de méthodes aux composants.

N'oubliez pas, la pratique rend parfait. Essayez de créer vos propres composants, expérimentez avec différents props et voyez ce que vous pouvez construire. Avant de vous en rendre compte, vous serez en train de construire des interfaces utilisateur complexes avec facilité !

Voici un tableau de référence rapide des composants que nous avons créés :

Nom du Composant	Props	Description
Greeting	name	Affiche un message de bienvenue
UserCard	name, age, occupation	Affiche les informations d'un utilisateur
UserList	Aucun	Affiche une liste de composants UserCard

Continuez à coder, continuez à apprendre, et surtout, amusez-vous avec React !

Credits: Image by storyset