React.js

React.js (souvent appelé React) est une bibliothèque JavaScript open source développée par Facebook (Meta) pour créer des interfaces utilisateur dynamiques et performantes.

Voir les discussions
React.js

Prérequis

Javascript image
Javascript

JavaScript (souvent abrégé JS) est le la...

Prochaine étape

Inertia.js image
Inertia.js

Inertia.js est un framework moderne pour...

À propos de React.js

React permet de construire des interfaces modernes en divisant la page en composants indépendants. Chaque composant gère sa propre logique et son affichage, ce qui facilite la création d’applications web complexes.

L’un des atouts majeurs de React est son Virtual DOM, un système qui met à jour uniquement les éléments nécessaires dans la page, améliorant ainsi les performances.

React est utilisé par de nombreuses grandes entreprises comme Meta, Netflix, Airbnb, WhatsApp, et s’intègre parfaitement avec d’autres outils modernes tels que Vite, Next.js, ou TypeScript.

Installation rapide

Pour créer une nouvelle application React, exécutez dans votre terminal :

1npx create-react-app mon-projet

Ou, avec Vite pour un démarrage plus rapide :

1npm create vite@latest mon-projet -- --template react

Ensuite, lancez le serveur de développement :

1npm run dev

Votre application sera disponible à l’adresse http://localhost:5173.

Exemple de composant de base

1function Bonjour() {
2  return <h1>Bonjour depuis React !</h1>;
3}
4 
5export default Bonjour;

Ce code définit un composant simple qui affiche un titre. Pour l’utiliser, importez-le dans votre fichier principal (App.jsx) :

 1import Bonjour from './Bonjour';
 2 
 3function App() {
 4  return (
 5    <div>
 6      <Bonjour />
 7    </div>
 8  );
 9}
10 
11export default App;

Gestion de l’état avec useState

React utilise des hooks pour gérer l’état et le cycle de vie des composants.

 1import { useState } from 'react';
 2 
 3function Compteur() {
 4  const [compte, setCompte] = useState(0);
 5 
 6  return (
 7    <div>
 8      <h2>Compteur : {compte}</h2>
 9      <button onClick={() => setCompte(compte + 1)}>Incrémenter</button>
10      <button onClick={() => setCompte(0)}>Réinitialiser</button>
11    </div>
12  );
13}
14 
15export default Compteur;

Gestion des effets avec useEffect

useEffect permet d’exécuter du code lorsqu’un composant est monté, mis à jour ou démonté.

 1import { useState, useEffect } from 'react';
 2 
 3function Heure() {
 4  const [heure, setHeure] = useState(new Date().toLocaleTimeString());
 5 
 6  useEffect(() => {
 7    const interval = setInterval(() => {
 8      setHeure(new Date().toLocaleTimeString());
 9    }, 1000);
10 
11    return () => clearInterval(interval);
12  }, []);
13 
14  return <p>Heure actuelle : {heure}</p>;
15}
16 
17export default Heure;

Exemple complet d’application

 1import { useState } from 'react';
 2 
 3function App() {
 4  const [nom, setNom] = useState('');
 5 
 6  return (
 7    <div style={{ textAlign: 'center', marginTop: '50px' }}>
 8      <h1>Bienvenue sur Larafrique</h1>
 9      <input
10        type="text"
11        placeholder="Entrez votre nom"
12        value={nom}
13        onChange={(e) => setNom(e.target.value)}
14      />
15      <p>{nom && `Bonjour, ${nom} !`}</p>
16    </div>
17  );
18}
19 
20export default App;

Bonnes pratiques et outils

  • Découper l’interface en petits composants réutilisables.
  • Utiliser les hooks (useState, useEffect, useContext, etc.) plutôt que les classes.
  • Gérer les données globales avec des outils comme Redux, Zustand ou React Query.
  • Utiliser TypeScript pour plus de sécurité et de lisibilité.
  • Optimiser les performances avec React.memo et la fonction useCallback.
  • Déployer facilement sur des plateformes comme Vercel, Netlify ou Render.

Exemple d’intégration d’API

 1import { useEffect, useState } from 'react';
 2 
 3function ListeUtilisateurs() {
 4  const [utilisateurs, setUtilisateurs] = useState([]);
 5 
 6  useEffect(() => {
 7    fetch('https://jsonplaceholder.typicode.com/users')
 8      .then((res) => res.json())
 9      .then((data) => setUtilisateurs(data));
10  }, []);
11 
12  return (
13    <div>
14      <h2>Liste des utilisateurs</h2>
15      <ul>
16        {utilisateurs.map((u) => (
17          <li key={u.id}>{u.name}</li>
18        ))}
19      </ul>
20    </div>
21  );
22}
23 
24export default ListeUtilisateurs;

React.js est aujourd’hui l’une des technologies les plus utilisées pour le développement front-end. Sa simplicité, sa modularité et sa puissance en font un choix incontournable pour la création d’interfaces web modernes, rapides et évolutives.