< Programmation JavaScript

Installation

Logo de React.

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), pour des sites web ou applis mobiles[2].

Pour créer une application React vide sous Linux :

sudo npm install --global npx
npx create-react-app ReactApp
cd ReactApp
npm start
 la bibliothèque PHP API Platform permet de générer un client React à partir d'une API PHP[3].

Composants

React fonctionne à base de composants que l'on peut voir comme des fonctions, et dans lesquelles on injecte des "props"[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 l'être en syntaxe de programmation fonctionnelle, ou en objet depuis ES6. Exemple :

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

// Classe
import React from 'react'

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

On peut aussi utiliser la syntaxe fonction fléchée :

const HelloWorldArrowFunction = () => {
  return <b>HelloWorld!, {props.name}</b>;
};
 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 faire référence à 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.


React fournit aussi des composants déjà prêts. Exemple d'installation pour les select HTML :

 yarn add react-select

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[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'),
)

Syntaxe

Il y a 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.

États

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

  • useCallback
  • useContext
  • useDebugValue
  • useEffect
  • useImperativeHandle
  • useLayoutEffect
  • useMemo
  • useReducer
  • useRef
  • useState

Cycle de vie

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

On peut le tester en ligne sur https://codepen.io/gaearon/pen/gwoJZk?editors=0010.

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[9]. Ils peuvent être représentés par des balises vides.

Exemple :

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

Routes

Pour gérer les URL, on utilise la classe Route[10].

Exemple

Affiche d'une base de données en tableau avec Griddle.

Cette section est vide, pas assez détaillée ou incomplète.

Références

Cet article est issu de Wikibooks. Le texte est sous licence Creative Commons - Attribution - Partage dans les Mêmes. Des conditions supplémentaires peuvent s'appliquer aux fichiers multimédias.