# Programmation JavaScript/React.js

* Introduction
    Programmer en deux minutes
*   * Page wiki
*   * Compteur en temps réel
*   * Site dans un document
* Outils de développement
* Syntaxe
** Ligne d'instruction
** Ordre d'évaluation
** Bloc d'instructions
** Identificateurs
** Expression littérale
** Commentaire
** Mots réservés
** Variables
** Opérateurs
** Structures de contrôle
** Exceptions et erreurs
** Fonctions utilisateur
** Évènement
* Objets prédéfinis
** window
** document
** navigator
** Array
** Boolean
** Date
** Error
** Function
** Math
** Number
** Object
** String
** Element
** RegExp
* Fonctions prédéfinies
* Programmation avancée
** Opérateurs de bits
** Fermeture
** Programmation objet
** Notation JSON
** AJAX
** Stockage
** Générateurs
** Interface DOM
** Objets Microsoft
* Frameworks
** Dojo
    Hello World
    Widgets
    Ressources
** jQuery
** Node.js
** React.js
* Tests
** Ava
** Jest
** Cypress
* Débogage
* Erreurs connues
* Références
* Introduction
    Programmer en deux minutes
*   * Page wiki
*   * Compteur en temps réel
*   * Site dans un document
* Outils de développement
* Syntaxe
** Ligne d'instruction
** Ordre d'évaluation
** Bloc d'instructions
** Identificateurs
** Expression littérale
** Commentaire
** Mots réservés
** Variables
** Opérateurs
** Structures de contrôle
** Exceptions et erreurs
** Fonctions utilisateur
** Évènement
* Objets prédéfinis
** window
** document
** navigator
** Array
** Boolean
** Date
** Error
** Function
** Math
** Number
** Object
** String
** Element
** RegExp
* Fonctions prédéfinies
* Programmation avancée
** Opérateurs de bits
** Fermeture
** Programmation objet
** Notation JSON
** AJAX
** Stockage
** Générateurs
** Interface DOM
** Objets Microsoft
* Frameworks
** Dojo
    Hello World
    Widgets
    Ressources
** jQuery
** Node.js
** React.js
* Tests
** Ava
** Jest
** Cypress
* Débogage
* Erreurs connues
* Références
[ Modifier le sommaire ]

## 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 :

## 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 :
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

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

### 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.
Exemple :

### É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 :

## 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 :

## Références

* ↑ https://facebook.github.io/react/
* ↑ https://fr.reactjs.org/
* ↑ https://api-platform.com/docs/client-generator/react/#generating-a-progressive-web-app
* ↑ https://react.dev/learn/passing-props-to-a-component
* ↑ https://fr.reactjs.org/docs/introducing-jsx.html
* ↑ https://fr.reactjs.org/docs/hooks-intro.html
* ↑ https://fr.reactjs.org/docs/hooks-reference.html
* ↑ https://www.w3schools.com/react/
* ↑ https://react.dev/reference/react/Component
* ↑ https://fr.reactjs.org/docs/fragments.html
* ↑ https://www.bytestechnolab.com/blog/20-top-react-ui-components-in-2022/
* ↑ https://axios-http.com/fr/docs/intro
* ↑ https://formik.org/
* ↑ https://griddlegriddle.github.io/Griddle/
* ↑ https://reactrouter.com/fr/main/start/overview
* ↑ https://react-select.com