Découvrir React JS
EN COURS D'ECRITURE
React, c'est quoi ?
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 composant, c'est :
- 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>
Pourquoi React ?
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).
Installer React sur un projet
React nécessite un certain nombre de packages pour fonctionner convenablement.
Lors d'un nouveau projet, installer webpack encore :
composer require symfony/webpack-encore-bundle
Installer yarn sur son projet :
yarn install
Installer les librairies liés à React :
yarn add @babel/preset-react --dev
yarn add react react-dom prop-types
Le guide d'installation est disponible sur Documentation React
Créer un composant
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
}