Programmation JavaScript/React.js

Un livre de Wikilivres.
Logo de React.

Introduction[modifier | modifier le wikicode]

React.js est un framework JavaScript développé par Facebook depuis 2013, qui privilégie la programmation déclarative à la programmation impérative [1] pour développer des applications monopages (SPA) performantes, car il ne modifie que les fragments de page nécessaires[2] en asynchrone.

React est utilisé dans de nombreuses applications à fort trafic, telles que Netflix, Yahoo, Airbnb, Sony, Atlassian, Facebook, Instagram ou encore WhatsApp.

De plus, le framework React Native permet d'utiliser la syntaxe React pour développer des applications mobiles.

Par ailleurs, il existe des outils pour l'utiliser avec le framework PHP Symfony en back-end, notamment :

Installation[modifier | modifier le wikicode]

Pour créer une application React vide sous Linux :

sudo npm install --global npx
npx create-react-app ReactApp
cd ReactApp
npm start

Composants[modifier | modifier le wikicode]

React fonctionne à base de composants dans lesquels on injecte des "props" (properties)[4].

Le but est de découper l'application en composants réutilisables. Il est recommandé de les déclarer avec une majuscule, et ils peuvent être des fonctions, des fonctions fléchées, ou des classes (depuis ES6). Exemple :

// Fonction
function HelloWorldFunction(props) {
  return <b>HelloWorld!, {props.name}</b>;
}

// Fonction fléchée
const HelloWorldArrowFunction = () => {
  return <b>HelloWorld!, {props.name}</b>;
};

// Classe
import React from 'react'

class HelloWorldClass extends React.Component {
  render() {
    return <b>HelloWorld!, {this.props.name}</b>;
  }
}

Il y a donc deux façons de créer un composant :

  • En créant une sous-classe de React.Component, gérant son état dans un attribut state. Cette classe possède alors une méthode nommée render retournant ce qu'il faut afficher, incluant d'autres composants. Son état doit alors être modifié par la méthode setState qui fusionne l'objet spécifié avec l'état courant et déclenche un nouvel affichage du composant si nécessaire.
  • En créant une fonction ayant les propriétés comme arguments, qui retourne ce qu'il faut afficher. Cette fonction utilise alors des hooks qui permettent de retrouver les états des précédents affichages ; ces états sont créés lors du premier affichage.

JSX[modifier | modifier le wikicode]

 La syntaxe permettant d'inclure ainsi du code HTML dans le JavaScript sans guillemet est appelée JSX.

Cette syntaxe permet de mélanger du code XML (HTML ou composants React) au JavaScript. Le JavaScript est intégré lui-même dans le XML entre des accolades pour l'interpolation, c'est-à-dire interpréter des variables, calculer une expression, appeler une fonction...

Cette syntaxe particulière ne fait pas partie du JavaScript standard compris par les navigateurs et exige donc une compilation avant que l'application soit exécutée. Il faut l'installer avec :

yarn add @babel/preset-react --dev

Logo

La syntaxe HTML des JSX est légèrement différente :

  • Utiliser l'attribut "className" au lieu "class"
  • Utiliser l'attribut "htmlFor" au lieu de "for"

Appels[modifier | modifier le wikicode]

Pour invoquer un composant, il faut l'importer et le mettre dans une balise XML, avec ses props comme attributs. Pour importer une fonction au lieu de tout un fichier, la mettre entre accolades.

 On retrouve les accolades en dehors des imports pour interpréter les variables en JSX[5].

Exemple :

import React from 'react'
import { render } from 'react-dom'
import HelloWorld from './HelloWorld'

const you = "me"
render(
  <HelloWorld name={you}/>
  document.querySelector('#app'),
)

États[modifier | modifier le wikicode]

Les états des composants peuvent être gérés par la bibliothèque Redux, ou depuis React 16.8 (en 2019) par des hooks[6] dont voici la liste[7] :

  • useCallback
  • useContext
  • useDebugValue
  • useEffect
  • useImperativeHandle
  • useLayoutEffect
  • useMemo : mémorise un résultat pour gagner en performances en évitant de le recalculer ensuite.
  • useReducer
  • useRef
  • useState

Cycle de vie[modifier | modifier le wikicode]

  • React.createClass contient les fonctions.
  • ReactDOM les invoque[8]. ReactDOM.render() change l'affichage.

On peut le tester en ligne sur :

Voici les méthodes magiques qui s'exécutent automatiquement selon l'étape du composant[9] :

  • constructor : s'exécute à l'initialisation de la classe.
  • componentWillMount() : s'exécute juste après le constructeur.
  • componentDidMount() : s'exécute après "componentWillMount", quand le composant s'affiche.
  • componentDidUpdate() : s'exécute quand le composant affiché se rafraichit, suite à une modification d'état.

Fragments[modifier | modifier le wikicode]

La valeur retournée pour l'affichage d'un composant ne peut pas contenir plusieurs balises HTML sœurs, elles doivent être encapsulées dans une seule. Or, dans le cas des balises "li" ou "td", les encapsuler ajouterait un nœud qui les séparerait de leur balise parente ("ul" ou "table").

Les fragments sont la solution à cela en permettant d'encapsuler plusieurs éléments[10]. Ils peuvent être représentés par des balises vides.

Exemple :

return <>
    <span id="nom">Taille : </span>
    <span id="valeur">{fileSize} octets</span>
 </>

Bibliothèques[modifier | modifier le wikicode]

Il existe beaucoup de bibliothèques logicielles utilisables en React[11].

Par exemple :

  • Axios pour le client HTTP[12].
  • Formik pour les formulaires HTML[13].
  • Griddle pour afficher des tableaux[14].
  • React Router pour le routing client[15]. Par exemple pour gérer les URL, on utilise sa classe Route.
  • React Select pour des sélections HTML[16].
  • Redux pour stocker des états.

Exemple d'installation pour les select HTML :

 yarn add react-select

Références[modifier | modifier le wikicode]