▪ Introduction

▪ ECMASCRIPT 2015 (ES6)

▪ Approche MVC et Virtual DOM
▪ Composants REACT JS
▪ Cycle de vie d’un composant
▪ Navigation REACT JS
▪ Introduction à l'usage et interactions d'API
➢ Développement d’application web
➢ Les librairies front-end
➢ ReactJs : Présentation et components
Réalisation de page web accessible depuis n’importe quel navigateur sur n’importe
quel appareil.

Les deux types de développement web interviennent dans la création des

applications, des sites web et de tout produit dématérialisé :

❑ BACK-END qui est un ensemble d'opérations qui ne sont pas visibles pour les
visiteurs

❑ FONT-END désigne les éléments d'un site ou d'une application que les utilisateurs
voient à l'écran et avec lesquels ils vont interagir
• Une bibliothèque de vue ouverte Javascript pour construire des composants de
l'interface réutilisable ;

• maintenu par Facebook, avec la contribution des meilleurs développeurs du

monde ;
• elle est apparue pour la première fois en mai 2013

• utilise JSX (JavaScript Syntax eXtension) qui est un mélange du langage javascript
et HTML
▪ permet de créer des Component (Composants) correspondant aux parties de
l'interface.
▪ component peuvent être réutilisés ou combiné avec autres Component afin de
créer une interface complète.
▪ Projet gestion des choses à faire (todo)
▪ Lister todo
▪ Ajouter todo
▪ Modifier todo
▪ Supprimer todo
▪ Requête API
➢ Spécification ECMAScript et implémentations (JavaScript, JScript)
➢ Transpilation ES6 vers ES5 avec Babel
➢ Programmation Orientée Objet : Arrow functions
➢ Gestion des dépendances
• ECMAScript est un ensemble de normes concernant les langages de
programmation de type script et standardisées par Ecma International dans le
cadre de la spécification ECMA-262.

• Il s'agit donc d'un standard, dont les spécifications sont mises en œuvre dans
différents langages de script, comme JavaScript ou Jscript …
▪ JavaScript est l’implémentation la plus répandue de la norme ECMAScript.

▪ Les fonctionnalités principales de Javascript sont basées sur la norme ECMAScript,

mais Javascript comporte également d'autres fonctionnalités supplémentaires qui
ne figurent pas dans les spécifications/normes ECMA.

▪ Jscript (soutenu par Microsoft, dernière version stable mars 2011) est aussi un
langages qui implémentent ECMAScript.

▪ Chaque navigateur possède un interprète JavaScript.

▪ La transpilation c’est la conversion de code d’un langage à un autre ou d’une
version supérieur d’un langage à celle inferieure.

▪ Il existe un certain nombre de transpileurs qui convertissent le code ES6 en code

ES5 lisible par navigateur. Le plus populaire est Babel.

▪ Babel est un type de compilateur (Transpileur) qui sert à compiler du code

JavaScript supérieur (ES6+) en code JavaScript inférieur (tel que ES5) capable
d’être interprété par des vieux navigateurs.

▪ Babel n'est pas un package unique mais plutôt des modules NPM individuels.
▪ Le package @babel/core est le cerveau de Babel qui orchestre le processus de
compilation. Il fournit des API pour transpiler un fichier de programme JavaScript
d'une version JavaScript supérieure vers une version JavaScript inférieure.
▪ Le package @babel/cli permet d’utiliser la commande babel pour compiler les
fichiers JavaScript à partir de l'interface de ligne de commande.
▪ Exemple de transpilation de fonction fléchées ES6 en expression « function » ES5
▪ Une expression de fonction fléchée (arrow function en anglais) permet d’avoir une
syntaxe plus courte que les expressions de fonction et ne possède pas ses propres
valeurs.
▪ Les fonctions fléchées sont souvent anonymes et ne sont pas destinées à être
utilisées pour déclarer des méthodes.
▪ Exemple
▪ un arrangement caractéristique de modules, reconnu comme bonne pratique en
réponse à un problème de conception d'un logiciel ;

▪ décrit une solution standard, utilisable dans la conception de différents logiciels

▪ il existe trois grands types de design patterns :

▪ Les Creational Design Patterns représentent tous les design patterns dédiés à la création
d’objets;
▪ Les Structural Design Patterns permettent de gérer et d’assembler des objets dans des
structures plus grandes;
▪ Et enfin les Behavioral Design Patterns correspondent à la communication entre les
objets..
▪ Gestionnaire de paquet est un programme qui permet d’installer un module (un
bout de code écrit par quelqu'un et qui résout une problématique commune à
beaucoup de développeurs) lors du développements d’une application dans le but
d’exploiter ses fonctions.

▪ En javascript, le gestionnaire de paquet utilisé est NPM (Node Package Manager).

C’est une application et un référentiel pour développer et partager du code
JavaScript

▪ [Link] est un environnement d'exécution qui comprend tout ce dont vous avez
besoin pour exécuter un programme écrit en JavaScript.
➢ Model-View-Controller (MVC)
➢ Virtual DOM
➢ Installation de ReactJs
➢ Présentation de la structure de projet ReactJs
▪ Modèle-vue-contrôleur ou MVC est une architecture logicielle destiné aux
interfaces graphiques.

▪ Il est composé de trois types de modules ayant trois responsabilités différentes :

▪ Un modèle (Model) contient les données à afficher.
▪ Une vue (View) contient la présentation de l'interface graphique.
▪ Un contrôleur (Controller) contient la logique concernant les actions effectuées par
l'utilisateur.
▪ Le Document Object Model (DOM) est une interface de programmation, qui
permet à des scripts d'examiner et de modifier le contenu du navigateur web

▪ Le DOM est représenté sous la forme d'une structure de données arborescente

▪ Le DOM virtuel (VDOM) est un concept de programmation dans lequel une

représentation idéale, ou « virtuelle », d’une interface utilisateur (UI) est conservée
en mémoire et synchronisée avec le DOM « réel » par une bibliothèque telle que
« ReactDOM ». Ce processus s’appelle réconciliation.
▪ Lorsque de nouveaux éléments sont ajoutés à l'interface utilisateur, un DOM virtuel,
représenté sous forme d'arborescence, est créé. Chaque élément est un nœud sur cet
arbre.

▪ Si l'état de l'un de ces éléments change, une nouvelle arborescence DOM virtuelle est
créée. Cet arbre est ensuite comparé avec l'arborescence du DOM virtuel précédent.

▪ Une fois que cela est fait, le DOM virtuel calcule la meilleure méthode possible pour
apporter ces modifications au DOM réel.

▪ Cela garantit qu'il y a des opérations minimales sur le vrai DOM. Par conséquent,
réduire le coût de performance de la mise à jour du vrai DOM.
▪ Installation de NPM :
▪ Téléchargez Nodejs sur [Link] selon le système d’exploitation
utilisé pour installer ;
▪ Apres installation, depuis le terminal (CMD sur windows), verifier la version de NODE et
de NPM pour vous assurer qu’ils sont bien installer

▪ Génération de projet Reactjs

▪ public/[Link] est le modèle de page ;

▪ src/[Link] est le point d'entrée JavaScript ;

▪ node_modules est le dossier contenant l’ensemble des modules ;

▪ [Link] est utilisé pour stocker

▪ les métadonnées associées au projet ainsi que
▪ pour stocker la liste des packages de dépendances
➢ Présentation
➢ Exemple de composant
➢ Utiliser les propriétés
➢ Style CSS pour un composant
➢ Gestion des évènements
▪ Les composants sont les blocs de construction qui compose une application React ;
▪ un composant peut être une classe ou une fonction JavaScript qui accepte
éventuellement des entrées appelé propriétés (props) et renvoie du code JSX
indiquant ce qui doit être affiché à l'écran.

▪ maintient un état interne appelé « State » qui agit comme un magasin de données
pour lui. La mise à jour de cette état conditionne la restitution du composant par
React,
▪ Ils permettent de découper l’interface utilisateur en éléments indépendants et
réutilisables, permettant ainsi de considérer chaque élément de manière isolée.
▪ Les composants fonctionnels sont simplement des fonctions javascript
▪ Elles peuvent ou non recevoir des données en tant que paramètres (objet
généralement nommé PROPS)
▪ Le composant de classe comprend une méthode de rendu (render) qui affiche
l'écran
▪ Passer des proprieté « props » peut être déroutant, ils peuvent être écrit dans les
composants de classe et fonctionnels.
▪ Nous allons passer un propriété « nom » au composant « ExempleComponent »
▪ À l'intérieur d'un composant fonctionnel, nous passons des props comme argument
de la fonction.
▪ Notez que nous utilisons ici la déstructuration. Alternativement, nous pouvons
également l'écrire sans.
▪ Dans ce cas, il faut utiliser « [Link] » à la place « nom ».
Le style CSS peut être définis :
▪ En ajoutant une classe CSS aux components qui peut se faire en passant une chaîne
au PROPS « className »
▪ Ou en appliquant du CSS-in-JS qui fait référence à un modèle où les styles CSS sont
créés en utilisant du JavaScript au lieu d’être définis dans des fichiers externes
La gestion des événements pour les éléments React est très similaire à celle des
éléments du DOM.
Il y a tout de même quelques différences de syntaxe :
▪ Les événements de React sont nommés en camelCase plutôt qu’en minuscules.
▪ En JSX on passe une fonction comme gestionnaire d’événements plutôt qu’une
chaîne de caractères.
▪ Comprendre les cycles
▪ Monter un composant
▪ Fixer des types de propriété
Le cycle de vie d’un composant regroupe les étapes de la vie d’un composant. On va
tout d’abord discerner

▪ le moment où le composant va être inséré dans le DOM, « mounting » ou montage,

▪ le moment où le composant va être retiré du DOM, « unmounting » ou démontage.

▪ Quand un composant est monté, il va alors pouvoir être mis à jour ou « re-
rendered », quand son state (variable d’état) est modifié
▪ constructor()
▪ dans la programmation objet, le constructeur est ce qui est appelé en premier. Il
intervient dès que le composant doit apparaître dans le DOM virtuel ;
▪ Le constructeur de class reçoit en premier les propriétés « props » ;
▪ S’il est implémenté, il sera important de bien appeler la class parente avec le mot-clé
super afin de lui fournir « props ».
▪ render()
▪ cette méthode est celle du rendu ;
▪ elle intervient pour rendre votre JSX dans le DOM virtuel (et donc générer le HTML).

▪ componentDidMount()
▪ dès que le composant a fini de se monter, cette méthode s'exécute.
▪ React possède ses propres fonctionnalités de validation de types.
▪ Pour lancer la validation de types des props d’un composant, vous pouvez ajouter
la propriété spéciale propTypes
▪ Avant React 15.5.0, un utilitaire nommé PropTypes était disponible dans le package
React, qui fournissait de nombreux validateurs pour configurer
▪ Cependant, dans les versions supérieure de React, cet utilitaire a été déplacé vers
un package distinct nommé « prop-types ».
▪ Se positionner à la racine du projet dans le terminal et exécuter la commande
suivante :
▪ Mise en place du Routing (React-router)
▪ Rendu d’une route
▪ Liens via les Router
▪ Organiser les routes
▪ Passage de paramètres liens, redirections
▪ Le routage est la capacité d'afficher différentes pages à l'utilisateur.
▪ il donne la possibilité de naviguer entre les différentes parties d'une application en
entrant une URL ou en cliquant sur un élément.
▪ par défaut, React vient sans routage. Et pour l'activer, il faut ajouter une
bibliothèque nommée react-router.
▪ Se positionner à la racine du projet dans le terminal et executer la commande
suivante :
▪ Le paquet React Router a un composant pratique appelé « BrowserRouter ».
▪ Pour l’utiliser, il faut d’abord l'importer depuis « react-router-dom » afin de pouvoir
utiliser le routage dans notre application.
▪ Il contient tout les éléments de l’application où le routage est nécessaire. Cela
signifie que si l’on a besoin du routage dans l'ensemble de notre application, il faut
envelopper le composant le plus haut avec « BrowserRouter ».
Pour créer un itinéraire, il faudrait importer « Route » à partir du package du routeur.
Le composant « Route » a plusieurs propriétés. Mais nous avons juste besoin des
propriétés :
✓ « path » : c'est le chemin à charger lorsque l'itinéraire est atteint. Ici, nous utilisons
/ pour accéder à la page d'accueil.
✓ « render » : il restituera le contenu de la route. Ici, nous allons afficher un message
de bienvenue à l'utilisateur.
Pour ajouter des liens il faut
importer « Link » depuis « react-
router-dom » et l’appeler dans le
« render » comme suite
Nous pouvons encore l'améliorer, en
enveloppant nos routes avec
« Switch » pour dire à « React
Router » de ne charger qu'une seule
route à la fois.

NB : En mettant à jour l'itinéraire

« Accueil » avec « exact », il ne sera
rendu que s'il correspond au chemin
complet.
Pour transmettre des données entre
les pages, nous devons mettre à jour
notre exemple :
▪ le lien

▪ Route
▪ « React router » a un composant nommé « Redirect » qui aide à rediriger
l'utilisateur vers une autre page
▪ Définition
▪ Architecture
▪ interactions d'API
▪ Une API est un ensemble de définitions et de protocoles qui facilite la création et
l'intégration de logiciels d'applications.
▪ API est un acronyme anglais qui signifie « Application Programming Interface »,
que l'on traduit par interface de programmation d'application.
▪ API permettent à votre produit ou service de communiquer avec d'autres produits
et services sans connaître les détails de leur mise en œuvre
▪ Elle sont parfois considérées comme des contrats, avec une documentation qui
constitue un accord entre les parties : si la partie 1 envoie une requête à distance
selon une structure particulière, le logiciel de la partie 2 devra répondre selon les
conditions définies.
Il existe trois approches d'accès aux API :
▪ API privées ou interne : elle n'est utilisable qu'en interne. Cette approche permet
de garder un contrôle total sur l’API ;

▪ API partenaires : elle est partagée avec certains partenaires de l'entreprise. Cette
approche peut générer de nouveaux flux de revenus sans compromettre la
sécurité.

▪ API publiques : elle est accessible à tous. Cette approche autorise les tiers à
développer des applications qui interagissent avec votre API et peut devenir
source d'innovations.
▪ Vous pouvez utiliser n’importe quelle bibliothèque AJAX de votre choix avec
React.
▪ Parmi les plus populaires, on peut cite
▪ Axios,
▪ jQuery AJAX
▪ et le standard [Link] intégré au navigateur.
Ezéchiel Compaore
cezechiel81@[Link]