Avant de commencer

Comme dans l’article précédent je vous recommande la documentation officielle pour plus de détails sur les concepts de state et props, je vais présenter ici le minimum nécessaire pour démarrer, tout en restant orienté sur la pratique.

Cas pratique : le Compteur

On va maintenant créer un composant qui permet d’incrémenter et d’afficher un numéro quand l’utilisateur clic sur un bouton.
à la fin notre compteur ressemblera à ça :

Concepts importants : State et Props

Un composant React peut avoir besoin des states et props, pour faire simple leur rôle conciste à :

1. State: contenir toutes les données représentant le comportement du composant
2. props: Les données passée en entrée durant sa création, elle sont passée en tant que propriétés.

Code du compteur

Vous trouverez ci dessous une première implémentation simple du compteur, notez que le compteur n’a pas besoin de donnée en entrée, donc on ne lui fournit aucune prop.

// src/Counter.jsx
import React from "react";

export default class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
      nb: 0
    };
  }

  increment() {
    this.setState({
      nb: this.state.nb + 1
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.nb}</h1>
        <button onClick={() => this.increment()}>click me</button>
      </div>
    );
  }
}

Deux points importants à noter ici :

• le composant contient un state interne dans lequel on met la variable nb, responsable de l’affichage du nombre de clics
• quand on clic sur le bouton, on utilise this.setState pour mettre en place un nouveau état avec la variable incrémentée, l’utilisation de setState déclenche la ré-exécution de la fonction render qui permet de mettre à jour le composant.

Diviser le composant

On va supposer qu’on veuille Utiliser un composant spéciale pour afficher le numéro, pour créer ce composant on a deux options :

• Un Composant React complet ( une class qui étends React.Component ).
• Une fonction pure.

Dans notre cas l’afficheur n’a besoin ni de stocker d’état interne, ni de faire un traitement spécial selon l’étape du cycle de vie du composant ( donc on a pas besoin de componentWillMount componentDidMount … )

On commence donc par définir ce que notre composant va prendre en entrée pour décider des props, on va ainsi configurer deux choses :

1. Le numéro à afficher via la prop numberToDisplay
2. Sa couleur via la prop textColor

La structure du composant ressemblera donc à ça :

On a déjà une première idée de comment notre composant sera monté dans notre application :

<NumberDisplay
    numberToDisplay={25}
    textColor="red"
    />

Et voici l’implémentation du composant, il va ainsi afficher le numéro passé en props avec la couleur définie.

function NumberDisplay(props) {
  const style = {
    color: props.textColor,
    fontSize: "60px"
  };
  return <h1 style={style}>{props.numberToDisplay}</h1>;
}

Après intégration dans le composant du compteur ça donne ça :

// src/Counter.jsx
import React from "react";

export default class Counter extends React.Component {
  constructor() {
    super();
    this.state = {
      nb: 0
    };
  }

  increment() {
    this.setState({
      nb: this.state.nb + 1
    });
  }

  render() {
    return (
      <div>
        <NumberDisplay numberToDisplay={this.state.nb} textColor="red" />
        <button onClick={() => this.increment()}>click me</button>
      </div>
    );
  }
}

Code source

Le code source est disponible sur github au tag suivant Step-2 pour pointer directement sur cette étape.

pour rappel, voici la commande pour choisir un tag avec git :

git checkout Step-2

Suite

Dans le prochaine chapitre on va voir comment gérer le routages dans le navigateur avec React Router 4.