On change d’univers pour passer du côté Développement Front-End. Si PostgreSQL est ton entrepôt de données, ReactJS (ou simplement React) est l’outil qui permet de construire l’étalage du magasin : l’interface utilisateur (UI).
Créé par Facebook (Meta) en 2013, ce n’est pas un langage de programmation, mais une bibliothèque JavaScript spécialisée dans la création d’interfaces web fluides, rapides et interactives.
Architecture et Fonctionnement de React
La magie de React repose sur une idée simple : au lieu de recharger toute la page web à chaque clic, on ne met à jour que la petite partie qui a changé.
1. Les Composants (Le système de LEGO)
Tout dans React est un Composant. Une page web est découpée en petits morceaux indépendants et réutilisables.
- Exemple : Un bouton, une barre de recherche ou une carte de produit sont des composants. Tu les crées une fois et tu les emboîtes partout.
2. Le Virtual DOM (Le cerveau)
C’est le secret de la rapidité de React.
- Normalement, modifier une page web (le DOM réel) est lent.
- React crée une copie légère de la page en mémoire : le Virtual DOM.
- Quand une donnée change, React compare la copie avec la réalité, calcule la différence minimale, et ne met à jour que l’élément strictement nécessaire sur ton écran.
Les Concepts Clés (Le vocabulaire React)
Pour comprendre comment React “pense”, il faut maîtriser ces trois termes :
1. Le JSX (Le mélange HTML + JS)
React utilise une syntaxe appelée JSX. Elle permet d’écrire du HTML directement au milieu du code JavaScript. C’est très visuel et pratique pour les développeurs.
Exemple :
const element = <h1>Bonjour, monde !</h1>;
2. Les Props (Les paramètres)
Les Props (propriétés) sont les données que l’on passe d’un composant parent à un composant enfant. C’est comme donner des instructions à un ouvrier.
- Exemple : Tu as un composant
Bouton, et tu lui passes une propcouleur="bleu".
3. Le State (L’état interne)
Le State est la mémoire locale d’un composant. Si le State change (ex: un compteur qui augmente), React redessine automatiquement le composant.
- On utilise souvent des Hooks comme
useStatepour gérer cela.
Lexique technique React
| Terme | Définition |
| SPA | Single Page Application. Un site qui ne recharge jamais la page (ex: Gmail, Facebook). |
| Hook | Fonction spéciale (ex: useEffect) permettant d’utiliser des fonctionnalités de React dans des composants simples. |
| Babel | Un outil qui traduit le code React moderne (JSX) en JavaScript classique lisible par tous les navigateurs. |
| NPM / Yarn | Les gestionnaires de paquets utilisés pour installer React et ses extensions. |
| Props Drilling | Le fait de faire passer une donnée à travers trop de composants (problème que l’on règle avec Redux ou Context API). |
Quel rapport entre React et la Cybersécurité / Système ?
- XSS (Cross-Site Scripting) : Par défaut, React protège contre les injections de scripts. Il “nettoie” (escape) automatiquement les données avant de les afficher. C’est un énorme avantage sécuritaire par rapport au JavaScript classique.
- Performance Client : Comme le travail de rendu se fait dans le navigateur de l’utilisateur (Client-Side Rendering), cela décharge tes serveurs (moins de CPU consommé côté serveur).
- Déploiement : Un admin système doit savoir que React produit des fichiers “statiques” (HTML/JS/CSS). On peut les héberger très facilement sur un serveur Nginx, un bucket S3, ou même via un conteneur Docker.
Résumé visuel
- HTML/CSS classique : On reconstruit toute la maison pour changer une ampoule.
- ReactJS : On dévisse l’ampoule et on en met une nouvelle sans toucher au reste de la maison.
