Programmation JavaScript/React.js
Installation
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
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>;
};
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.
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 attributstate
. Cette classe possède alors une méthode nomméerender
retournant ce qu'il faut afficher, incluant d'autres composants. Son état doit alors être modifié par la méthodesetState
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.
Références
- ↑ https://facebook.github.io/react/
- ↑ https://facebook.github.io/react-native/
- ↑ https://api-platform.com/docs/client-generator/react/#generating-a-progressive-web-app
- ↑ https://fr.reactjs.org/docs/components-and-props.html
- ↑ 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://fr.reactjs.org/docs/fragments.html
- ↑ https://reacttraining.com/react-router/