ES6 Guide complet : Applications Pratiques avec React (Partie 5)

Introduction

Dans cette cinquième et dernière partie de notre série sur ES6, nous allons explorer comment les fonctionnalités ES6 que vous avez apprises peuvent être appliquées dans le développement de composants React. React utilise intensivement ES6, et maîtriser ces concepts est essentiel pour écrire du code moderne et efficace.

Nous verrons des exemples concrets utilisant :

• Fonctions fléchées : Pour éviter de lier manuellement les méthodes dans les composants classiques.
• Classes : Pour créer des composants basés sur des classes.
• Déstructuration : Pour simplifier l'accès aux props et aux états.
• Méthodes de tableau : Pour manipuler des listes de données dans React.

1. Fonctions Fléchées dans React

Les fonctions fléchées sont largement utilisées dans React pour éviter de devoir lier manuellement les méthodes aux composants. Voici un exemple :

Exemple : Gestion des Événements avec une Fonction Fléchée

📋 Copier le code

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}

increment = () => { // Fonction fléchée pour éviter le binding manuel
this.setState(prevState => ({ count: prevState.count + 1 }));
}

render() {
return (
<div>
	<p>Count: {this.state.count}</p>
	<button onClick={this.increment}>Increment</button>
</div>
);
}
}

Explication :

• La fonction fléchée increment est définie directement dans la classe, garantissant que this fait référence au composant.
• Cela évite de devoir utiliser this.increment = this.increment.bind(this) dans le constructeur.

2. Composants Basés sur des Classes

React permet de créer des composants en utilisant des classes ES6. Voici un exemple simple :

Exemple : Composant Basé sur une Classe

📋 Copier le code

class Greeting extends React.Component {
render() {
const { name } = this.props; // Déstructuration des props
return <h1>Hello, {name}!</h1>;
}
}

// Utilisation du composant
ReactDOM.createRoot(document.getElementById('root')).render(
<Greeting name="Alice" />
);

Explication :

• Le composant Greeting est défini comme une classe qui hérite de React.Component.
• La déstructuration const { name } = this.props simplifie l'accès à la prop name.

3. Déstructuration des Props et États

La déstructuration est particulièrement utile dans React pour extraire rapidement les props et les états des composants.

Exemple : Déstructuration des Props

📋 Copier le code

function User({ name, age }) { // Déstructuration directe dans les paramètres
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}

// Utilisation du composant
ReactDOM.createRoot(document.getElementById('root')).render(
<User name="Bob" age={25} />
);

Explication :

• La déstructuration { name, age } est utilisée directement dans les paramètres de la fonction pour extraire les props.
• Cela rend le code plus concis et lisible.

4. Utilisation des Méthodes de Tableau dans React

Les méthodes de tableau comme .map() sont couramment utilisées dans React pour afficher des listes de données.

Exemple : Affichage d'une Liste avec .map()

📋 Copier le code

function List({ items }) {
return (
<ul>
{items.map(item => (
	<li key={item.id}>{item.name}</li> // Utilisation de .map() pour itérer sur les éléments
))}
</ul>
);
}

// Données
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
];

// Utilisation du composant
ReactDOM.createRoot(document.getElementById('root')).render(
<List items={users} />
);

Explication :

• La méthode .map() est utilisée pour transformer chaque élément du tableau items en un élément <li>.
• L'attribut key est obligatoire pour identifier chaque élément de manière unique.

5. Hooks et Fonctions Fléchées dans les Composants Fonctionnels

Avec l'introduction des hooks dans React, les composants fonctionnels sont devenus la norme. Voici un exemple utilisant le hook useState avec une fonction fléchée :

Exemple : Composant Fonctionnel avec useState

📋 Copier le code

import React, { useState } from 'react'; 

// Importation correcte de ReactDOM
import ReactDOM from 'react-dom/client'; 

// Utilisation de useState pour gérer l'état du compteur
function Counter() { const [count, setCount] = useState(0); 

// Mise à jour de l'état avec la nouvelle valeur du compteur
const increment = () => {
setCount(count + 1); 
};

return (
<div>
<p>Count: {count}</p> {/* Affichage de la valeur actuelle du compteur */}
<button onClick={increment}>Increment</button> {/* Bouton pour incrémenter le compteur */}
</div>
);
}

// Rendu du composant Counter dans l'élément avec l'ID 'root' const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Counter />); 

Explication :

• Le hook useState est utilisé pour gérer l'état local du composant.
• La fonction fléchée increment met à jour l'état sans nécessiter de lier manuellement la méthode.

Résumé de la Partie 5

Dans cette partie, nous avons exploré comment les fonctionnalités ES6 que vous avez apprises peuvent être appliquées dans le développement de composants React. Nous avons vu des exemples concrets utilisant :

• Fonctions fléchées : Pour éviter de lier manuellement les méthodes dans les composants classiques.
• Classes : Pour créer des composants basés sur des classes.
• Déstructuration : Pour simplifier l'accès aux props et aux états.
• Méthodes de tableau : Pour manipuler des listes de données dans React.

Ceci conclut notre exploration des applications pratiques d'ES6 dans React. Continuez votre apprentissage en découvrant les prochaines parties de la série :

• Passez à la Partie 6 pour approfondir vos connaissances sur l'opérateur ternaire, une syntaxe concise pour écrire des conditions en JavaScript.
• Ensuite, explorez la Partie 7 pour maîtriser l'opérateur d'étalement, un outil puissant pour copier, fusionner et décomposer des tableaux et objets.

Ces deux fonctionnalités sont essentielles pour écrire du code moderne et efficace en JavaScript et React. À bientôt pour la suite !