Blog
React, la puissante librairie JS from Facebook 🚀

React, la puissante librairie JS from Facebook 🚀

15 octobre 2023
•
Guillaume Ducuing - DĂ©veloppeur web front-end React | NextJS | PrismicGuillaume Ducuing

React s'impose comme un acteur clé en front-end. Que vous soyez un développeur aguerri ou un débutant, il est crucial de comprendre les atouts et les limites de cette bibliothèque JavaScript, tout en explorant ses fonctionnalités essentielles, notamment les hooks.

React, librairie javascript de Facebook

React.js, la librairie puissante from Facebook

Les fondamentaux de React

React, créé par Facebook, est une bibliothèque open-source qui facilite la création d'interfaces utilisateur interactives. Elle se base sur un modèle de composants réutilisables. Au lieu de concevoir des pages web entières, les développeurs construisent des composants indépendants, de la plus petite unité (boutons, formulaires) aux éléments plus complexes (panneaux de contrôle, widgets).

React codeSource : Unsplash.com

Virtual DOM

L'une des caractéristiques les plus marquantes de React est le Virtual DOM. Au lieu de manipuler directement le Document Object Model (DOM) du navigateur, React crée une représentation virtuelle du DOM. Lorsqu'un changement est effectué, React compare le Virtual DOM précédent avec la nouvelle version et met à jour le DOM réel uniquement lorsque cela est nécessaire. Cela permet d'optimiser les performances en réduisant le nombre de mises à jour du DOM.

Quelques chiffres

Parmi les 3 librairies/framework les plus populaire en javascript (Angular, React et Vue), React est de loin la plus téléchargé. D'après npm-stat.com en décembre 2023 voici les chiffres :
- Angular : 441 171 téléchargements par semaine.
- React : 21 286 476 téléchargements par semaine.
- Vue : 4 364 740 téléchargements par semaine.

Download per week react angular vueSource : npm-stat.com

Les avantages de React

  • 1. Composants rĂ©utilisables

Les composants de React sont autonomes et réutilisables. Cette modularité facilite la maintenance et la réutilisation du code. Les composants peuvent être utilisés dans tout le projet, favorisant ainsi la cohérence de l'interface utilisateur.

  • 2. Une communautĂ© active

La communauté React est vaste et active. Elle offre un écosystème riche de bibliothèques tierces, d'outils et de ressources d'apprentissage. Que vous ayez besoin de gérer l'état, d'ajouter des animations ou de créer des interfaces utilisateur complexes, vous trouverez probablement une solution préexistante.

  • 3. SEO-friendly

Les applications web React peuvent être optimisées pour le référencement naturel grâce à des bibliothèques telles que Next.js. Le rendu côté serveur permet aux moteurs de recherche d'indexer facilement le contenu, améliorant ainsi la visibilité de l'application.

Les inconvénients de React

  • 1. Courbe d'apprentissage

React peut sembler complexe pour les débutants. La création de composants, la gestion de l'état avec le concept de "state", et l'utilisation de JSX demandent du temps pour être maîtrisés. Cependant, cette courbe d'apprentissage est une étape incontournable pour exploiter pleinement les avantages de React.

  • 2. ComplexitĂ© des projets importants

Les applications React à grande échelle peuvent devenir complexes. La gestion de l'état, les requêtes réseau, le routage et la manipulation des données peuvent entraîner un code difficile à maintenir. Une structure solide et une discipline de développement sont essentielles.

  • 3. JavaScript lourd

React, utilisant JavaScript, peut entraîner des applications plus lourdes en termes de taille de fichier et de temps de chargement. La fragmentation du code doit être évitée en utilisant des techniques telles que le code splitting pour améliorer les performances.

  • 4. Multiples choix

L'écosystème React offre de nombreuses options pour la gestion de l'état, le routage, les tests, etc. Cette abondance de choix peut rendre la sélection des meilleures solutions difficile, ce qui peut conduire à une fragmentation du code.

React codeSource : unsplash.com

L'exploration des Hooks de React

Maintenant, plongeons dans l'une des fonctionnalités les plus puissantes de React : les hooks. Les hooks sont des fonctions qui permettent aux composants fonctionnels de gérer l'état et les effets, ouvrant la voie à de nouvelles possibilités de développement. Voici quelques-uns des hooks les plus couramment utilisés :

1. useState

Le hook useState permet de gérer l'état local dans un composant fonctionnel. Il vous permet de déclarer des variables d'état et de les mettre à jour, ce qui déclenche le rendu du composant lorsqu'elles changent.

import { useState } from 'react';

const Counter = () => {
const [count, setCount] = useState(0);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

export default Counter;

2. useEffect

Le hook useEffect est utilisé pour effectuer des effets secondaires dans un composant. Il peut être utilisé pour gérer des appels réseau, des mises à jour du DOM, et plus encore, en réponse aux changements de l'état.

import { useState, useEffect } from 'react';

const DataFetcher = () => {

const [data, setData] = useState(null);

useEffect(() => {

// Fetch data d'une API

fetch('https://api.example.com/data')

.then(response => response.json())

.then(result => setData(result))

.catch(error => console.error('Error fetching data:', error));

}, []); // Un tableau de dépendances vide signifie que cet effet s'exécute une fois après le rendu initial

return (

<div>

<h2>Data:</h2>

{data ? <p>{data}</p> : <p>Loading...</p>}

</div>

);

}

export default DataFetcher;

3. useRef

Le hook useRef permet de créer des références aux éléments du DOM ou à des valeurs persistantes, sans déclencher de nouveaux rendus du composant.

import { useRef, useEffect } from 'react';

const FocusInput = () => {

const inputRef = useRef(null);

useEffect(() => {

// Focus sur l'élément d'entrée lors du montage du composant

inputRef.current.focus();

}, []);

return <input ref={inputRef} type="text" placeholder="Type here" />;

}

export default FocusInput;

4. useContext

Le hook useContext permet d'accéder à un contexte partagé dans l'arborescence des composants. Cela facilite la gestion des données partagées entre les composants, évitant ainsi de devoir transmettre des propriétés de composant en composant.

5. useReducer

Le hook useReducer est utile pour gérer des états plus complexes en combinant useState et useEffect. Il permet de centraliser la gestion de l'état d'un composant et d'effectuer des mises à jour plus contrôlées.

Il existe encore plusieurs hooks ainsi que la possibilité de faire des custom Hooks ! Je vous laisse découvrir la doc de React pour ca !

Conclusion

Le choix de React pour un projet de développement web est semblable à planifier un voyage. Vous explorerez un monde d'avantages, tels que des composants réutilisables, le Virtual DOM, une communauté active et le support du SEO. Cependant, il est essentiel de prendre en compte la courbe d'apprentissage, la complexité potentielle, la charge en JavaScript et l'abondance de choix avant de vous lancer.

Les hooks de React sont un atout majeur pour simplifier la gestion de l'état et des effets dans les composants fonctionnels. Ils ouvrent un univers de possibilités pour créer des applications web dynamiques et interactives. Je vous invite à découvrir les projets que j'ai réalisés avec React et son super framework Next.js !

Setup devSource : unsplash.com