Récap React

Un petit retour sur React

---

React rocks!

La programmation déclarative, c'est magique !

On décrit notre interface comme elle doit être à chaque instant, plutôt que décrire comment la modifier d'état en état.

• L'interface obtenue est prédictible.

• Un code facile à débuguer.

Comment ça marche ?

import React from 'react';
import { render } from 'react-dom';

import App from 'src/components/App';

render(<App />, document.getElementById('root'));

render

• Méthode retournant le JSX à rendre dans le DOM
• Les primitives peuvent être récupérées avec ref

---

Composants

Stateless component

import React from 'react';

const Post = ({ title, content }) => (
 <div className="post">
   <h1 className="post-title">{title}</h1>
   <div className="post-content">{content}</div>
 </div>
);

export default Post;

Uncontrolled component

const Field = ({ value }) => {
  return (
    <input type="text" defaultValue={value} />
  );
};

---

State

State ?

• définir des données dans le composant
• si ces données changent, React refait le rendu du composant

refait le JSX du composant et des composants imbriqués

const [message, setMessage] = useState('Bonjour');
//        1          2                     3

// 1. La donnée
// 2. Le moyen de modifier la donnée
// 3. La valeur de départ de la donnée

Mise en place

On récupère useState depuis react

import React, { useState } from 'react';

State component

import React, { useState } from 'react';

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

  const increment = () => { setCount(count + 1) };

  return (
    <div className="app">
      <div className="count">{count}</div>
      <button onClick={increment}>Incrémenter</button>
    </div>
  );
};

Controlled component

const Field = () => {
  const [value, setValue] = useState('');

  const handleChange = (evt) => { 
    setValue(evt.target.value);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
    />
  );
};

---

Effets

Ça veut dire quoi ?

Exécuter un bout de code (une fonction) à certains moments dans la vie de nos composants.

• à leur création : mount
  • chargement de données initiales (ajax)
  • poser des écouteurs d'événements
  • manipulation du DOM
• à leur mise à jour : update
  • manipulation du DOM, timers
  • impacter des sous composants
• à leur destruction : unmount
  • supprimer des timers (clearTimeout)
  • supprimer des écouteurs (removeEventListeners)

Mise en place

On récupère useEffect depuis react

import React, { useEffect } from 'react';

Différents cas

// au chargement initial et lors d'évolutions
useEffect(() => {
  console.log('Tout le temps, à chaque rendu');
});

// uniquement au chargement initial
useEffect(() => {
  console.log('Juste au rendu initial');
}, []);

// uniquement si la variable `info` change
useEffect(() => {
  console.log('Au rendu initial et si `info` change');
}, [info]); 

Le 2ème argument [..] est appelé le tableau de dépendances de l'effet.

Si les valeurs de ce tableau changent, l'effet est relancé.

Le cas unmount (destruction)

• le callback de l'effet peut renvoyer une fonction
• cette fonction sera exécutée si le composant est détruit (disparait de l'interface)

useEffect(() => {
  console.log('Au rendu initial et si `info` change');
  
  return () => {
    console.log('Lors de la destruction du composant');
  }
}, [info]); 

---

En conclusion

Quelques habitudes avec les composants

• On passe les propriétés de composant en composant, données comme fonctions

• Les données viennent d'en haut et se dispatchent dans les sous composants

• On peut développer et tester chaque composant un par un

• Une fois qu'on a développé un composant, on peut l'oublier !

• = Pas de surprise, pas d'effet de bords

Quelques habitudes avec le state et les effets

• On stocke l'état de l'application dans le state

• Dès que le state change, le composant qui le contient est re-rendu

• Tous ses enfants avec lui

• Les effets permettent de gérer les traitements annexes (effet de bords)

• Ils peuvent être déclenchés à différents instants de la vie du composant

Où en sommes-nous ? 1/2

On sait faire :

• Ajouter le composant racine au DOM
• Créer des composants pour découper notre application
• Irriguer nos composants de données
• Tester les données reçues par nos composants avec PropTypes
• Modifier les données et mettre à jour l'UI
• Effets de bords : Ajax, DOM, etc.
• Faire des vues différentes selon l'URL

Où en sommes-nous ? 2/2

On ne sait pas (encore) faire :

• Irriguer nos composants de données sans intermédiaire
• S'organiser avec une application qui grossit
• Séparer les données et effets de bords des components
• Tester systématiquement nos données, nos fonctions

---

Redécouvrons le state