Framework React

Présentation de React

React est indiscutablement l’un des meilleurs frameworks JavaScript de type « front-end ». Ses concurrents majeurs sont Vue.js (non traité dans ce livre) et Svelte (étudié en détail dans le chapitre Framework Svelte).

React est une bibliothèque JavaScript plébiscitée par les développeurs depuis sa création en 2013. Le contributeur principal de ce framework est la société Facebook.

React a assez rapidement connu un très grand succès et est utilisé par exemple par Instragram, WhatsApp, Netflix, Yahoo, Airbnb, Sony…

L’objectif de React, parfois aussi appelé React.js ou encore ReactJS, est de fournir un outillage pour concevoir des applications web monopages (Single Page Application).

Le principe de React est de permettre la construction de composants ayant un état et de faire en sorte que la page HTML en entier (ou en partie) soit actualisée à chaque changement d’état des composants la constituant.

React gère exclusivement l’interface de l’application, c’est-à-dire la vue d’un modèle MVC (Model-View-Controller). React est donc utilisé avec d’autres frameworks, par exemple avec Angular basé, lui, sur le MVC.

Le modèle MVC est très utilisé dans les développements informatiques....

Création locale d’un projet React

Ne nous attardons pas longuement sur ce sujet car l’installation locale de l’environnement React est relativement simple et parfaitement décrite sur le site officiel, à l’adresse : https://fr.reactjs.org/docs/create-a-new-react-app.html

Selon les recommandations de ce site, pour une utilisation minimale de React en mode local, vous devrez suivre la démarche ci-après.

Pour créer un nouveau projet React, afin de vous éviter la création manuelle des scripts constituant le squelette, il est préférable d’utiliser en mode ligne de commande l’environnement Create React App.

Avant de procéder à la création de votre projet, vous devrez veiller à installer Node.js. La procédure pour le faire a été étudiée dans le chapitre Installation de Node.js de ce livre.

Ensuite (en mode ligne de commande), saisissez consécutivement les instructions ci-après :

npx create-react-app mon-app 
cd mon-app 
npm start 

Dans cette séquence de commandes, le projet mon-app est créé (vous avez bien sûr le loisir de choisir un nom personnalisé pour vos propres réalisations). Il faut ensuite vous rendre dans le répertoire qui a été créé par Create React App (commande cd) et lancer l’application (que...

Projets React basiques

Nous allons découvrir les possibilités du framework React au travers d’une série d’exemples, comme nous l’avons fait au chapitre précédent pour Svelte.

L’option a été prise de ne pas programmer exactement les mêmes exercices, même si cela avait été tout à fait possible, les deux frameworks ayant le même périmètre fonctionnel.

Les props React

Dans nos six premières applications, nous avons négligé la notion de props (propriétés) sous React.

Remédions à cela au travers de trois nouveaux exemples.

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.     } ...

Les librairies tierces pour React

Le framework React doit son succès à ses qualités intrinsèques mais également aux très nombreuses librairies tierces développées par la communauté de ses utilisateurs.

Il est bien sûr impossible d’en faire un inventaire complet.

Nous allons survoler les possibilités offertes par deux d’entre elles :

Dans cette section, nous allons recourir à la librairie « Material-UI » pour trois exemples de présentation de données en mode tableau.

La mise en page de données en tableaux est certainement l’une des fonctionnalités parmi les plus utilisées dans les développements web et les applications pour périphériques mobiles.

Vous trouverez ensuite également trois exemples de conception de graphiques sur la base de la librairie « Recharts ».

Lecture de fichiers JSON sous React

Interactions avec un serveur PHP-MySQL

Comme nous l’avons vu dans le chapitre concernant le framework Svelte, il est aussi tout à fait possible de faire interagir le framework React (front-end) avec un serveur de données en back-end, par exemple par l’intermédiaire du couplet PHP-MySQL.

MySQL est l’un des Systèmes de Gestion de Bases de Données parmi les plus utilisés au monde, notamment dans les applications web.

Des statistiques récentes font encore état d’un taux d’utilisation de MySQL à près de 50 % et de PHP à près de 80 % dans les sites web dynamiques, c’est-à-dire couplés à une Base De Données.

Le langage PHP, étroitement lié à MySQL, sera dans notre cas le langage de programmation retenu pour écrire les scripts qui géreront les opérations sur les données. Même si le présent livre n’est pas orienté PHP, quelques éléments syntaxiques vous seront fournis dans les exemples d’illustration à venir.

La navigation sous React (routage)

Jusqu’à présent, dans ce chapitre, nous avons développé des applications React SPA (Single Page Application). Le moment est venu de voir comment il est possible de chaîner ces applications entre elles au travers d’un système de navigation (router).

Nous aurions pu mettre en place un système de navigation (routage) entre les applications développées dans le cadre de la section Les librairies tierces pour React. Pour simplifier l’exposé, la présentation sera faite au travers d’un projet plus modeste.

Notre application « eni_react_router » a été créée à partir de l’assistant habituel, Create React App.

Elle comprend donc un script index.js par défaut (déjà vu dans de nombreux projets du livre), dans lequel un composant App est installé.

C’est le script App.js, contenant ce composant App, que nous allons étudier en détail. Le code est reproduit dans son intégralité ci-après :

1.   // Importation de classes 
2.   import React from "react"; 
3.   import { 
4.      BrowserRouter as Router, 
5.      Switch, 
6.      Route, 
7.      Link 
8.   } from "react-router-dom"; 
9.  
10.  // Ce site comporte 3 pages, qui sont toutes affichées 
11.  // dynamiquement dans le navigateur. 
12.  
13.  // Fonction Routage  
14.  export default function Routage() { 
15.  
16.     // Valeur de retour 
17.     return ( 
18.  
19.        // Appel du composant Router  
20.        <Router> 
21.  
22.           <div> ...