ReactJS est une librairie front-office javascript pour créer des interfaces utilisateurs. Il permet de séparer l'état (les données) et le fonctionnement des vues. La librairie offre également la possibilité de créer des composants dynamiques, ce qui va offrir une grande fluidité.
- Un état (des données), par exemple une liste d'utilisateurs
- Des comportements, par exemple ajouter ou supprimer un utilisateur
- Le rendu (l'affichage), qu'est-ce qui doit s'afficher sur le navigateur ?
React va faire en sorte que le l'affichage soit toujours synchronisé avec l'état du composant. (Ex, si on choisit de supprimer un utilisateur, celui-ci ne sera plus affiché sans avoir à recharger la page)
React est basé sur du javascript, on utilisera donc du JSX (Syntaxe basée sur javascript) pour intéragir avec.
Le JSX n'est pas reconnu par les navigateurs, on utilise pour cela la librairie Babel qui va traduire le JSX en JS pour ces derniers.
Exemple de composant :
<MonComposant monAttribut={variable}>
<h1>Bonjour {prenom} !</h1>
<ComposantEnfant unAttribut={5} autreAttribut="test"></>
</MonComposant>React est une librairie Simple, avec une large communauté et un grand ecosystème (react native, de nombreuses librairies, etc), qui offre également de nombreuses pluvalues techniques (Fluidité, réactivité, synchronisation des données, etc).
React nécessite un certain nombre de packages pour fonctionner convenablement.
Lors d'un nouveau projet, installer webpack encore :
composer require symfony/webpack-encore-bundleInstaller yarn sur son projet :
yarn installInstaller les librairies liés à React :
yarn add @babel/preset-react --dev
yarn add react react-dom prop-typesLe guide d'installation est disponible sur Documentation React
Pour créer un composant, nous créerons une classe qui étend React.Component :
class MonComposant extends React.Component {
constructor(propriete)
super(propriete) // Pour récupérer les propriétés du parent qui appelle le composant
}