ROYAUME DU MAROC

‫مكتب التكوين المهني وإنعاش الشغل‬

office de la formation professionnelle et de la promotion du travail

ISMONTIC TANGER

MODULE 204 : Développer en front-end

DÉVELOPPER EN FRONT-END

OUAFIQ Majda

2022-2023
Comprendre les concepts de base du
web front-end
Fondamentaux des sites web statiques

Un site Web statique consiste en une série de fichiers HTML, chacun représentant

une page physique d'un site Web. Sur les sites statiques, chaque page est un fichier

HTML distinct. Lorsque vous visitez la page d'accueil, vous ne visualisez que le

fichier de la page d'accueil réelle. Les sites Web statiques sont assez simples et tous

les sites Web ont été construits de cette façon pendant les premières années du World

Wide Web.
Comprendre les concepts de base du
web front-end
Différence entre front End et back end :

C’est quoi front-end

Le front-end est construit à l'aide d'une combinaison de technologies telles que le

langage de balisage hypertexte (HTML), JavaScript et les feuilles de style en

cascade (CSS). Les développeurs front-end conçoivent et construisent les éléments de

l'expérience utilisateur sur la page Web ou l'application, y compris les boutons, les

menus, les pages, les liens, les graphiques, etc.

Comprendre les concepts de base du
web front-end
C’est quoi back-end

Le back-end, également appelé côté serveur, se compose du serveur qui fournit les

données à la demande, de l'application qui les canalise et de la base de données qui

organise les informations. Par exemple, lorsqu'un client parcourt des chaussures sur

un site Web, il interagit avec le frontal. Une fois qu'ils ont sélectionné l'article qu'ils

souhaitent, l'ont mis dans le panier et autorisé l'achat, les informations sont

conservées dans la base de données qui réside sur le serveur. Quelques jours plus tard,

lorsque le client vérifie l'état de sa livraison, le serveur extrait les informations

pertinentes, les met à jour avec les données de suivi et les présente via le front-end.
Comprendre les concepts de base du
web front-end
Présentation des Frameworks front end :

Qu’est-ce qu’un framework : en gros, il s’agit d’une boîte à outils couplée à une

bibliothèque pour programmeur informatique. Il permet d’aider les programmeurs

dans leur travail en leur proposant des morceaux de code pour mettre en place des

fonctionnalités couramment demandées pour des applications. Par exemple, le

multilinguisme, la gestion de la sécurité, la modularité (c’est-à-dire la possibilité pour

l’utilisateur de personnaliser son interface). L’avantage est que les programmeurs ne

réinventent pas la roue chacun dans leur coin en programmant de A à Z tous les

aspects de l’application demandée par le client.

 Comprendre les concepts de base du
web front-end
Il faut savoir aussi qu’un projet nécessitera souvent l’utilisation de plusieurs

frameworks. En effet, les frameworks sont généralement spécialisés dans un domaine

bien précis :

• Un framework back-end permet à l’application de communiquer avec la base de

données qui renferme des renseignements aussi précieux que les informations sur les

utilisateurs, les sessions en cours, les articles en vente sur votre site… Node JS est un

exemple de framework backend, tout comme Ruby, Laravel, Django, Flask…

• Un framework front-end applicatif permet de spécifier la structure d’une interface

pour améliorer l’expérience utilisateur. C’est le cas de ReactJS (les composants).

 Comprendre les concepts de base du
web front-end
• Enfin, un framework front-end de présentation permet de définir l’apparence de

l’application pour l’utilisateur. C’est le cas de Bootstrap

Pourquoi utiliser les frameworks ?

L’utilisation d’un framework n’est pas nécessaire dans un projet informatique, quelle

que soit sa taille. Vous pouvez très bien vous en passer. Cependant, un framework est

comme un squelette applicatif avec sa boîte à outils qui permet de développer plus

rapidement, puisqu’il intègre une bonne partie de l’architecture, et invite les

développeurs à suivre les normes de développement et de nommage tendant à une

meilleure qualité du code.

 Comprendre les concepts de base du
web front-end
Les avantages d’un framework ?

Utiliser un framework offre des avantages non négligeables :

• Les développeurs se concentrent uniquement sur la partie métier puisque toutes les

couches techniques sont déjà intégrées dans le framework.

• L’architecture permet la séparation des couches techniques logiques afin de faciliter le

développement en équipe, la maintenance et l’évolution.

• La maintenance et l’évolution du framework sont gérées par l’organisme fondateur.

Les aspects avancés de JavaScript ES6
Le développement Frontend avec React nécessite une bonne maitrise de javascript

ES6.

Les Classes:

On crée une nouvelle classe grâce au mot clef class. Dans notre classe, on définit une

méthode constructor() qui va nous servir à initialiser les propriétés des objets créés

par la suite à partir de la classe avec les valeurs courantes des objets.

Nous allons définir des méthodes de classe auxquelles les objets auront accès.
Les aspects avancés de JavaScript ES6
Les aspects avancés de JavaScript ES6
Classes étendues et héritage en JavaScript:

Pour étendre une classe, c’est-à-dire pour créer une classe enfant qui va hériter des

propriétés et des méthodes d’une classe parent, nous allons utiliser le mot

clef extends.

Nous devons utiliser le mot clef super() qui permet d’appeler le constructeur parent

dans le constructor() de notre classe fille afin que les propriétés soient correctement

initialisées.

On peut ensuite créer des objets à partir de notre classe fille. Les objets vont

également avoir accès aux propriétés et méthodes de la classe mère.

Les aspects avancés de JavaScript ES6
Les aspects avancés de JavaScript ES6
MODULES:

Les modules JavaScript vous permettent de diviser votre code en fichiers séparés.

Nous pouvons exporter des valeurs, classes, et fonctions. Les modules sont importés à

partir de fichiers externes avec l'instruction import.

Exporter

Les modules avec des fonctions ou des variables peuvent être stockés dans n'importe

quel fichier externe.

Il existe deux types d'exportations : les exportations nommées et les exportations par

défaut .
Les aspects avancés de JavaScript ES6
C’est quoi la différence entre export default et export ?

Dans un module on peut faire seulement un seul export default, alors qu’on peut faire

plusieurs exports.

Dans le module ci-dessous il existe un seul export default : export default Etudiant et

deux export : export {Etablissement,info}

L’élément exporté par default est importé sans accolades, tandis les éléments exportés

par export sont importés avec des accolades

 Les aspects avancés de JavaScript ES6
[Link]:

const Etablissement='Ntic'

class Etudiant{
constructor(nom,age){
[Link]=nom;
[Link]=age;
} }
function info(etudiant){
return `nom:${[Link]} age:${[Link]}`
}
export default Etudiant
export {Etablissement,info}
////////////////////////////////////////////////////////////////////////////////////////////////////
import Etudiant,{Etablissement,info} from './[Link]'
Les aspects avancés de JavaScript ES6
Template literals :

const salutation="salut"
const nom="Ahmed"
//avec template literal
[Link](`${salutation} ${nom}`)
//est identique a
[Link](salutation+" "+nom)
Les aspects avancés de JavaScript ES6
L'opérateur conditionnel ternaire

L'opérateur conditionnel (ternaire) est un opérateur JavaScript qui prend trois

opérandes : une condition suivie d'un point d'interrogation (?), puis une expression à

exécuter si la condition est vraie suivie de deux-points (:), et enfin l'expression à

exécuter si la condition est fausse. Cet opérateur est fréquemment utilisé comme

alternative à une instruction if...else. L’operateur conditionnel ternaire est très utilisé

en react notamment en JSX

Les aspects avancés de JavaScript ES6
exemple en JavaScript ECS 6 :
let isMember=true;
let remise=isMember==true?0.2:0.1
[Link]("remise: ",remise)
 Les aspects avancés de JavaScript ES6
Object destructing :

La syntaxe d'affectation de déstructuration est une expression JavaScript qui permet de

décompresser des valeurs de tableaux, ou des propriétés d'objets, dans des variables
distinctes.
Const
personne={nom:"Alami",age:23,adresse:{rue:14,ville:"Tanger"}}
const nom=[Link]
const age=[Link]
const rue=[Link]
const ville=[Link]
//est identique à:
const {nom,age,adresse:{rue},adresse:{ville}} = personne
[Link](nom,age,rue,ville)
Les aspects avancés de JavaScript ES6

SANS destructing :

AVEC destructing :
Les aspects avancés de JavaScript ES6
Destructing d’un array :

Moyen plus rapide et plus simple d'accéder à la variable de décompression à partir

d'un tableau ou d'objets.

let numbers=[10, 20, 30, 40, 50]

const [a, b,...rest] = numbers;
[Link](a,b,rest);
Les aspects avancés de JavaScript ES6
Opérations sur Array:

La méthode map :
map() crée un nouveau tableau en appelant une fonction pour chaque élément
du tableau.
map() appelle une fonction une fois pour chaque élément d'un tableau.
map() n'exécute pas la fonction pour les éléments vides.
map() ne modifie pas le tableau d'origine.
const persons = [
{firstname : "Malcom", lastname: "Reynolds"},
{firstname : "Kaylee", lastname: "Frye"},
{firstname : "Jayne", lastname: "Cobb"}
];
[Link]("demo").innerHTML = [Link](getFirstName);

function getFirstName(item) {
return [Link];
}
Les aspects avancés de JavaScript ES6
La méthode filter

La méthode filter() crée une copie d'une partie d'un tableau donné, filtrée uniquement
pour les éléments du tableau donné qui réussissent la condition implémentée par la
fonction fournie.

Exemple :
const personnes = [

{ nom: "Rami", age: 33, estMember: true },

{ nom: "Fatihi", age: 24, estMember: false },

{ nom: "Chakib", age: 45, estMember: true },

{ nom: "Mounir", age: 37, estMember: false },

];

const persAges=[Link](function(pers){return [Link]>=35})

[Link](persAges )
 Les aspects avancés de JavaScript ES6
const personnes = [

{ nom: "Rami", age: 33, estMember: true },

{ nom: "Fatihi", age: 24, estMember: false },

{ nom: "Chakib", age: 45, estMember: true },

Exercice 1 : { nom: "Mounir", age: 37, estMember: false },

];
Soit l’Array nums=[2,5,8,7,3]

Utiliser la méthode map pour créer un Array contenant les éléments de nums multipliés
par 3. nouvNums=[6,15,24,21,9]

Exercice 2 :

En utilisant les méthodes map et filter créer un Array nomAgés à partir de l’Array
personnes contenant les noms des personnes qui sont membre c-à-d estMember est
true
Les aspects avancés de JavaScript ES6
La méthode find

La méthode find() renvoie le premier élément du tableau fourni qui satisfait la

fonction de test fournie. Si aucune valeur ne satisfait la fonction de test, undefined est
renvoyé.

Exemple :
const personnes = [

{ nom: "Rami", age: 33, estMember: true },

{ nom: "Fatihi", age: 24, estMember: false },

{ nom: "Chakib", age: 45, estMember: true },

{ nom: "Mounir", age: 37, estMember: false },

];

const pers1=[Link](function(pers){return [Link]>=35})

[Link](pers1)
Les aspects avancés de JavaScript ES6
La méthode reduce

La méthode reduce() exécute une fonction de rappel "reducer" fournie par l'utilisateur
sur chaque élément du tableau, dans l'ordre, en transmettant la valeur de retour du
calcul sur l'élément précédent. Le résultat final de l'exécution du réducteur sur tous les
éléments du tableau est une valeur unique.

La première fois que le rappel est exécuté, il n'y a pas de "valeur de retour du calcul
précédent". Si elle est fournie, une valeur initiale peut être utilisée à sa place. Sinon,
l'élément de tableau à l'index 0 est utilisé comme valeur initiale et l'itération
commence à partir de l'élément suivant (index 1 au lieu de l'index 0)
Les aspects avancés de JavaScript ES6
const clients = [

{ nom: "Rami", montant: 4500 },

{ nom: "Karimi", montant: 2300 },

{ nom: "Chaouki", montant: 5500 },

{ nom: "Ramoun", montant: 7700 },

];

const totalMontants=[Link]

(function(total,client){ return total+=[Link]},0);

[Link](totalMontants)
Les aspects avancés de JavaScript ES6
Une fonction correspond à un bloc de code nommé et réutilisable et dont le but est

d’effectuer une tâche précise.

Les fonctions prédéfinies:

Le langage JavaScript dispose de nombreuses fonctions que nous pouvons utiliser

pour effectuer différentes tâches. Les fonctions définies dans le langage sont appelées

fonctions prédéfinies car il nous suffit de les appeler pour nous en servir.

Par exemple, le JavaScript dispose d’une fonction nommée random() (qui appartient

à l’objet Math) et qui va générer un nombre décimal aléatoire entre 0 et 1 ou encore

d’une fonction replace() (qui appartient à l’objet String) qui va nous permettre de
 Les aspects avancés de JavaScript ES6
chercher et de remplacer une expression par une autres dans une chaine de caractères.
Les aspects avancés de JavaScript ES6
Les fonctions personnalisées:

Créer nos propres fonctions va nous permettre de gagner du temps de développement

et de créer des scripts plus facilement maintenables et plus sécurisés.

En effet, imaginions que l’on crée un script complexe ou qu’on utilise du JavaScript

pour créer un site qui contient de nombreuses pages. Il y a de grandes chances qu’on

ait à effectuer plusieurs fois les mêmes opérations à différents endroits de notre ou de

nos script(s). Plutôt que de réécrire les mêmes blocs de codes encore et encore, on va

plutôt créer des fonctions qui vont contenir nos séries d’instruction. Une fois nos

fonctions définies, nous n’aurons plus qu’à les appeler là où on en a besoin.

Les aspects avancés de JavaScript ES6
Pour pouvoir utiliser une fonction personnalisée, en pratique, il faut déjà la définir.

Pour définir une fonction, on va utiliser le mot clef function suivi du nom que l’on

souhaite donner à notre fonction puis d’un couple de parenthèses dans lesquelles

on peut éventuellement définir des paramètres et finalement d’un couple

d’accolades dans lesquelles on va placer le code de notre fonction.

Les aspects avancés de JavaScript ES6
Notez qu’on utilise également ici pour nos deux fonctions une instruction return qui

va permettre à nos fonctions de retourner une valeur qu’on va ensuite pouvoir

manipuler.

Si une fonction a besoin qu’on lui passe des valeurs pour fonctionner, alors on

définira des paramètres lors de sa définition. Lors de son appel, on lui passera des

arguments qui prendront la place des paramètres.

Attention cependant : l’instruction return met fin à l’exécution d’une fonction, ce qui

signifie que toutes les autres opérations qui suivent une instruction return dans une

fonction seront ignorées.

Les aspects avancés de JavaScript ES6
Une fois notre fonction définie, on n’aura plus qu’à l’appeler pour l’utiliser:

Lorsqu’on appelle notre fonction, les arguments passés vont venir se substituer aux

paramètres.
Les aspects avancés de JavaScript ES6
Fonctions anonymes:

Les fonctions anonymes sont, comme leur nom l’indique, des fonctions qui ne vont

pas posséder de nom. En effet, lorsqu’on crée une fonction, nous ne sommes pas

obligés de lui donner un nom.

Généralement, on utilisera les fonctions anonymes lorsqu’on n’a pas besoin d’appeler

notre fonction par son nom c’est-à-dire lorsque le code de notre fonction n’est appelé

qu’à un endroit dans notre script et n’est pas réutilisé.

Création d’une fonction anonyme: On va pouvoir créer une fonction anonyme de la

même façon qu’une fonction classique, en utilisant le mot clef function mais en
 Les aspects avancés de JavaScript ES6
omettant le nom de la fonction après.

Pour exécuter une fonction anonyme, on va notamment pouvoir :

Enfermer le code de notre fonction dans une variable et utiliser la variable comme une

fonction ;

Auto-invoquer notre fonction anonyme : c’est-à-dire qui va s’invoquer (ou s’appeler

ou encore s’exécuter) elle-même dès sa création;

Les aspects avancés de JavaScript ES6

Utiliser un évènement pour déclencher l’exécution de notre fonction : Le langage

JavaScript va en effet nous permettre de répondre à des évènements, c’est-à-dire

d’exécuter certains codes lorsqu’un évènement survient.

Les aspects avancés de JavaScript ES6
Les fonctions fléchées:

Les fonctions fléchées sont des fonctions qui possèdent une syntaxe très compacte, ce

qui les rend très rapide à écrire. Les fonctions fléchées utilisent le signe => qui leur a

donné leur nom à cause de sa forme de flèche.

Les aspects avancés de JavaScript ES6
Les fonctions fléchées n’ont pas besoin du couple d’accolades classique aux fonctions

pour fonctionner puisqu’ils ont été faites pour être déclarées sur une seule et unique

ligne et n’ont pas besoin non plus d’une expression return puisque celles-ci vont

automatiquement évaluer l’expression à droite du signe => et retourner son résultat.

De plus, notez que si notre fonction fléchée n’a besoin que d’un argument pour

fonctionner, alors on pourra également omettre le couple de parenthèses.

Les aspects avancés de JavaScript ES6
La récursivité :

La récursivité est l'outil le plus puissant pour développer des algorithmes et une

grande aide pour résoudre de grandes classes de problèmes. L'idée est qu'une fonction

peut à un certain point s'appeler elle-même, et quand cet appel est fait, continuer à

travailler avec le résultat qu'elle a reçu. L'exemple le plus souvent cité est la fonction

factorielle
AJAX
AJAX = JavaScript et XML asynchrones.

AJAX est l'art d'échanger des données avec un serveur et de mettre à jour des

parties d'une page Web - sans recharger la page entière, et sans attendre.

A sa création, l’AJAX utilisait les technologies suivantes qui lui ont donné son nom :

Le XML pour l’échange de données avec le serveur ;

L’objet XMLHttpRequest pour la communication asynchrone ;

Le JavaScript pour afficher les données de manière dynamique et permettre à

l’utilisateur d’interagir avec les nouvelles informations ;

Le HTML et le CSS pour la présentation des données.

AJAX
Single Page Application: SPA vs MPA
MPA (Multiple Page Application):
SPA et MPA sont tous deux basés sur le protocole HTTP. Dans une architecture MPA
client/serveur traditionnelle, chaque clic de l’utilisateur déclenche une requête HTTP
vers le serveur. Le résultat de cette nouvelle requête est un rafraîchissement complet
de la page, même si une partie du contenu reste inchangée.

SPA – Ajax et JavaScripts

Le cœur d’un SPA est basé sur Ajax, un ensemble de techniques de développement
qui permet au client d’envoyer et de récupérer des données du serveur de manière
asynchrone (en arrière-plan) sans interférer avec l’affichage et le comportement de la
page web. Ajax permet aux pages web et, par extension, aux applications web, de
modifier le contenu de manière dynamique sans avoir à recharger la page entière.
Single Page Application: SPA vs MPA
Single Page Application: SPA vs MPA
 React
React (aussi appelé [Link] ou ReactJS) est

une bibliothèque JavaScript libre développée par Facebook depuis 2013. Le but

principal de cette bibliothèque est de faciliter la création d'application web

monopage, via la création de composants dépendant d'un état et générant une page

(ou portion) HTML à chaque changement d'état.

Ainsi, React encourage la création de composants réutilisables,

avec en entrée des données, pouvant changer au cours du temps.

Par ailleurs, React ne fonctionne qu'avec du JavaScript, permettant une insertion

complète du composant au sein d'une unique classe ou fonction. Pour faciliter

 React
l'écriture de la vue,

l'équipe initiale chez Facebook a développé un langage, JSX, qui permet de générer

des objets Javascript avec une notation similaire à HTML.

Quand on utilise REACT :

React est utilisé pour développer une interface utilisateur riche, en particulier lorsque

vous devez créer des applications d'une seule page. C'est le framework front-end le

plus robuste lorsque vous avez besoin de créer une interface interactive en moins de

temps car il prend en charge les composants réutilisables. React requière une bonne

maitrise de javaScript !!!

React : VDOM
DOM virtuel :

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

représentation idéale ou "virtuelle" d'une interface utilisateur est conservée en

mémoire et synchronisée avec le "vrai" DOM par une bibliothèque telle que

ReactDOM. Ce processus s'appelle la réconciliation.

React ne manipule pas le DOM directement mais une copie interne de celui-ci (les

objets ou éléments React, appelés le DOM virtuel), et produit les modifications sur

l’affichage uniquement lorsque cela s’avère nécessaire.

React : VDOM
Avantages de React
La rapidité
Tous les composants sont rattachés au propre DOM de React JS qu’il va créer. Cela
apporte plus de performance et de flexibilité, car React effectue à chaque fois un
calcul et essaie de trouver la partie qui a besoin d’être changée dans le DOM afin
d’effectuer la mise à jour de la partie concernée. Ce procédé évite à React de faire des
calculs vraiment coûteux.
Les composants sont l’avenir du développement web
React JS vous donne la possibilité de créer vos propres composants. L’objectif est de
vous permettre de les réutiliser plus tard ou les inclure dans vos contenus. Cette
fonctionnalité à elle seule prouve à quel point React JS est productif et facilite la
gestion de vos composants..
Avantages de React
La communauté
La communauté est grandissante et ne cesse jamais de développer des applications
natives iPhone et Android. Cela permet d’économiser du temps de développement. Il
suffit de se servir de ces bouts de code pour avancer dans le développement de votre
application.
Le JavaScript est simple avec [Link]
La syntaxe utilisée par React JS est le JSX, qui est un mixage entre le HTML et le
JavaScript. Ce qui vous permet d’avancer et être plus productif.
L’intelligibilité
Le code de React JS est simple à lire. Il est facile de déterminer les différentes
fonctionnalités de votre application et c’est bénéfique pour la maintenance et
l’expansion de votre projet dans le temps.
Outils utilisé dans un projet React
ECMAScript6
ES6 : Il a été publié en 2015, d’ailleurs vous pouvez aussi le voir aussi sous le nom
ES2015. Beaucoup de choses ont évolué en ES6… Fonctions Fléchées, Classes,
Modules…
Npm (NodeJS)
Pour travailler avec React, vous aurez besoin d’installer [Link] sur votre système.
Cela vous donne l’accès à Node Package Manager (npm) qui va vous permettre
d’installer les bibliothèques JavaScript utiles à votre projet React, le npm qui est le
gestionnaire officiel des paquets de [Link]. Lien pour installer NodeJS :
[Link]
Babel
C’est un compilateur de JavaScript qui transforme le JSX en JavaScript normal.
Outils utilisé dans un projet React
Bundlers
Le bundler condense tout le code de votre application pour n'avoir qu'un seul fichier
javascript à importer dans votre page HTML. L'intérêt majeur c'est que vous n'êtes
plus contraints d'avoir un fichier obèse quand vous codez du JavaScript, où il est
impossible de retrouver votre fonction. Vous pouvez faire des modules (fichiers
isolés), y faire référence dans un autre fichier et tout de même être capable de les
utiliser dans le navigateur sans ajouter une balise. L’outils majeurs sur le marché est
Webpack que nous allons utilisé.

Ainsi, en utilisant create-react-app, vous n’aurez pas à configurer Babel ou

Webpack, car tout se fait de manière automatique.
Installation de l’environnement de
développement React
Création d’un projet React :
[Link]
Go to terminal in Visual studio code
Cd to the directory where you want to create your project
Then execute npx create-react-app my-app
Create React App va vous permettre de générer un squelette de code pour votre
application. Il embarque un certain nombre d'outils préconfigurés, tels que
Webpack, Babel , afin de vous garantir la meilleure expérience de développement
possible.
cd my-app (change the directory to your app)
npm start (lunch your app)
Structure de projet:
Architecture d’une application React
Le dossier node_modules contient toutes les librairies javascript dont vous aurez
besoin
Le dossier public vous y trouverez le fichier [Link] qui est notre point départ
avec la div qui a pour class root qui permet de signifier a React ou est ce qu’il doit
venir s’ancrer.
Le fichier .gitignore a pour rôle de signifier a git les fichiers qui ne doivent pas être
pusher sur le repo distant notamment le dossier node module.
Le fichier [Link] est certainement le fichier qui contient plusieurs
informations sur votre application React notamment les scripts, les dépendances.
Le fichier Readme permet de documenter votre app en Markdown.
Le dossier src est l’endroit où toute la magie de votre application va opérer, on y
retrouve le fichier [Link] qui est le fichier qui charge notre premier composant
le composant App qui est ensuite greffer a la div avec l’id root qui se trouve dans le
fichier [Link] au niveau du dossier public.
JSX

JSX signifie JavaScript XML. Il nous permet d'écrire du HTML dans React.

JSX est une extension du langage JavaScript basé sur ES6 et est traduit en JavaScript

normal au moment de l'exécution.

JSX
Expressions dans JSX
Avec JSX, vous pouvez écrire des expressions à l'intérieur d'accolades { }.
L'expression peut être une variable ou une propriété React, ou toute autre expression
JavaScript valide.
Insertion d'un gros bloc de HTML
Pour écrire du HTML sur plusieurs lignes, mettez le HTML entre parenthèses.
Un élément de niveau supérieur
Le code HTML doit être encapsulé dans UN élément de niveau supérieur. Donc, si
vous aimez écrire deux p, vous devez les mettre à l'intérieur d'un élément parent,
comme un élément [Link], vous pouvez utiliser un "fragment" pour
envelopper plusieurs lignes. Un fragment ressemble à une balise HTML vide : <></>.
JSX
Les éléments doivent être fermés
JSX suit les règles XML et, par conséquent, les éléments HTML doivent être
correctement fermés.
Attribut class = className
L'attribut class est un attribut très utilisé en HTML, mais comme JSX est rendu en
JavaScript et que le mot-clé class est un mot réservé en JavaScript, vous n'êtes pas
autorisé à l'utiliser dans JSX. JSX a résolu ce problème en utilisant à la
place className.
Style inline
Pour styliser un élément en inline, la valeur doit être un objet JavaScript :
<h1 style={{color: "red"}}>Hello Style!</h1>
JSX
Remarque : dans JSX, les expressions JavaScript sont écrites entre accolades, et
puisque les objets JavaScript utilisent également des accolades, le style dans
l'exemple ci-dessus est écrit entre deux ensembles d'accolades {{}}.
Noms de propriété camelCased
Étant donné que le CSS en inline est écrit dans un objet JavaScript, les propriétés à
deux noms, comme background-color, doivent être écrites avec une syntaxe camel :
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
Composants
Architecture d’une application React
Supprimer tout les fichiers barré et résoudre les erreurs afficher
Composants
Les composants sont des morceaux de code indépendants et réutilisables. Elles ont le

même objectif que les fonctions JavaScript, mais fonctionnent de manière isolée et

renvoient du HTML.

Les composants sont de deux types, les composants de classe et les composants de

fonction.

Lors de la création d'un composant React, le nom du composant DOIT commencer

par une lettre majuscule.

Composants
Composant de fonction

Voici le même exemple que ci-dessus, mais créé à l'aide d'un composant Function à la

place.

Un composant Function renvoie également HTML et se comporte à peu près de la

même manière qu'un composant Class, mais les composants Function peuvent être

écrits en utilisant beaucoup moins de code, sont plus faciles à comprendre et seront

préférés dans ce didacticiel.

function Car() {
return (<h2>Hi, I am a Car!</h2>);
}
Composants
Composant de classe

Un composant de classe doit inclure l'instruction extends [Link]. Cette

instruction crée un héritage pour [Link] et donne à votre composant

l'accès aux fonctions de [Link].

Le composant nécessite également une méthode render(), cette méthode renvoie

HTML.
class Car extends [Link] {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Composants
Composants dans Composants

Nous pouvons faire référence à des composants à l'intérieur d'autres composants :

function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}

const root = [Link]([Link]('root'));

[Link](<Garage />);
Composants
Composants dans les fichiers

React consiste à réutiliser le code, et il est recommandé de diviser vos composants en

fichiers séparés.
function Car() { return <h2>Hi, I am a Car!</h2>; }

export default Car;

Pour pouvoir utiliser le composant Car, vous devez importer le fichier dans votre

application.
import Car from './[Link]';

const root = [Link]([Link]('root'));

[Link](<Car />);
Composants
Rendu d'un composant

Maintenant, votre application React a un composant appelé Car, qui renvoie un

élément <h2>.

Pour utiliser ce composant dans votre application, utilisez une syntaxe similaire à

celle du HTML normal : <Car />

const root = [Link]([Link]('root'));

[Link](
<Car />
);
Composants
Personnaliser les composants React

Styliser les composants React

Il existe différentes manières de styler les composants React.

Inline CSS: Il s’agit du style CSS envoyé à l’élément directement via HTML ou JSX.

Vous pouvez inclure un objet JavaScript pour CSS dans les composants React.

Exemple
function Button() {
return (
<button style={{color:"#fff", borderColor:"#5C5CFF",
padding:"10px", backgroundColor:"#5C5CFF" }}>Nom du
bouton</button> ); }
Composants
Modules CSS

Les modules CSS s'assurent que tous les styles d'un composant sont regroupés à un

seul endroit et s'appliquent à ce composant particulier. Cela résout certainement le

problème de portée globale du CSS. La fonctionnalité de composition agit comme

une arme pour représenter les styles partagés entre les états.

Exemple
import './[Link]'; .buttonStyle {
color: #fff;
function Button() { return ( border-color: #5C5CFF;
<button padding:10px;
className='buttonStyle'>Nom du background-color:#5C5CFF;
bouton</button> ); } }
Composants
Affichage conditionnel

L’affichage conditionnel en React fonctionne de la même façon que les conditions en

Javascript. On utilise l’instruction Javascript if ou l’opérateur ternaire pour créer

des éléments représentant l’état courant, et on laisse React mettre à jour l’interface

utilisateur (UI) pour qu’elle corresponde. Considérons ces deux composants :

 Composants
Nous allons créer un composant App qui affiche un de ces deux composants, selon

qu’un utilisateur est connecté ou non :

import Anonymous from './Anonymous';
import Connecte from './Connecte';

function App(props) {
const isLoggedIn = [Link];
1 if (isLoggedIn) {
2 [Link]?<Connecte />:<Anonymous />
return <Connecte />;
}
return <Anonymous />;
}
export default App;

Cet exemple affiche un message différent selon la valeur de la prop isLoggedIn.

Composants
Composants
Les listes et clés

La méthode de tableau JavaScript map() est généralement la méthode préférée pour

boucler sur un tableau.

Ci-dessous, on itère sur le tableau de nombres en utilisant la méthode JavaScript

map(). On retourne un élément pour chaque entrée du tableau. Enfin, on affecte le

tableau d’éléments résultant à listItems

const numbers = [1, 2, 3, 4, 5];

const listItems = [Link](
(n) => <li>{n}</li>
);
Composants
On inclut tout le tableau listItems dans un élément , et on l’affiche dans le DOM :
const root = [Link]([Link]('root'));
[Link](
<ul>{listItems}</ul>
);

Ce code affiche une liste à puces de nombres entre 1 et 5

Composants
Clés

Les clés permettent à React de garder une trace des éléments. De cette façon, si un

élément est mis à jour ou supprimé, seul cet élément sera restitué au lieu de la liste

entière.

Généralement, la clé doit être un identifiant unique attribué à chaque élément. En

dernier recours, vous pouvez utiliser l'index du tableau comme clé.

 Composants
function Car(props) {
return <li>I am a { [Link] }</li>;
}
function Garage() {
const cars = [
{id: 1, brand: 'Ford'},
{id: 2, brand: 'BMW'},
{id: 3, brand: 'Audi'}
];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{[Link]((car) => <Car key={[Link]} brand={[Link]}
/>)}
</ul>
</>
); }
Props
Props

Les props sont des arguments passés dans les composants React.

Les props sont transmis aux composants via des attributs HTML.

// Le composant reçoit l'argument props en tant qu'objet :

function Car(props) { return (<h2>I am a { [Link] }!</h2> ); }

class Car extends Component {

render() {
return (<h2>I am a { [Link] }!</h2> );
}
}

// Ajoutez un attribut "brand" à l'élément Car

<Car brand="Ford" />
States
State est un objet pouvant être mis à jour qui peut être utilisé pour contenir les

données et contrôler le comportement du composant. Seuls les composants de classe

peuvent avoir un état, pas les composants fonctionnels. Lorsque l'état est modifié,

React restitue automatiquement le composant qui provoque une mise à jour

d’affichage. Pour expliquer l’objet state, considérons que nous souhaitions écrire un

composant Message simple qui permet d’afficher le rendu suivant:

States
Si l’utilisateur clique sur le bouton inscription Le rendu devient

Vous allez remarquer que après le click sur le bouton le message Bien Venu visiteur

change pour devenir votre inscription est effectuée, le texte de bouton inscription

change pour devenir merci. D’où il faut avoir deux variables message et btnMessage

dont les valeurs vont être modifiées après le clique sur le bouton, cette modification

doit provoquer un rafraichissement d’affichage. Pour illustrer ces notions de gestion

d’état, on va expliquer ensemble le code de cet exemple.

 States
Etapes à suivre pour créer l’application Message. Ajouter un fichier [Link] dans

le dossier src/components.
import React from 'react‘
class Message extends [Link]{
constructor(props){
super(props)
[Link]={message:"Bien venu visiteur",btnMessage:"inscription"}
}
inscription(){
[Link]({message:"votre inscription esteffectuée",
btnMessage:"merci"} }
render(){
return(<div>
<h2>{[Link]}</h2>
<button
onClick={()=>[Link]()}>{[Link]}</button>
</div>)} }
States
La fonction setState modifie les propriétés puis provoque un appel de la méthode

render(), c’est ainsi que l’interface utilisateur est mise à jour avec les nouvelles

valeurs de {[Link]} et {[Link]}

Events
Gestion des événements

La gestion des événements avec des éléments React est très similaire à la gestion des

événements sur les éléments DOM. Il existe quelques différences de syntaxe :

Les événements React sont nommés en camelCase, plutôt qu'en minuscules.

Avec JSX, vous transmettez une fonction en tant que callBack function ou arrow

function, plutôt qu'une chaîne.

Events
Exemples : onSubmit
 Formulaire
Utiliser le state dans les composants de type fonctions (Hook)
Les Hooks sont une nouveauté de React 16.8. Ils permettent de bénéficier d’un état
local et d’autres fonctionnalités de React sans avoir à utiliser les classes.

class Example extends Component { import React, { useState } from 'react';

constructor(props) {
super(props); function Example() {
[Link] = { count: 0 }; // Déclare une nouvelle variable d'état,
} que l'on va appeler « count »
const [count, setCount] = useState(0);
render() {
return ( <div> <p>Vous avez cliqué return ( <div><p>Vous avez cliqué
{[Link]} fois</p> {count} fois</p>
<button onClick={() => [Link]({ <button onClick={() => setCount(count +
count: [Link] + 1 })}> Cliquez 1)}> Cliquez ici </button> </div> ); }
ici </button> </div> ); } }
Formulaire
Nous déclarons une variable d‘état appelée count, et l’initialisons à 0. React se
rappellera sa valeur entre deux affichages et fournira la plus récente à notre fonction.
Si nous voulons modifier la valeur de count, nous pouvons appeler setCount.
Formulaire
Tout comme en HTML, React utilise des formulaires pour permettre aux utilisateurs
d'interagir avec la page Web.
Vous ajoutez un formulaire avec React comme n'importe quel autre élément.
Cela fonctionnera normalement, le formulaire sera soumis et la page sera actualisée.
Mais ce n'est généralement pas ce que nous voulons qu'il se passe dans React.
Nous voulons empêcher ce comportement par défaut et laisser React contrôler le
formulaire.
Formulaire
Gestion des formulaires
La gestion des formulaires concerne la façon dont vous gérez les données lorsqu'elles
changent de valeur ou sont soumises.
En HTML, les données de formulaire sont généralement gérées par le DOM.
Dans React, les données de formulaire sont généralement gérées par les composants.
Lorsque les données sont gérées par les composants, toutes les données sont stockées
dans l'état du composant.
Vous pouvez contrôler les modifications en ajoutant des gestionnaires d'événements
dans l' onChangeattribut.
Nous pouvons utiliser useState dans les composants de type fonction et state dans les
composants de type class pour garder une trace de chaque valeur d'entrée et fournir
une "source unique de vérité" pour l'ensemble de l'application.
Formulaire
Champs de saisie multiples
Vous pouvez contrôler les valeurs de plusieurs champs de saisie en ajoutant
un attribut name à chaque élément.
Nous allons initialiser notre état avec un objet vide.
Pour accéder aux champs du gestionnaire d'événements, utilisez
la syntaxe [Link] et [Link]
Pour mettre à jour l'état, utilisez des crochets [notation entre crochets] autour du nom
de la propriété.
Formulaire: champ text
Méthode 1 : Composant de classe

[Link]
import React from 'react';
class NameForm extends [Link] { constructor(props) {
super(props);
[Link] = {nom: ''};}
handleChange(event) {
[Link]({nom: [Link]});}
handleSubmit(event) {
alert('Le nom a été soumis : ' + [Link]); [Link]();}
render() { return (
<form onSubmit={[Link]}>
<label> Nom :<input type="text"
name="nom" onChange={[Link]}
/></label>
<input type="submit" value="Envoyer" />
</form>
);
}
}
Formulaire: champ text
Méthode 2 : Composant fonctionnel
[Link]
import React,{ useState } from "react";
const NameForm = () => {
const [nom, setNom] = useState('');
const handleChange =(event)=>{
setNom([Link]);}
const handleSubmit =(event)=>{
alert('Le nom a été soumis : ' + nom);
[Link]();}
return (
<form onSubmit={handleSubmit}>
<label> Nom :<input type="text" name="nom"
onChange={handleChange} /></label>
<input type="submit" value="Envoyer" />
</form>
); }
Formulaire: select
Composant fonctionnel
import React,{ useState } from "react";
const NameForm = () => {
const [ville, setVille] = useState("")

const handleSubmit =(event)=>{

alert(ville); [Link]();}
return (
<form onSubmit={handleSubmit}>
<label>Ville</label>
<select name="ville"
onChange={(e)=>setVille([Link])}>
<option value="tanger">Tanger</option>
<option value="tetouan">Tetouan</option></select>
<input type="submit" value="Envoyer" />
</form>
); }
Formulaire: radio
Composant fonctionnel
import React,{ useState } from "react";
const NameForm = () => {
const[genre, setGenre] = useState("")

const handleSubmit =(event)=>{

alert(genre); [Link]();}
return (
<form onSubmit={handleSubmit}>
<label>Genre</label>
<input type="radio" name="genre" value="Homme"
onChange={(e)=>setGenre([Link])}/>Homme
<input type="radio" name="genre" value="Femme"
onChange={(e)=>setGenre([Link])}/>Femme
<input type="submit" value="Envoyer" />
</form>
); }
Formulaire: checkbox
Composant fonctionnel
import React,{ useState } from "react";
const NameForm = () => {
const [loisirs, setLoisirs] = useState([])
function handleLoisirs(e) {
if() {
setLoisirs([...loisirs, [Link]]);
} else {
setLoisirs([...[Link](
(item)=>item!==[Link])]);
}
}
const handleSubmit =(event)=>{
alert([Link](','));
[Link]();}
return (
<form onSubmit={handleSubmit}>
<label>Loisirs</label>
<input type="checkbox" name="loisirs" value="Sport"
onChange={(e)=>handleLoisirs(e)}/>Sport
<input type="checkbox" name="loisirs" value="Lecture"
onChange={(e)=>handleLoisirs(e)}/>Lecture
<input type="submit" value="Envoyer" />
</form>
); }
 Communication inter-composant
(envoi, réception de données)
export default function Child(props) {
return (<div>{[Link]}</div>)
}

export default function Parent() {

const [data, setData] = useState('');
const parentToChild = () => {
setData("données passées du composant parent au composantenfant.")
}
return (
<div className="App">
<Child parentToChild={data} />
<div>
<Button primary onClick={() => parentToChild()}>Cliquez sur le
parent</Button>
</div>
</div>
)
}
Communication inter-composant
(envoi, réception de données)
Comment passer des données depuis un composant parent vers un composant

enfant

Vous devez avant tout créer deux composants, un parent et un enfant.

Puis, vous importez le composant enfant dans le composant parent et vous le

retournez.

Vous créez ensuite une fonction et un bouton qui déclenchera la fonction de

préparation des données .Vous devez aussi créer un état à l’aide

du Hook useState pour gérer les données.

Communication inter-composant
(envoi, réception de données)
Comme vous pouvez le voir, nous appelons la fonction parentToChild au clic du

bouton Cliquez sur le parent. Lorsque le bouton Cliquez sur le parent est activé, il

stocke le message « Ce sont des données passées du composant parent au composant

enfant. » dans la variable data.

Maintenant, passons cet état de donnée à nos composants enfants. Pour ce faire, vous

utiliser les props.

Passez les données en tant que props lorsque vous appelez le composant enfant.

data est la donnée que nous voulons passer et parentToChild est le nom du prop.

Ensuite, on doit fournir la donnée au composant enfant. Cette étape est très simple.
 Communication inter-composant
(envoi, réception de données)
import './[Link]';
import { useState } from 'react';
import Child from './Child';

function Parent() {
const [dataparent, setDataparent] = useState('');

const childToParent = (childdata) => {

setDataparent(childdata);}
return (
<div className="App">
{dataparent}
<div>
<Child childToParent={childToParent}/>
</div>
</div>
);
}
 Communication inter-composant
(envoi, réception de données)
import React from 'react’;

export default function Child(props) {

const datachild = "données passées du composant enfant au
composant parent."
return (
<div>
<Button onClick={() =>
[Link](datachild)}>
Cliquez sur l'enfant
</Button>
</div>
)
}
Communication inter-composant
(envoi, réception de données)
Comment passer des données depuis un composant enfant vers un composant

parent

Il vous faut d’abord créer une fonction dans le composant parent, fonction qu’on

appellera ici childToParent, et un état vide nommé data.

Ensuite, passez la fonction childToParent en tant que prop dans le composant enfant.

Maintenant, dans votre composant enfant, acceptez cet appel de fonction en tant que

props et attribuez-lui un événement onClick (ou n’importe quel autre event).

Aussi, déclarez un conteneur qui contient des données sous forme de chaîne de

caractères ou de nombre.
Communication inter-composant
(envoi, réception de données)
Passez le conteneur sous forme de paramètre dans la fonction parentToChild.

Ensuite, dans le composant parent, acceptez ces données sous forme de paramètre

dans la fonction childToParent. Puis, attribuez la donnée à l’aide du Hook useState.

Puis, affichez cette variable de donnée dans la fonction de retour.

La donnée enfant va écraser la donnée du parent lorsque le bouton Cliquez sur

l’enfant sera activé.

Consommation des API
UseEffect hook:

useEffect est un hook, qui permet d'exécuter des actions après le render de nos

composants, en choisissant à quel moment et à quelle fréquence cette action doit être

exécutée, avec le tableau de dépendances.

L'utilisation de useEffect se fait :

en passant une fonction de callback à ce hook, qui sera appelée pour exécuter l'effet

ou l’action.

Vous pouvez également fournir un tableau de dépendances en option qui détermine

quand l'effet doit être réexécuté.

Consommation des API
Dans cet exemple, l'effet met à jour le titre du document lorsque la valeur count

change. La dépendance count signifie que l'effet ne sera réexécuté que lorsque la

valeur de count changera.

import React, { useState, useEffect } from 'react';

function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
[Link] = `Count: ${count}`;}, [count]);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div> );}
Consommation des API
Une API facilite l’interaction entre deux applications différentes afin qu’elles puissent

communiquer entre elles : elle sert d’intermédiaire. Le client va demander à l’API une

information, celle-ci va aller chercher cette information dans la base de données puis

la renvoyer au client dans un second temps.

Consommation des API
On crée une application de comparateur de vols que l’on va l’appeler VolScanner.

Celle-ci ne peut pas accéder directement aux informations de toute compagnie

aérienne. En effet, l’application n’a pas accès à leurs base de données... Mais si Air

France a une API à qui on peut demander des informations et qui partage certaines

données de la base de données avec d’autres applications, alors VolScanner peut

demander des informations à l’API d'Air France. L’API lui renvoie alors des données

que VolScanner peut partager !

Les API créent des méthodes standardisées et réutilisables qui permettent aux

développeurs d’accéder à des données spécifiques lors de la construction

 Consommation des API
d’applications.

Prenons un exemple. Quand vous sortez manger, le menu du restaurant offre une

grande quantité d’options déjà prédéterminées. Cela vous simplifie la tâche car vous

savez ce que vous pouvez commander, et donc obtenir plus rapidement votre plat.

Cela donne également une meilleure compréhension de ce que vous voulez pour le

chef. Au final, vous n’avez qu’à demander à la serveuse (API) un plat du menu

qu’elle transmettra en cuisine, la cuisine prépare votre plat, le remet à la serveuse qui

vous le ramène.
Consommation des API
Consommation des APIs en React

REACT n’est pas responsable pour consommer un API,c’est le rôle de développeur

d’ajouter la partie du code responsable de cette operation (utiliser par exemple

fetch,axios……..)
Consommation des API
Consommation d’un API par AXIOS fonctionnel composant

Axios est un client HTTP simple basé sur les promesses compatibles avec le

navigateur et [Link]. Il propose une librairie facile à utiliser et à étendre, le tout dans

un tout petit package.

Installation de axios

Si on est dans un fonctionnel composant, le code doit être placer dans useEffect mais

le deuxième argument doit contenir [],pour que l’exécution se lance uniquement au

premier rendu
Consommation des API
Si on ne met pas l’argument [],le code sera exécuté à chaque changement des

propriété d’états useState. Affichant maintenant le nombre des users, pour ce faire il

faut créer une propriété d’état useState utilisateurs destinée pour récupérer le résultat

users de l’API

useEffect(()=>{
[Link]('[Link]
.then((res)=>{ [Link]([Link])})
},[])
Consommation des API
import React, { useEffect, useState } from 'react'
import axios from 'axios'
export default function App(){
const [utilisateurs,setUtilisateurs]=useState([])
useEffect(()=>{
[Link]('[Link]
.then((res)=>{setUtilisateurs([Link])})
},[])
return(<div>
<h3>liste utilisateurs</h3>
<div>
<h1>nombre d'utilisateurs: {[Link]}</h1>
{[Link](user=>{
return(
<div className='child' key={[Link]}>
<h3 style={{color:"rgb(92, 62, 3)"}}>nom: {[Link]}
{[Link]}</h3>
<p>email:{[Link]}</p>
<p> ville:{[Link]} rue:{[Link]} </p></div>)
})}</div></div>)}
Consommation des API
Consommation d’un API par fetch fonctionnel composant
useEffect(()=>{
fetch('[Link]
.then((response)=>{ [Link](response); return [Link]()})
.then((users)=>{[Link](users);setUtilisateurs(users)})
},[])

Etant donné que les données response ne sont pas du json, on applique la méthode

json à response qui retourne a une promesse d’où l’enchainement de la deuxième

then. La variable users contient cette fois ci un Array contenant des objet javascript

user , ensuite on met à jour la variable d’état utilisateurs en utilisant le setter

setUtilisateurs(users)
Mettre en place d'un système de
routage
Qu'est-ce que le routage ?

Le routage est la capacité d'afficher différentes pages à l'utilisateur. Cela signifie qu'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.

L'idée de Router (Routeur) est tellement utile car vous travaillez avec React, une

bibliothèque Javascript pour programmer des applications d'une seule page (Single

Page Application).

Afin de développer une application React il vous faut écrire plusieurs Component

mais il a besoin d'un seul fichier afin de servir des utilisateurs, c'est [Link].
Mettre en place d'un système de
routage
Par défaut, React vient sans routage. Et pour l'activer, nous devons ajouter une

bibliothèque nommée react-router. Pour l'installer, vous devrez exécuter la

commande suivante dans votre terminal :

Le React Router vous permet de définir des URL dynamiques et de sélectionner un

Component approprié pour render (afficher) sur le navigateur d'utilisateur en

correspodance à chaque URL.

 Mettre en place d'un système de
routage
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";

export default function App() {

return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />}>
<Route path="/blogs" element={<Blogs />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>
);
}

const root = [Link]([Link]('root'));

[Link](<App />);
Mettre en place d'un système de
routage
Exemple expliqué

Nous enveloppons d'abord notre contenu avec <BrowserRouter>.

<BrowserRouter> stocke l'emplacement actuel dans la barre d'adresse du navigateur

à l'aide d'URL propres et navigue à l'aide de la pile d'historique intégrée du

navigateur.

Ensuite, nous définissons notre <Routes>.

Chaque fois que l'emplacement change, <Routes> parcourt toutes ses routes enfants

pour trouver la meilleure correspondance et affiche cette branche de l'interface

utilisateur.
Mettre en place d'un système de
routage
Les routes <Route> sont peut-être la partie la plus importante d'une application React

Router. Ils associent les segments d'URL aux composants, au chargement des données

et aux mutations des données. Grâce à l'imbrication de routes, les mises en page

d'applications complexes et les dépendances de données deviennent simples et

déclaratives.

Le premier <Route> a un chemin d'accès / et rend le composant Home.

<Link> est utilisé pour définir l'URL et garder une trace de l'historique de navigation.

Chaque fois que nous établirons un lien vers un chemin interne, nous utiliserons à

la <Link to=""> place de <a href="">.

 Mettre en place d'un système de
routage
import { Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
</>
)};
export default Layout;
Mettre en place d'un système de
routage
useParams():

useParams() renvoie un objet clé/valeur des paramètres dynamique de l’URL

Mettre en place d'un système de
routage
Exemple
Concevoir une application avec Redux
Présentation de la bibliothèque Redux
Concevoir une application avec Redux
A gauche sans Redux, lorsqu’un composant est mis à jour, un état (state) global à
l’application doit être stocké dans le composant racine donc une mise à jour doit
remonter jusqu’à la racine puis redescendre dans tous les composants qui ont besoin
de cette information mise à jour. Ce qui est assez laborieux et coûteux car les
composants intermédiaires par lesquels passent l'état n'en ont pas nécessairement
besoin.
Avec Redux, on a un store qui est séparé du reste de l'application et qui peut être mis
à jour depuis n’importe quel composant et qui sera mis à jour pour tous les
composants qui sont abonnés au store.
Le store permet de simplifier les changements de données au sein de l’application en
centralisant tout à un unique endroit.
Concevoir une application avec Redux
Découverte de Redux (Le state, Les actions, Le reducer, Le store)
Concevoir une application avec Redux
Le store Redux regroupe l'état, les actions et les reducers qui composent votre

application. Le store a plusieurs missions : contient l'état actuel de l'application à

l'intérieur, permet d'accéder à l'état actuel, permet à l'état d'être mis à jour.

Les actions envoient les données de l’application vers un reducer. Ce sont les seules

sources d’information pour un reducer. Elles sont définies comme un objet

Javascript qui a une propriété ‘type’ pour indiquer le type d’action réalisé

Le reducer est une fonction pure (sans état) qui prend en entrée le précédent state et

un action pour retourner en sortie le prochain state.

Les actions sont envoyées aux Reducer par la fonction dispatch().

Concevoir une application avec Redux
Installation de l’API Redux

Création du store:

Dans ce code, nous passons le reducer à la fonction Redux createStore, qui renvoie

un objet store. Nous passons ensuite cet objet au composant Provider, qui est rendu en

haut de notre arborescence de composants.

Cela garantit que chaque fois que nous nous connectons à Redux dans notre

application via react-redux connect, le magasin est disponible pour nos composants.
Concevoir une application avec Redux
//[Link]
import { legacy_createStore } from "redux";
import Counterreducer from "./Reducers/Counterreducer";

const store = legacy_createStore(Counterreducer)

export default store;

//[Link]
import Counter from './Components/Counter';
import {Provider} from 'react-redux'
import store from './Redux/Store';

const root = [Link]([Link]('root'));

[Link](
<Provider store={store}>
<Counter />
</Provider>
);
Concevoir une application avec Redux
Création des actions:

Une action est un objet JavaScript simple qui a un champ type. Vous pouvez

considérer une action comme un événement qui décrit quelque chose qui s'est passé

dans l'application . Un objet d'action peut avoir d'autres champs avec des informations

supplémentaires sur ce qui s'est passé. Par convention, nous plaçons ces informations

dans un champ appelé payload

const increment = { type:'increment'}

const decrement = { type:'decrement'}

export {increment , decrement } ;

 Concevoir une application avec Redux
Création du reducer:

Un réducteur est une fonction qui reçoit le courant state et un action objet, décide

comment mettre à jour l'état si nécessaire, et renvoie le nouvel état : (state, action) =>

newState. Vous pouvez considérer un réducteur comme un écouteur d'événement qui

gère les événements en fonction du type d'action (événement) reçu.

const Counterreducer = (state={count:0},action) =>{

switch([Link]){
case 'increment': return {...state,count:[Link]+1};
case 'decrement': return {...state,count:[Link]-1};
default: return state;
}
}
export default Counterreducer;
 Concevoir une application avec Redux
Récupérer State et Envoi des Actions :

Le store Redux a une méthode appelée useDispatch qui permet de transmettre un

objet action du composant vers le reducer.

useSelector lit une valeur à partir de l'état du magasin et s'abonne aux mises à jour.
import { dec, inc } from '../Redux/Actions/ActionCounter';
const Counter = () => {
const count = useSelector( state => [Link])
const dispatch = useDispatch();
return (
<div>
<p>{count}</p>
<button onClick={()=> dispatch(inc)}>Incrémenter</button>
<button onClick={()=> dispatch(dec)}>Décrémenter</button>
</div>
);};
Concevoir une application avec Redux
Payload:

l'action a une propriété supplémentaire payload qui contient des informations

supplémentaires sur l’action. Vous pouvez ajouter n'importe quelle propriété

nécessaire à l'objet d'action pour transporter les données nécessaires pour la mise à

jour d'état. const addUser=(user)=>{

return
{type:"addUser",payload:user}
}
Utilisez combineReducers pour ajouter
de nouvelles fonctionnalités
Avec Redux on a un seul state et un seul reducer pour toute notre application. C’est

un avantage car cela permet de faciliter l’organisation et l’accessibilité de notre state.

En revanche, cela pose un problème : plus notre application grandit et plus le reducer

va devenir long et complexe. Heureusement, Redux a pensé à tout et propose une

solution :combineReducers !

combineReducers va nous permettre d’organiser notre state en attribuant chaque

partie du state à un sous-reducer différent.

Utilisez combineReducers pour ajouter
de nouvelles fonctionnalités
Utilisez combineReducer:

On commence par importer combineReducer depuis Redux :

On va ensuite appeler cette fonction avec un objet en paramètre.

Cet objet va permettre d’indiquer, pour chaque propriété du state, quel reducer

utiliser :
Utilisez combineReducers pour ajouter
de nouvelles fonctionnalités
const initialState = {
users: [
{ id: "1", name: "Mohamed Allaoui", email: "allaoui@[Link]"},
{ id: "2", name: "Hind Benanni", email: "benani@[Link]" }
],
posts: [
{
id: 1,
userId: 1,
title: "sunt aut facere repellat provident occaecati excepturi
optio reprehenderit",
body: "quia et suscipit\nsuscipit recusandae consequuntur
expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum
rerum est autem sunt rem eveniet architecto"
},
]
};
Utilisez combineReducers pour ajouter
de nouvelles fonctionnalités
const Reducer = (state = initialState,action) =>{
switch([Link]){
case 'addUser': return
{...state,users:[...[Link],[Link]]}
case 'updateUser': {
const U = [Link](item => [Link] ===
[Link]);
[Link] = [Link];
[Link] = [Link];
return state;}
case 'addPost': {
return {...state,posts:[...[Link],[Link]]}
}
default: return state;
} }
Utilisez combineReducers pour ajouter
de nouvelles fonctionnalités
const addUser=(user)=>{
return {type:"addUser",payload:user}
}

const updateUser=(newuser)=>{
return {type:"updateUser",payload:newuser}
}

const removeUser=(id)=>{
return {type:"removeUser",payload:id}
}

const addPost=(P)=>{
return {type:"addPost",payload:P}
}
export {addUser,updateUser,removeUser,addPost};
Utilisez combineReducers pour ajouter
de nouvelles fonctionnalités
import { combineReducers } from 'redux';
const initialStateposts = [
{
id: 1,
userId: 1,
title: "sunt aut facere repellat provident occaecati excepturi
optio reprehenderit",
body: "quia et suscipit\nsuscipit recusandae consequuntur expedita
et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est
autem sunt rem eveniet architecto"
},]

const postsReducer = (state = initialStateposts,action) =>{

switch([Link]){
case 'addPost': {
return [...state,[Link]]
}
default: return state;
}
}
Utilisez combineReducers pour ajouter
de nouvelles fonctionnalités
const initialStateusers = [
{ id: "1", name: "Mohamed Allaoui", email: "allaoui@[Link]"},
{ id: "2", name: "Hind Benanni", email: "benani@[Link]" }
]

const usersReducer = (state = initialStateusers,action) =>{

switch([Link]){
case 'addUser': return [...state,[Link]]
case 'updateUser': {
const U = [Link](item => [Link] === [Link]);
[Link] = [Link];
[Link] = [Link];
return state;}
case 'removeUser': {
return [Link](item => [Link] !== [Link])}
default: return state;
}
}
Utilisez combineReducers pour ajouter
de nouvelles fonctionnalités
const rootReducer= combineReducers({
users : usersReducer,
posts : postsReducer
})

export default rootReducer;

Utilisez combineReducers pour ajouter
de nouvelles fonctionnalités
const rootReducer= combineReducers({
users : usersReducer,
posts : postsReducer
})

Ici, nous combinons deux réducteurs différents, usersReducer et postsReducer, en un

seul réducteur racine. Les noms des états correspond aux clés tels qu'ils sont passés à

combineReducers().

Pour accéder à la liste des utilisateurs dans un autre composant:

const AnotherComponent = () => {

const users = useSelector(state => [Link]);
 Simplifiez vos Reducer avec Immer
Le destructuring, ce n’est pas simple, surtout lorsqu’il y a plusieurs niveaux, des

tableaux, etc. Voici par exemple le même changement avec du destructuring :

// avec le destructuring
return {...state,users:
[...[Link],
{ name: 'sans Utiliser Immer', email:sans_immer@[Link]]}

Avec Immer, plus besoin de destructuring, on fournit un state initial et des instructions

de modifications, puis Immer va produire un nouveau state pour nous.

import produce from 'immer';

produce(state, (draft) => {

// On ajoute un user à la liste
[Link]({ name: 'Utilisateur Immer', email : immer@[Link]});
});
Manipulation des selectors
Utilisation des props et réalisation des calculs dans les selector:

Considérons une application de e-commerce qui affiche la liste des produits et leur

détail. La liste des produits est stockée dans le store Redux sous forme de tableau

d'objets. Chaque objet représente un produit avec des propriétés telles que le nom, la

description, le prix, etc.

Voici comment vous pourriez utiliser les props et réaliser des calcule dans les

sélecteurs Redux pour afficher les détails d'un produit sélectionné dans un composant:
 Manipulation des selectors
const ProductList = ({ products }) => {
return (<div>
{[Link](product => (
<Product key={[Link]} id={[Link]} /> ))}
</div>);};
export default ProductList;
import { useSelector } from 'react-redux';
const Product = ({ id }) => {
const product = useSelector(state => [Link](
product => [Link] === id); );
return (
<div>
<h2>{[Link]}</h2>
<p>{[Link]}</p>
<p>{[Link]}</p>
</div>
);
};
export default Product;
Manipulation des selectors
Déclaration globale des selectors (en dehors des composants)

Lorsqu’un selector devient complexe ou que l’on a besoin de le réutiliser, on

peut déplacer le selector en dehors du composant.

Cela permet également de donner un nom au selector, ce qui aide à la lecture du code.

Reprenons l’exemple précédent et voyons ce qu’il se passe si l'on déclare le selector

en dehors du composant :

export const getProduct = (state, id) => {

return [Link](product => [Link] === id);
};
 Manipulation des selectors
const ProductList = ({ products }) => {
return (<div>
{[Link](product => (
<Product key={[Link]} id={[Link]} /> ))}
</div>);};
export default ProductList;
import { useSelector } from 'react-redux';
const Product = ({ id }) => {
const product = useSelector(state => getProduct(state, id) );
return (
<div>
<h2>{[Link]}</h2>
<p>{[Link]}</p>
<p>{[Link]}</p>
</div>
);
};
export default Product;
Redux Devtools
Pour installer l’extension, il faut se rendre sur le store correspondant à votre

navigateur :

Le Chrome Web Store pour Google Chrome.

Le Mozilla Add-ons pour Firefox.

Une fois l’extension installée, vous pouvez ouvrir les outils de développeurs de votre

navigateur. Vous devriez voir un nouvel onglet “Redux” !

Redux Devtools
Connectez Redux à l’extension

Pour connecter votre store à l’extension, on commence par récupérer les devtools s'ils

existent. Il ne reste plus qu'à passer la variable enhancer en second paramètre de la

fonction createStore de Redux. Si vous lancez l’application, vous devriez voir des

données s’afficher dans le Redux Devtools !

const enhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__

const StoreCount = legacy_createStore(ReducerCounter, enhancer());

export default StoreCount;

Redux Toolkit
Le code Redux est très explicite. C’est à la fois un avantage puisque le code est facile

à comprendre, et un inconvénient puisqu’il faut écrire beaucoup de code pour chaque

nouvelle fonctionnalité.

Il existe de une nouvelle version en Redux qui permettent de réduire un peu la

quantité de code à écrire dans Redux : Redux-Toolkit.

Installez Redux Toolkit: [Link]

reducers-to-the-store

npm install @reduxjs/toolkit react-redux

 Redux Toolkit
Utilisez configureStore pour initialiser Redux

La fonction configureStore permet de créer le store Redux plus simplement. Cette

fonction attend un objet en paramètre avec une propriété reducer qui

utilise automatiquement combineReducer ! De plus, la fonction configureStore se

connecte automatiquement aux Devtools.

Voici à quoi ressemble le fichier [Link] avec Redux-Toolkit :

import { configureStore } from '@reduxjs/toolkit'
import counetrReducer from './CounterSlice'
export const Store = configureStore({
reducer: {
counter: counetrReducer,
},
Redux Toolkit
Unifiez actions et reducers grâce aux slices de Redux-Toolkit

Les slices de Redux Toolkit permettent de combiner les actions et le reducer qui va

avec, d’un seul coup.

Pour créer un slice, on utilise la fonction createSlice de Redux-Toolkit.

Cette dernière attend un objet en paramètre avec différentes propriétés :

name : le nom du slice (le nom de la fonctionnalité). Ce nom est utilisé comme

préfixe pour les noms des actions du slice.

initialState : le state initial du slice.

Redux Toolkit
reducers : un objet qui définit à la fois les actions et la logique du reducer

correspondant.

L’objet passé à la propriété reducers va définir les actions et le reducer : chaque

propriété de l’objet correspond à une action, et définit une fonction de mise à jour du

state .
 Redux Toolkit
import { createSlice } from '@reduxjs/toolkit'

const initialState = {
count: 0,
}
export const CounterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
[Link] += 1
},
decrement: (state) => {
[Link] -= 1
},
incrementByAmount: (state, action) => {
[Link] += [Link]
},
},
})
Redux Toolkit
Récupérez le reducer et les actions

La fonction createSlice retourne un objet avec les propriétés suivantes :

name : le nom du slice.

reducer : le Reducer créé par Redux-Toolkit.

actions : un objet contenant les action creators.

On va donc déstructurer le slice pour récupérer le reducer et les actions :

const { actions, reducer } = CounterSlice

export const { increment,decrement } = actions;
export default reducer;