Framework React

1. « eni_react_bases_01 »

Avant d’envisager de développer des applications ambitieuses, il est important de débuter l’étude des concepts de base de React.

Rappelons que, comme pour Svelte, l’installation du framework Node.js est un prérequis. Vous pourrez vous reporter au chapitre Installation de Node.js pour voir comment assurer son installation.

Il peut aussi être utile, comme pour React, de disposer d’un éditeur de texte du type Microsoft Visual Code, même si des solutions plus basiques pourraient convenir.

L’intérêt est que Microsoft Visual Code est un système ouvert. Il est possible de lui rajouter des extensions, notamment la reconnaissance de la syntaxique de nombreux langages de programmation, notamment JavaScript, Svelte et React.

Pour mettre en place un premier projet React, il faut également se mettre en mode ligne de commande (taper cmd dans le moteur de recherche sous Windows, en bas à gauche de l’écran).

Nous placerons toutes les applications du chapitre dans un répertoire « d:\ENI_React ». Tout autre choix, y compris sur d’autres systèmes d’exploitation comme Linux ou macOS, pourra convenir.

Pour la création du premier projet, saisissez, en mode ligne de commande, l’instruction npx create-react-app eni_react_bases_01 (en étant positionné dans le répertoire « d:\ENI_React »).

Le squelette du projet, généré en quelques secondes, est disponible dans le répertoire « d:\ENI_React\eni_react_bases_01 ». Il convient ensuite, toujours en ligne de commande, de vous placer dans ledit répertoire avec l’instruction cd eni_react_bases_01.

Comme indiqué sur le site officiel (en français) fr.reactjs.org à l’adresse https://fr.reactjs.org/docs/create-a-new-react-app.html, Create React App est un environnement confortable pour apprendre React et constitue la meilleure option pour démarrer une nouvelle application en monopage (Single Page Application) en React.

Attention, Create React App ne prend en charge que la logique « front-end » dans la construction du squelette.

Ensuite, il peut être intéressant, via l’explorateur de fichiers Windows, de regarder la structure de l’ébauche de projet.

Vous découvez une arborescence assez proche de celle vue sous Svelte, avec un répertoire public, un répertoire src, un fichier package.json, un fichier package-lock.json. Tous ces éléments jouent globalement le même rôle que sous Svelte. Petite surprise, le répertoire node_modules est déjà en place, ce qui fait que, contrairement à Svelte, vous n’avez pas besoin de lancer la commande...

1. « eni_react_props_01 »

Seul le code du script index.js est commenté.

Dans ce script, deux classes sont présentes :

Consultons le code complet de ce script :

1.   // Importation de classes 
2.   import React from 'react'; 
3.   import ReactDOM from 'react-dom'; 
4.   import './index.css'; 
5.  
6.   // Classe VoitureSport (extension de Component) 
7.   class VoitureSport extends React.Component { 
8.  
9.      // Méthode render 
10.     render() { 
11.  
12.        // Valeur de retour 
13.        return( 
14.           <div> 
15.              - Classement {this.props.classement} / 
16.              Marque : {this.props.marque} / 
17.              Modèle : {this.props.modele} 
18.           </div> 
19.        ); 
20.  
21.     } 
22.  
23.  } 
24.  
25.  // Classe Course (extension de Component) 
26.  class Course extends React.Component { 
27.  
28.     // Méthode render 
29.     render() { 
30.  
31.        // Valeur de retour 
32.        return ( 
33.           <div> 
34.              <h1>Podium 24h du Mans 1970 :</h1> 
35.              <VoitureSport classement = "1" marque = "Porsche" modele ...

1. « eni_react_material-ui_table_01 »

Dans les applications web sous React, il est fréquent que l’on souhaite une présentation des données (flux JSON) sous forme de tableau.

La librairie « Material-UI-Table » propose des mises en forme très abouties et ceci sans un trop grand surcroît de complexité.

Nous allons décliner trois exemples (toujours basés sur les voitures de sport) pour découvrir le potentiel de cette librairie assez magique.

L’installation de la librairie « Material-UI » pour la rendre disponible dans un projet React ne pose aucune difficulté. Cette librairie est disponible en tant que package npm (Node Package Manager).

Après avoir créé le projet React (via Create React App), toujours en ligne de commande, réalisez l’installation par la commande npm install @material-ui/core.

Une fois n’est pas coutume, débutons l’exposé sur ce premier exemple d’utilisation de la librairie « Material-UI » par l’affichage du résultat lors de l’exécution.

Le jeu de données est basé sur une liste d’une vingtaine de voitures de sport, jeu d’essai déjà utilisé dans ce livre.

L’exécution du projet affiche ce tableau dans le navigateur :

Passons à l’étude détaillée du code du script index.js.

1.   // Importation de classes 
2.   import React from 'react'; 
3.   import ReactDOM from 'react-dom'; 
4.   import './index.css'; 
5.   import Table from '@material-ui/core/Table'; 
6.   import TableBody from '@material-ui/core/TableBody'; 
7.   import TableCell from '@material-ui/core/TableCell'; 
8.   import TableContainer from '@material-ui/core/TableContainer'; ...

1. Différents types de flux JSON

Nous connaissons, pour l’avoir déjà vu pour le framework Svelte, l’importance du format JSON dans les développements d’applications pour le Web ainsi que pour les mobiles.

Des flux de données JSON peuvent être consommés par React et ces données peuvent être :

La production des flux JSON dans ce second cas peut être soit effectuée par des appels à des API (le développeur React se contente de solliciter l’API en lui passant éventuellement des paramètres), soit en appelant un script serveur (qu’il pourra avoir lui-même développé).

Nous allons nous intéresser uniquement aux flux locaux, c’est-à-dire directement embarqués dans l’application.

Nous aurons l’occasion de voir plus loin dans ce livre comment procéder dans le cas de flux distants.

2. « eni_react_lecture_json_local »

Comme annoncé plus avant, l’enjeu est, dans ce développement, de montrer comment accéder à des données JSON provenant d’un script local.

Nous continuons d’utiliser un jeu d’essai déjà employé dans ce livre, une liste de voitures de sport.

Cette application intègre bien plus que le fichier index.js que nous avions rencontré jusqu’à présent.

Nous passerons en revue les scripts suivants :

Pour l’instant, tout ceci semble un peu abstrait, mais l’étude du code de chacun de ces fichiers vous permettra de comprendre l’articulation générale et vous devriez ensuite être en mesure d’exploiter un flux JSON quelle qu’en soit la structure.

Comme nous avons pris l’habitude de le faire, nous allons commencer par voir l’affichage obtenu à l’exécution :

L’affichage est relativement conséquent avec 18 voitures, chacune caractérisée par les propriétés habituelles : la marque, le modèle, le type de moteur, la cylindrée en litres du moteur, la puissance réelle et la vitesse de pointe.

Regardons tout d’abord le script donneesVoitures.js contenant nos données au format JSON :

1.   // Liste des données 
2.   export const donneesVoitures = [ ...

1. « eni_react_php_mysql_01 »

Dans notre premier exemple, nous nous contenterons d’enregistrer dans un fichier texte (sport_favori.txt) sur le serveur web le choix d’un sport préféré réalisé au travers d’une liste déroulante sous React.

Le serveur web ne sera pas un site distant. Nous utiliserons un serveur Apache installé dans le cadre d’un déploiement local de la suite web EasyPHP. Le script PHP recevant le choix effectué (un sport parmi trois dans une liste déroulante) sera installé dans un sous-répertoire (nommé react) de ce serveur Apache.

L’URL du script sera « http://127.0.0.1/react/php_sport_favori.php ». Le fichier texte « sport_favori.txt » sera généré (création ou écrasement) dans le même répertoire.

À titre indicatif, l’architecture de ce traitement sera assez proche de celles présentées graphiquement dans le chapitre Installation de Node.js.

Notre application est constituée principalement de deux scripts :

Débutons notre explication par le commentaire détaillé du script index.js :

1.   // Importation de classes 
2.   import React from 'react'; 
3.   import ReactDOM from 'react-dom'; 
4.   import './index.css'; 
5.  
6.   // Class FormulaireSportPrefere (extension de Component) 
7.   class FormulaireSportPrefere extends React.Component { 
8.  
9.      // Constructeur 
10.     // NB : Source : https://fr.reactjs.org/docs/
       react-component.html#constructor  
11.     //         Le constructeur d'un composant React est appelé ...