React pour JavaScript (Node.js) : guide complet avec exemples

Qu'est-ce que React et pourquoi en a-t-on besoin ?

React est une bibliothèque JavaScript déclarative, efficace et flexible, open-source, destinée à la création d'interfaces utilisateur (UI). Développée par les ingénieurs de Facebook (aujourd'hui Meta) en 2013, elle est depuis devenue l'une des technologies front-end les plus populaires au monde. React permet aux développeurs de créer des applications web complexes, interactives et évolutives en décomposant l'interface en composants indépendants et réutilisables.

Pourquoi React est-il nécessaire ?

\n
• Approche par composants : React construit l'UI à partir de blocs isolés (composants), chacun gérant son propre état. Cela simplifie le développement, les tests et la maintenance du code.
\n
• Déclarativité : Vous décrivez à quoi l'UI doit ressembler pour chaque état de l'application, et React met à jour et restitue efficacement uniquement les composants qui ont changé. Cela rend le code plus prévisible et plus facile à déboguer.
\n
• DOM virtuel (Virtual DOM) : React utilise une copie légère du DOM réel (Document Object Model). Lorsque l'état de l'application change, React met d'abord à jour le DOM virtuel, puis le compare à la version précédente (diffing) et applique un ensemble minimal de modifications au DOM réel. Cela améliore considérablement les performances, en particulier dans les applications avec des mises à jour fréquentes.
\n
• Communauté et écosystème immenses : React possède l'une des plus grandes communautés de développeurs, ce qui signifie une abondance de solutions prêtes à l'emploi, de bibliothèques, d'outils (React Router, Redux, Next.js, Gatsby) et de supports d'apprentissage.
\n
• Polyvalence : React peut être utilisé non seulement pour les applications web, mais aussi pour les applications mobiles (React Native), de bureau (Electron) et même VR (React 360).
\n

React convient à des projets de toute envergure : des simples applications monopages (SPA) aux systèmes d'entreprise complexes et aux réseaux sociaux.

Installation de React (npm)

Pour travailler avec React, vous aurez besoin de Node.js (version 14 ou supérieure) et d'un gestionnaire de paquets npm (ou yarn). Le moyen le plus simple de démarrer un nouveau projet est d'utiliser l'outil officiel Create React App.

# Installation globale de Create React App (facultatif)\nnpm install -g create-react-app\n\n# Création d'un nouveau projet nommé my-app\nnpx create-react-app my-app\n\n# Accès au répertoire du projet\ncd my-app\n\n# Lancement du serveur de développement\nnpm start

Après avoir exécuté ces commandes, votre navigateur s'ouvrira automatiquement à l'adresse http://localhost:3000 avec l'application React en cours d'exécution.

Important : npx est un outil qui exécute des paquets sans les installer globalement. Si vous avez une ancienne version de npm (< 5.2), utilisez npm install -g create-react-app, puis create-react-app my-app.

Méthode alternative (installation manuelle) :

# Créez un dossier de projet et initialisez npm\nmkdir my-react-app && cd my-react-app\nnpm init -y\n\n# Installez React et ReactDOM\nnpm install react react-dom\n\n# Installez Babel pour la transpilation JSX et Webpack pour le bundling (nécessite configuration)\nnpm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli html-webpack-plugin

Cependant, pour les débutants, il est fortement recommandé d'utiliser Create React App, car il prend en charge toute la configuration complexe du bundler (Webpack, Babel).

Démarrage rapide avec un exemple de code

Après avoir créé le projet avec Create React App, ouvrez le fichier src/App.js. C'est le composant principal de votre application. Créons une simple application "Hello, World!" avec un bouton qui change le titre.

// src/App.js\nimport React, { useState } from 'react';\nimport './App.css';\n\nfunction App() {