ReactJS - Composants Web : Guide du débutant

Bonjour là-bas, futurs développeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant à la découverte de ReactJS et des Composants Web. En tant que votre enseignant de informatique du coin, je suis là pour vous guider à travers cette aventure, étape par étape. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - nous allons commencer par les bases et progresser pas à pas. Alors, prenez une tasse de café (ou de thé, si c'est votre truc), et plongons dedans !

Qu'est-ce que les Composants Web ?

Avant de sauter dans l'utilisation des Composants Web avec React, comprenstons ce qu'ils sont vraiment. Imaginez que vous construisez une maison (notre site web) avec des briques de Lego (notre code). Les Composants Web sont comme des pièces spéciales de Lego que vous pouvez créer une fois et réutiliser dans différentes maisons (sites web) sans avoir à les reconstruire à chaque fois.

Les Composants Web sont un ensemble d'API de la plateforme web qui vous permettent de créer des éléments personnalisés réutilisables. Ils encapsulent leur fonctionnalité, ce qui les rend facilement partageables entre différents projets et frameworks.

Pourquoi utiliser des Composants Web avec React ?

Vous vous demandez peut-être : "Pourquoi me soucier des Composants Web alors que j'utilise React ?" Excellent question ! React est fantastique pour construire des interfaces utilisateur, mais parfois vous pourriez vouloir utiliser un composant qui est indépendant du framework ou partager vos composants avec des développeurs qui n'utilisent pas React. C'est là que les Composants Web excellent !

Commencer : Configurer votre projet React

Commençons par configurer un nouveau projet React. Ne vous inquiétez pas, je vais vous guider à travers chaque étape !

1. Ouvrez votre terminal (ne soyez pas effrayé, c'est juste un moyen textuel de communiquer avec votre ordinateur).
2. Exécutez la commande suivante :

npx create-react-app mon-app-composants-web
cd mon-app-composants-web

Cela crée une nouvelle application React et vous déplace dans le répertoire du projet. C'est comme poser les fondations de notre maison en Lego !

Créer votre premier Composant Web

Maintenant, créons notre premier Composant Web. Nous allons faire un simple composant de carte de salutation.

Créez un nouveau fichier appelé GreetingCard.js dans le dossier src et ajoutez le code suivant :

class GreetingCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}

connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
</style>
<div class="card">
<h2>Hello, ${this.getAttribute('name')}!</h2>
<p>Welcome to the world of Web Components!</p>
</div>
`;
}
}

customElements.define('greeting-card', GreetingCard);

Voici ce que cela fait :

1. Nous créons une classe GreetingCard qui étend HTMLElement. C'est comme créer un plan pour notre pièce spéciale de Lego.
2. Dans le constructeur, nous créons un DOM ombré. Pensez à cela comme une piece privée pour notre composant où ses styles ne fuiteront pas et n'affecteront pas le reste de la page.
3. La méthode connectedCallback est appelée lorsque notre composant est ajouté à la page. Ici, nous mettons en place la structure HTML et les styles pour notre carte.
4. Enfin, nous enregistrons notre nouveau composant avec customElements.define. Cela dit au navigateur : "Hey, lorsque tu vois une balise <greeting-card>, utilise ce plan pour le créer !"

Utiliser le Composant Web dans React

Maintenant que nous avons notre Composant Web, utilisons-le dans notre application React. Ouvrez src/App.js et remplacez son contenu par :

import React from 'react';
import './GreetingCard';

function App() {
return (
<div className="App">
<h1>Mon App de Composants Web</h1>
<greeting-card name="Développeur React"></greeting-card>
</div>
);
}

export default App;

Voici ce qui se passe :

1. Nous importons notre composant GreetingCard (cela l'enregistre avec le navigateur).
2. Dans notre composant App, nous utilisons la balise <greeting-card> comme n'importe quel autre élément HTML.
3. Nous passons un attribut name à notre composant, qu'il utilise pour personnaliser le salut.

Lancer votre application

Il est temps de voir notre création en action ! Dans votre terminal, exécutez :

npm start

Cela démarrera votre application React. Ouvrez votre navigateur et allez à http://localhost:3000. Vous devriez voir votre carte de salutation affichée sur la page !

Ajouter de l'interactivité à votre Composant Web

Faisons notre carte de salutation un peu plus interactive. Nous allons ajouter un bouton qui change le salut lorsque vous cliquez dessus.

Mettez à jour votre fichier GreetingCard.js :

class GreetingCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.greetings = ['Hello', 'Bonjour', 'Hola', 'Ciao', 'Konnichiwa'];
this.currentGreeting = 0;
}

connectedCallback() {
this.render();
this.shadowRoot.querySelector('button').addEventListener('click', () => this.changeGreeting());
}

changeGreeting() {
this.currentGreeting = (this.currentGreeting + 1) % this.greetings.length;
this.render();
}

render() {
this.shadowRoot.innerHTML = `
<style>
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<div class="card">
<h2>${this.greetings[this.currentGreeting]}, ${this.getAttribute('name')}!</h2>
<p>Welcome to the world of Web Components!</p>
<button>Change Greeting</button>
</div>
`;
}
}

customElements.define('greeting-card', GreetingCard);

Dans cette version mise à jour :

1. Nous avons ajouté un tableau de salutations et une méthode pour les faire défiler.
2. La méthode render maintenant gère la création du contenu HTML.
3. Nous avons ajouté un bouton à la carte et un écouteur d'événement pour changer le salut lorsque vous cliquez dessus.

Conclusion

Félicitations ! Vous avez juste créé votre premier Composant Web et l'avez utilisé dans une application React. C'est juste la pointe de l'iceberg en ce qui concerne la puissance des Composants Web et React ensemble.

N'oubliez pas, apprendre à coder, c'est comme construire avec des Lego - commencez par les bases, et bientôt vous serez capable de créer des structures incroyables. Continuez à pratiquer, restez curieux, et n'ayez pas peur d'expérimenter !

Voici un tableau résumant les méthodes clés que nous avons utilisées dans notre Composant Web :

Méthode	Description
constructor()	Initialise le composant et met en place le DOM ombré
connectedCallback()	Appelée lorsque le composant est ajouté au DOM
render()	Crée le contenu HTML pour le composant
changeGreeting()	Met à jour le salut affiché dans le composant

Bonne programmation, futurs développeurs !

Credits: Image by storyset