Introduction à React

⚠ Ce post a été rédigé en 2016. Certaines choses ont évolué depuis…

React est une bibliothèque javascript permettant de construire des interfaces graphiques composables.

La modélisation des interfaces graphiques d’une application au cours du temps est un sujet complexe. Il est, en effet, difficile de suivre l’état d’une application, après une série d’interactions utilisateur et/ou externes. Dans un SPA, nous ne pouvons plus compter sur des rechargements entiers d’une page web pour garder une interface synchronisée et cohérente.

L’idée

La solution de React est de décrire “à quoi” l’application doit ressembler à n’importe quel instant donné → construction de l’UI de manière déclarative. Ce fonctionnement nous donne l’impression que React redessine entièrement l’interface à chaque update (uniquement une impression → cf DOM virtuel) Cela rend la conception et le développement d’application considérablement plus simple et nous permet de garder très facilement l’interface à jour avec un modèle de données. L’élaboration de ces interfaces se fait à base de composants React.

On pourrait assimiler un composant React à une fonction. C’est d’ailleurs l’une des 2 manières possibles d’écrire une composant React.

L’API des composants est très simple. Un composant peut posséder :

• un state
• des propriétés : les données d’entrées du composant → props
• Une méthode render chargée du rendu du composant, appelée lorsque son state ou une de ses props changent.
• Des méthodes liées au cycle de vie du composant componentDidMount, componentWillReceiveProps etc…)

Écriture avec les classes ES6

Ci-dessous un composant React ayant pour seule vocation d’afficher la propriété user. Si user change, React redessine la partie du composant ayant changé.

class Bonjour extends React.Component {
  render() {
    return <div>Bonjour {this.props.user}</div>
  }
}

Écriture sous forme de fonction

Ce composant peut aussi être écrit sous la forme d’une fonction appelée functional component.

const Bonjour = (props) => (
  <div>Bonjour {this.props.user}</div>
)

Ce type de composant ne possède pas de state (cf. Hooks) pas d’instance ni de méthodes liées au cycle de vie d’un composant React. Il ne s’agit que d’une simple fonction retournant un résultat en fonction de ses arguments (les props)

Dessiner un composant dans un nœud du DOM

ReactDOM.render(
  <Bonjour user="Vincent" />,
  document.getElementById('root')
)

Pour dessiner le composant dans le DOM il suffit d’appeler la méthode ReactDOM.render avec ledit Composant et le nœud du DOM où l’on souhaite le dessiner.

JSX

Le code “XML like” que retourne la méthode render s’appelle du JSX et est un sucre syntaxique permettant de créer les nœuds React. L’utilisation du JSX n’est pas obligatoire. Voici la correspondance du code JSX :

<Bonjour user="Vincent" />

Avec le code javascript équivalent :

React.createElement('Bonjour', {
  user: 'Vincent'
});

DOM Virtuel

Lorsque nous écrivons un composant React, nous décrivons à quoi l’UI ressemble en fonction des props. Même si React donne le sentiment au développeur de repeindre entièrement le DOM à chaque update, il implémente, en réalité, un DOM virtuel qui est une représentation interne en javascript du DOM. Voici un schéma illustrant le processus :

Lorsque le modèle de données change la méthode render du composant renvoie un objet correspondant à la représentation interne du DOM virtuel. React compare ensuite ce nouveau DOM virtuel avec le précédent (algorithme de diff interne), et met à jour le vrai DOM en appliquant un série d’opérations optimisées. Ce DOM virtuel permet donc d’optimiser les accès au “vrai DOM”, les modifications sont appliquées en une fois.

Références

• React - https ://facebook.github.io/react