Programmation JavaScript/React.js

Programmation JavaScript

1. Introduction

   Programmer en deux minutes

   • Page wiki
   • Compteur en temps réel
   • Site dans un document

2. Outils de développement
3. Syntaxe
   1. Ligne d'instruction
   2. Ordre d'évaluation
   3. Bloc d'instructions
   4. Identificateurs
   5. Expression littérale
   6. Commentaire
   7. Mots réservés
   8. Variables
   9. Opérateurs
   10. Structures de contrôle
   11. Exceptions et erreurs
   12. Fonctions utilisateur
   13. Évènement
4. Objets prédéfinis
   1. window
   2. document
   3. navigator
   4. Array
   5. Boolean
   6. Date
   7. Error
   8. Function
   9. Math
   10. Number
   11. Object
   12. String
   13. Element
   14. RegExp
5. Fonctions prédéfinies
6. Programmation avancée
   1. Opérateurs de bits
   2. Fermeture
   3. Programmation objet
   4. Notation JSON
   5. AJAX
   6. Stockage
   7. Générateurs
   8. Interface DOM
   9. Objets Microsoft
7. Frameworks
   1. Dojo

      Hello World

      Widgets

      Ressources

   2. jQuery
   3. Node.js
   4. React.js
8. Bibliothèques
   1. Datatables
9. Tests
   1. Ava
   2. Jest
   3. Cypress
10. Débogage
11. Erreurs connues
12. Références

Logo de React.

Introduction

React.js est un framework JavaScript développé par Facebook depuis 2013, qui privilégie la programmation déclarative à la programmation impérative pour développer des applications monopages (SPA) performantes, car il ne modifie que les fragments de page nécessaires 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 :

• Via le framework Stimulus qui permet d'appeler des composants React depuis les templates Twig.
• Via la bibliothèque API Platform qui permet de générer un client React à partir de son API PHP.

Installation

Pour créer une application React vide sous Linux :

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

Composants

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

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

 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

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

• Il faut utiliser l'attribut "className" au lieu de "class",
• Il faut utiliser l'attribut "htmlFor" au lieu de "for",
• L'attribut "style" doit être défini comme un dictionnaire de règles de style, en retirant les tirets du nom des attributs tout en mettant la lettre suivante en majuscule.

Exemple :

return <div className="main-title" style={{ fontSize: '36pt', fontWeight: 'bold' }}>
    Un exemple
  </div>

Appels

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.

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

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

• 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

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

On peut le tester en ligne sur :

• https://codepen.io/gaearon/pen/gwoJZk?editors=0010.
• https://codesandbox.io/s/react-typescript-react-ts (qui supporte le TypeScript en plus).

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

• 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

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. 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

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

Par exemple :

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

Exemple d'installation pour les select HTML :

 yarn add react-select