Devriez-vous utiliser React pour votre prochain site Web? –

React a gagné en popularité ces dernières années. Décrite comme «une bibliothèque JavaScript pour la création d’interfaces utilisateur», l’approche déclarative du rendu de React simplifie la construction d’interfaces utilisateur complexes.

React est un outil polyvalent avec une large gamme d’applications, allant des sites Web traditionnels aux applications Web complexes. Il n’y a pas de ligne claire qui définit quand vous devez utiliser React. Au lieu de cela, il existe des indicateurs indicatifs qui peuvent vous aider à évaluer si React pourrait être un bon choix.

Rechercher des composants

Un signe qu’un site pourrait bénéficier de React est si vous prévoyez de réutiliser un grand nombre de composants autonomes. Les éléments d’interface abstraits tels que les contrôles de formulaire et les cartes d’affichage de données sont des candidats de premier ordre pour la conversion en composants React. Cela est particulièrement vrai si vos composants sont susceptibles d’incorporer un comportement personnalisé au-delà de ce que fournit le navigateur.

La nature même de React vous encourage à isoler les aspects réutilisables de votre interface en composants individuels. Les composants sont généralement définis dans leurs propres fichiers source, ce qui facilite la navigation et l’organisation de votre base de code.

import React from "react";
import ReactDOM from "react-dom";
 
class ChildComponent extends React.Component {
 
    render() {
        return <h2>Child Component</h2>;
    }
 
}
 
class DemoComponent extends React.Component {
 
    render() {
        return (
            <div>
                <h1>Demo Component</h1>
                <ChildComponent />
            </div>
        );
    }
 
}
 
ReactDOM.render(<DemoComponent />, document.body);

Les composants peuvent inclure d’autres composants pour permettre la construction rapide d’interfaces utilisateur complexes. Un seul composant peut rendre certaines interfaces utilisateur, appliquer des styles CSS personnalisés et gérer les interactions utilisateur basées sur JavaScript. React utilise un langage de création de modèles personnalisé, JSX, pour vous permettre de créer des interfaces utilisateur composées dans un style similaire au HTML standard.

Rechercher des sections avec état

React excelle dans la gestion des zones de votre interface qui s’affichent différemment en fonction de la valeur d’un état interne. L’idée d ‘«État» peut sembler vague au premier abord. Cependant, il est facile d’identifier les sections avec état de votre site – ce sont normalement des zones qui produisent des modifications dans l’interface utilisateur.

Les exemples incluent la valeur d’une entrée de formulaire, si un bouton bascule est sélectionné et l’état de chargement du contenu chargé dynamiquement. Le contenu lui-même est souvent livré «avec état» – un écran de publication de blog générique affichera les données d’article stockées dans l’état interne du composant.

Dans l’exemple ci-dessous, le texte à l’écran est déterminé par la valeur du demo entrez l’état du composant. Le texte est changé automatiquement toutes les cinq secondes en mettant à jour l’état.

import React from "react";
import ReactDOM from "react-dom";
 
class DemoComponent extends React.Component {
 
    constructor(props) {
        super(props);
 
        this.state = {
 
            demo: 1
 
        };
 
        this.timer = null;
 
        this.updateText = this.updateText.bind(this);
 
    }
 
    componentDidMount() {
        this.timer = setInterval(this.updateText, 5000);
    }
 
    componentWillUnmount() {
        if (this.timer) clearInterval(this.timer);
    }
 
    updateText() {
        this.setState({demo: (this.state.demo + 1)})
    }
 
    render() {
        return <h1>{this.state.demo}</h1>;
    }
 
}
 
ReactDOM.render(<DemoComponent />, document.body);

Essayez de trouver des zones de votre site Web qui doivent changer de manière dynamique. Cela peut être la conséquence d’une action de l’utilisateur, d’un minuteur récurrent ou d’un événement du navigateur (comme la mise hors ligne ou la récupération de nouvelles données d’arrière-plan).

Toute section avec état qui se met à jour régulièrement est susceptible de bénéficier de l’utilisation de React. La gestion transparente de l’état de React fournit une source unique de vérité pour la logique métier de votre site.

Identifier l’interactivité

React peut simplifier la gestion de l’interactivité au sein de votre site Web. La bibliothèque résume les gestionnaires d’événements intégrés de JavaScript afin de fournir une interface unifiée pour répondre aux interactions des utilisateurs.

L’utilisation de React peut être particulièrement intéressante dans le cas de formes complexes. Son approche, basée sur des «composants contrôlés», garantit que l’état interne du formulaire correspond à ce que l’utilisateur voit dans l’interface utilisateur.

import React from "react";
import ReactDOM from "react-dom";
 
class DemoComponent extends React.Component {
 
    constructor(props) {
        super(props);
 
        this.state = {
 
            value: "I'm a text field"
 
        };
 
        this.updateValue = this.updateValue.bind(this);
 
    }
 
    updateValue(e) {
        this.setState({value: e.target.value});
    }
 
    render() {
        return <input onChange={this.updateValue} value={this.state.value} />;
    }
 
}
 
ReactDOM.render(<DemoComponent />, document.body);

En attachant des gestionnaires d’événements aux contrôles de formulaire, vous pouvez mettre à jour l’état d’un composant chaque fois que l’utilisateur modifie la valeur du contrôle, par exemple en tapant dans un champ de texte ou en sélectionnant une option dans un menu déroulant. Ensuite, faites le contrôle value prop (qui correspond au HTML value attribut) renvoie à l’état du composant. Les modifications apportées à l’interface utilisateur et au composant seront désormais reflétées l’une dans l’autre.

Rechercher la manipulation DOM

C’est la règle d’or à prendre en compte pour décider d’utiliser ou non React. Le contenu avec état, l’interactivité de l’utilisateur et les composants de mise à jour dynamique sont tous renvoyés dans le DOM. La manipulation directe du DOM à l’aide des API JavaScript du navigateur est au mieux maladroite et au pire cauchemardesque.

Tout aspect de votre site Web qui nécessite une manipulation approfondie du DOM – ce sont les éléments HTML affichés sur la page – est une source probable de complexité. React peut grandement simplifier ces scénarios. Sa nature basée sur les composants évite l’ennui de l’injection de HTML et de la gestion des liaisons d’événements.

Comme React est déclaratif, vous définissez à quoi le DOM doit ressembler dans un composant render() méthode. La bibliothèque effectue ensuite le dur travail de création, de suppression et de mélange d’éléments HTML pour produire la structure DOM que vous avez «déclarée».

En interne, React maintient son propre «DOM virtuel» qui garantit que l’ensemble de la procédure s’exécute de manière performante. Cela permet à la bibliothèque d’effectuer le plus petit nombre de rendus possible, minimisant les frais généraux normalement associés à la manipulation DOM.

Conclusion

La popularité de React provient de la simplification significative de la gestion des états et de la manipulation DOM qu’elle fournit. Sa nature déclarative permet à des applications Web très complexes d’être construites de la même manière que les pages HTML de base, les développeurs n’ayant besoin que de définir à quoi devrait ressembler la structure DOM au moment actuel.

Comme pour toute bonne chose, il y a aussi des inconvénients. L’utilisation de React augmentera la taille de téléchargement de votre site Web. Cela ajoute également une dépendance à l’égard de JavaScript, ce qui pourrait empêcher certains utilisateurs d’accéder à votre contenu. Il y a beaucoup plus de points de défaillance qu’une solution HTML, CSS et JavaScript «pure».

Ces limitations signifient que React n’est peut-être pas le meilleur choix pour les sites Web statiques simples. Les sites avec peu d’interactivité et de manipulation DOM limitée ont tendance à mieux s’en tenir à une solution plus légère. Les avantages de React commencent vraiment à porter leurs fruits sur les sites qui possèdent un état interne considérable. React améliore la productivité des développeurs, la maintenabilité de la base de code et les performances globales du site lorsqu’il est utilisé avec précaution sur des sites interactifs centrés sur les données.