React & Legacy

Présentation

Liens_Web:

React est une bibliothèque Javascript, utilisée pour créer des composants utilisé dans l’IHM. Dans le modèle MVC, React correspond à la Vue.

Pour créer une application avec React, on va créer des composants (des classes ou des fonctions) qui seront ensuite assemblé pour former l’application finale. Les composants React sont réutilisables.

React utilise un DOM virtuel

Lors de l’utilisation de bibliothèques telles que JQuery nous manipulons directement les éléments HTML de la page, c’est à dire le DOM. React ne manipule pas le DOM directement, mais une copie interne de celui-ci (appellé DOM Virtuel), et produit les modifications d’affichage uniquement lorsque cela s’avère nécessaire et seulement sur les élément ayant été modifié. Cela permet de ne pas avoir à recharger la page après chaque action puisque seule quelques éléments à la foie sont mis a jour.

React Native (une variante de React) permet de créer des application IPhone ou Android.

React affiche sont propre html au travers du JSX (JavaScript Extended).

On s’interdit donc d’écrire du html dans le ficher « .html » à l’éxecption du code minimum et des balises <div> qui accueilleront le html de React.

React est composé de 2 bibliothèques JavaScript à inserer dans la page HTML :

  • React : Correspond à React lui même qui permet de créer des composant d’affichage réutilisable.

  • ReactDOM : Extention permettant d’effectuer le rendu, dans une page HTML, les composants créer avec React.

Attention, les deux bibliothèques sont fournie en version « development » et en version « production ».

Le code minimale d’une page est donc :

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5
 6         <!-- CDN React - Development -->
 7         <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 8         <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 9
10         <!-- CDN React - Production -->
11         <!-- <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> -->
12         <!-- <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> -->
13     </head>
14
15     <body>
16         <div id="app"></div>
17     </body>
18
19     <script>
20         // code React ICI.
21         // ou inclusion d'un module (Ne pas oublier type="module" dans la balise <script>)
22     </script>
23 </html>