Exemples de Code avec ReactJS
Maîtrisez la création de composants interactifs et dynamiques avec React
Points Clés à Retenir
- Les composants sont le cœur de React, et peuvent être fonctionnels ou basés sur des classes.
- Les Hooks tels que
useStateetuseEffectpermettent de gérer l'état et les effets de bord dans les composants fonctionnels. - React Router facilite la gestion du routage dans les applications à page unique.
Introduction à ReactJS
ReactJS est une bibliothèque JavaScript open-source développée par Facebook, utilisée pour construire des interfaces utilisateur interactives et dynamiques. Elle suit une architecture basée sur les composants, ce qui facilite la réutilisation de code et la gestion de l'état de l'application. React utilise JSX, une extension de syntaxe pour JavaScript qui permet de décrire la structure de l'interface de manière déclarative.
Concepts de Base de ReactJS
Composants Fonctionnels
Les composants fonctionnels sont des fonctions JavaScript qui acceptent des props en tant qu'argument et retournent des éléments React. Avec l'introduction des Hooks, les composants fonctionnels peuvent désormais gérer l'état et les effets de bord, ce qui les rend aussi puissants que les composants basés sur des classes.
Exemple de Composant Fonctionnel avec Hooks
import React, { useState } from 'react';
function Compteur() {
const [compte, setCompte] = useState(0);
return (
<div>
<p>Vous avez cliqué {compte} fois</p>
<button onClick={() => setCompte(compte + 1)}>
Cliquez-moi
</button>
</div>
);
}
export default Compteur;
Composants de Classe
Avant l'introduction des Hooks, les composants basés sur des classes étaient le principal moyen de gérer l'état et les cycles de vie dans React. Bien que les composants fonctionnels soient désormais préférés pour leur simplicité, il est important de comprendre les composants de classe, car ils sont encore largement utilisés dans de nombreux projets existants.
Exemple de Composant de Classe
import React, { Component } from 'react';
class Horloge extends Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}
componentDidMount() {
this.timerID = setInterval(
() => this.tic(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tic() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Bonjour, monde !</h1>
<h2>Il est {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
export default Horloge;
Props et State
Les props (propriétés) permettent de passer des données des composants parents aux composants enfants. Le state, quant à lui, est utilisé pour stocker des données internes au composant qui peuvent changer au fil du temps. La gestion appropriée des props et du state est cruciale pour créer des applications React efficaces et réactives.
Exemple d'Utilisation de Props
import React from 'react';
function Bienvenue(props) {
return <h1>Bonjour, {props.nom}</h1>;
}
function App() {
return (
<div>
<Bienvenue nom="Sara" />
<Bienvenue nom="Cahal" />
<Bienvenue nom="Edite" />
</div>
);
}
export default App;
Hooks : useState et useEffect
Les Hooks sont des fonctions introduites dans React 16.8 qui permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe. useState est utilisé pour gérer l'état local dans les composants fonctionnels, tandis que useEffect permet de gérer les effets de bord tels que les abonnements ou les mises à jour du DOM.
Exemple de Hook useState
import React, { useState } from 'react';
function ListeTaches() {
const [taches, setTaches] = useState([]);
const [input, setInput] = useState('');
const ajouterTache = () => {
if (input.trim()) {
setTaches([...taches, input]);
setInput('');
}
};
return (
<div>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<button onClick={ajouterTache}>Ajouter Tâche</button>
<ul>
{taches.map((tache, index) => (
<li key={index}>{tache}</li>
))}
</ul>
</div>
);
}
export default ListeTaches;
Exemple de Hook useEffect
import React, { useState, useEffect } from 'react';
function ExampleEffect() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `Vous avez cliqué ${count} fois`;
}, [count]);
return (
<div>
<p>Vous avez cliqué {count} fois</p>
<button onClick={() => setCount(count + 1)}>
Cliquez-moi
</button>
</div>
);
}
export default ExampleEffect;
Gestion des Formulaires avec React
La gestion des formulaires est une fonctionnalité essentielle dans de nombreuses applications web. React permet de créer des formulaires contrôlés où les entrées des utilisateurs sont gérées par l'état du composant, offrant ainsi un contrôle total sur les données saisies.
Exemple de Gestion de Formulaire Contrôlé
import React, { useState } from 'react';
function FormulaireNom() {
const [valeur, setValeur] = useState('');
const handleChange = (event) => {
setValeur(event.target.value);
};
const handleSubmit = (event) => {
alert(\`Le nom a été soumis : \${valeur}\`);
event.preventDefault();
};
return (
<form onSubmit={handleSubmit}>
<label>
Nom :
<input type="text" value={valeur} onChange={handleChange} />
</label>
<input type="submit" value="Envoyer" />
</form>
);
}
export default FormulaireNom;
Routage avec React Router
React Router est une bibliothèque standard pour gérer le routage dans les applications React à page unique. Elle permet de définir des routes et de naviguer entre différentes vues sans recharger la page, offrant ainsi une expérience utilisateur fluide.
Exemple Simple avec React Router
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
function Accueil() {
return <h2>Page d'Accueil</h2>;
}
function Apropos() {
return <h2>Page À Propos</h2>;
}
function App() {
return (
<Router>
<div>
<nav>
<Link to="/">Accueil</Link>
<Link to="/apropos">À Propos</Link>
</nav>
<Switch>
<Route path="/" exact component={Accueil} />
<Route path="/apropos" component={Apropos} />
</Switch>
</div>
</Router>
);
}
export default App;
Composants de Plus Haut Ordre (HOC)
Les Composants de Plus Haut Ordre sont des techniques avancées dans React pour réutiliser la logique des composants. Un HOC est une fonction qui prend un composant et retourne un nouveau composant enrichi avec des fonctionnalités supplémentaires.
Exemple de HOC avec Logging
import React from 'react';
const withLogging = (WrappedComponent) => {
return class extends React.Component {
componentWillMount() {
console.log('Le composant va monter');
}
componentDidMount() {
console.log('Le composant a monté');
}
render() {
return <WrappedComponent {...this.props} />;
}
}
};
// Utilisation
const MonComposant = (props) => <div>Bonjour, {props.nom}</div>;
const ComposantAmeliore = withLogging(MonComposant);
export default ComposantAmeliore;
Exemples Pratiques
1. Compteur (Counter)
Ce composant illustre l'utilisation de useState pour gérer l'état d'un compteur.
import React, { useState } from 'react';
function Compteur() {
const [compte, setCompte] = useState(0);
return (
<div>
<p>Vous avez cliqué {compte} fois</p>
<button onClick={() => setCompte(compte + 1)}>
Cliquez-moi
</button>
</div>
);
}
export default Compteur;
2. Horloge (Clock)
Un exemple de composant de classe qui affiche l'heure actuelle et met à jour l'heure toutes les secondes.
import React, { Component } from 'react';
class Horloge extends Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}
componentDidMount() {
this.timerID = setInterval(
() => this.tic(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tic() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Bonjour, monde !</h1>
<h2>Il est {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
export default Horloge;
3. Liste de Tâches (Todo List)
Ce composant fonctionnel utilise des hooks pour gérer une liste de tâches.
import React, { useState } from 'react';
function ListeTaches() {
const [taches, setTaches] = useState([]);
const [input, setInput] = useState('');
const ajouterTache = () => {
if (input.trim()) {
setTaches([...taches, input]);
setInput('');
}
};
return (
<div>
<input
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<button onClick={ajouterTache}>Ajouter Tâche</button>
<ul>
{taches.map((tache, index) => (
<li key={index}>{tache}</li>
))}
</ul>
</div>
);
}
export default ListeTaches;
4. Gestion de Formulaire
Un exemple de formulaire contrôlé où les entrées de l'utilisateur sont gérées par l'état du composant.
import React, { useState } from 'react';
function FormulaireNom() {
const [valeur, setValeur] = useState('');
const handleChange = (event) => {
setValeur(event.target.value);
};
const handleSubmit = (event) => {
alert(\`Le nom a été soumis : \${valeur}\`);
event.preventDefault();
};
return (
<form onSubmit={handleSubmit}>
<label>
Nom :
<input type="text" value={valeur} onChange={handleChange} />
</label>
<input type="submit" value="Envoyer" />
</form>
);
}
export default FormulaireNom;
Table Récapitulative des Composants Clés
| Composant | Description | Type |
|---|---|---|
| Compteur | Un composant fonctionnel utilisant useState pour gérer un compteur. |
Fonctionnel |
| Horloge | Un composant de classe affichant l'heure actuelle avec mise à jour toutes les secondes. | Classe |
| Liste de Tâches | Un composant fonctionnel utilisant des hooks pour gérer une liste de tâches. | Fonctionnel |
| Formulaire Nom | Un formulaire contrôlé où les entrées utilisateur sont gérées par l'état. | Fonctionnel |
| Composant Amélioré | Un composant enrichi avec un HOC pour ajouter des fonctionnalités de journalisation. | HOC |
Conclusion
ReactJS est une bibliothèque puissante qui permet de créer des interfaces utilisateur interactives et dynamiques grâce à une architecture basée sur les composants. Que vous choisissiez d'utiliser des composants fonctionnels ou de classe, la maîtrise des concepts tels que les props, le state, et les Hooks est essentielle pour développer des applications efficaces. De plus, des outils comme React Router et les Composants de Haut Niveau offrent des solutions avancées pour gérer le routage et la réutilisation de la logique dans vos projets React.
Références
Last updated February 14, 2025