1°/ Principes de React

1.1°/ À l'origine

React est sorti en 2011 un peu après AngularJS (NB : Angular v2 est relativement différent).

Contrairement à Angular, React n'est pas un environnement de développement MVC : c'est juste une bibliothèque permettant de gérer la partie vue d'une application.

React se base sur la définition de composants réutilisables et composables, chacun pouvant avoir un état local, transmissible à ses descendants (principes des props), et pouvant également émettre des événements personnalisés.

L'objectif est d'utiliser ces composants pour créer une SPA qui intègre la bibliothèque ReactJS pour gérer leur création et leur "montage" dans le DOM.

Pour des raisons de performances, notamment lors de changements dans l'état des composants, React utilise un DOM virtuel.

Au final, on s'aperçoit que Vue.js n'a rien inventé puisque ce sont les mêmes principes fondamentaux que React, mais implémentés différemment.

Les points de dissemblance les plus remarquables avec Vue.js sont :

• Dans la définition du composant : on écrit une classe qui hérite de React.Component et qui contient aussi bien les données locales, que les fonctions de contrôle et la fonction qui crée le template (cf. point suivant).
• Dans la façon d'écrire le template d'un composant : React utilise un langage nommé JSX, qui est du HTML avec des inclusions de JS entre { }.

Cette façon d'écrire les composants a l'avantage d'empaqueter toute la définition du composant dans une seule classe, même si cette dernière peut bien entendu importer des fonctionnalités se trouvant dans d'autres modules.

En revanche, la définition d'une classe apporte son lot de "contraintes" et "pièges" dus aux différentes façons de définir et appeler des fonctions en JS.

Pour résumer, il faut connaître parfaitement comment se comporte le mot-clé this selon le contexte d'exécution et ce n'est pas simple pour un débutant.

Il y a aussi des contraintes sur la façon de modifier l'état local du composant, ainsi que toutes les subtilités liées à JSX.

C'est pourquoi React n'est pas d'un abord aussi aisé que Vue.js, qui a bien moins de contraintes et pièges.

Fort heureusement, on peut se débrouiller dans beaucoup de cas en suivant des "recettes de cuisine", même si on ne comprend pas ce que l'on écrit.

NB : Ces problèmes sont illustrés dans la démonstration.

Voici un exemple de composant affichant un titre issu d'une props, et un bouton permettant d'incrémenter une valeur.

import React from "react";

class MyCounter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({ counter: this.counter + 1 });
    }

    render() {
        return (
            <div>
                <p>{this.props.title}</p>
                <button onClick={this.handleClick}>{this.counter}</button>
            </div>
        );
    }
}