Découvrir_ReactJS.md

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
}

Les packages utiles