SlideShare une entreprise Scribd logo
1  sur  51
Introduction
à
M. Abdoulaye DIENG Avril 2021
React
Objectif général
Prendre en main l’une des bibliothèques JavaScript
les plus utilisés pour créer des interfaces utilisateurs
2
Objectifs spécifiques
• Découper l’interface utilisateur avec les composants
• Passer des informations (données ou instructions) d’un
composant à son composant fils avec « props »
• Gérer l’état local d’un composant avec « state »
• Afficher une listes de composants avec map()
• Afficher un composant en fonction de l’état de l’application
• Interagir avec un utilisateur grâce à la gestion des
événements
• Interagir avec un utilisateur par le biais des formulaires
• Communiquer avec un serveur HTTP avec AJAX
• Afficher des vues en fonction de l’URL avec le routage
• Mettre en forme un composant
3
Sommaire
8) Affichage conditionnel
9) Événements
10) Formulaires
11) Communiquer avec un
serveur HTTP
12) Routage
13) Style
1) Présentation de React
2) Environnement de
développement
3) JSX
4) Composants
5) Props
6) État local
7) Listes
Présentation de React
• Problématique : comment développer efficacement (rapidité,
facilité, portabilité du JS, …) une application Web ?
• Solution : ensemble de classes, fonctions et utilitaires « prêt à
l’emploi »
• React : bibliothèque JavaScript open source pour la création
d’interfaces utilisateur
• Créée par Jordan Walke, développeur à Facebook, en fin 2011
• Quelques principes de React
 DOM virtuel : arborescence d'objets JS en mémoire utilisée
pour lister les éventuelles modifs de la vue afin d’éviter de
recréer entièrement le DOM du navigateur (video)
 création de composants réutilisables, avec en entrée des
données, pouvant changer au cours du temps
 Usage : Application monopage ou mobile 5
Environnement de
développement
1) Installer les prérequis node.js et NPM
Télécharger et installer la dernière version LTS de Node.js à
partir de https://nodejs.org/en/download/
2) Installer Create-React-App
npm install --global create-react-app
3) A partir d’un répertoire choisi, créer un nouveau projet React
create-react-app nom-du-projet
Exemple : créer le projet nommé « react-classroom »
4) Naviguer dans le dossier du projet
cd nom-du-projet
5) Lancer le serveur de développement
npm start
6
JSX
présentation
• JSX (JavaScript eXtensible Markup Language) : syntaxe de type
HTML / XML qui facilite l’écriture du HTML / XML dans du JS
• JSX est destiné au transpilateur (comme Babel) pour être traduit
en objets JavaScript standard
• Exemple en JSX
const greeting= <h1 className="speak"> Hello, world!</h1>;
• Transpilation de l’exemple
const greeting = React.createElement(
'h1', {className: 'speak'}, 'Hello, world!’
);
• Objet ou élément React créé par l’exemple
const greeting = {
type: 'h1',
props: {
className: 'speak',
children: 'Hello, world!’
}
};
7
JSX
types d’élément
• Eléments React : briques élémentaires constitutifs et visibles
des applications React.
• Les éléments React sont retournés par les composants (à voir
plus loin)
• Élément natif : nom commençant par une lettre minuscule
Exemple : <h1 …
• Élément défini ou importé dans le fichier JavaScript : nom
commençant par une lettre majuscule
Exemple : <NewsFeed …
8
JSX
attribut
• Attribut : paire (nom,valeur) qui caractérise un élément
• Les attributs fournissent des valeurs de configuration d’un
élément
• Nomenclature des attributs : éviter les mots clé JS et utiliser le
camelCase
Exemples : className au lieu de class
htmlFor au lieu de for
• Types de valeur d’un attribut :
 Littéral chaîne de caractères
Ex : <MyComponent user = "Ngor Diouf" />
 Booléen : par défaut
Ex : <MyComponent connected />
 Expression JS
Ex : <MyComponent total = {1 + 2 + 3 + 4} />
9
JSX
types d’enfant
• Enfant : contenu présent entre 2 balises (ouvrante et
fermante)
• Littéral chaîne de caractères
Ex : <MyComponent>Bonjour le monde !</MyComponent>
• Élément JSX
Ex : <header>
<Nav />
<SearchBox />
</header>
• Expression JavaScript à enrober avec des accolades { }
Ex : <h1>{i == 1 ? 'True!' : 'False'}</h1>
• Les types d’enfant peuvent être mixés
10
JSX
syntaxes à respecter
• One Top Level Element : le code HTML doit être enveloppé
dans un seul élément parent
Ex : <div>
<h2>Content</h2>
<p>This is the content!!!</p>
</div>
• Tout élément doit être fermé
Ex : <input type="text" />;
• Plusieurs lignes de HTML doivent être mises entre parenthèses
Ex : (
<ul>
<li>Apples</li>
<li>Bananas</li>
</ul>
) 11
Composants
illustration
12
Liste des étudiants de JS Dev
Fatou Dia
Saliou Diouf
Alain Gomis
X
X
X
Nom de l’étudiant Ajouter
Composant App
Composant Classroom
Composant Student
React Classroom App
Home | About
Composant AddStudent
Composant Header
Composant About
Composants
présentation
• Composant : partie de l’application
• Les composants permettent de découper l’interface utilisateur
en éléments indépendants et réutilisables
• Composant : code JS qui renvoient des éléments React ou
d’autres composants décrivant ce qui doit apparaître à l’écran.
• Deux types de composant
 Fonction composant
Ex : function Welcome() {
return <h1>Hello World !</h1>
}
 Composant à base de classe
Ex : class Welcome extends React.Component {
render() {
return <h1>Hello World !</h1>;
}
}
13
Composants
exemple
14
Instancier Classroom dans App
• remplacer tout le contenu de la div de src/App.js par <Classroom />
• Importer Classroom à partir de ./components/Classroom
src/components/Student.js src/components/Classroom.js
Props
présentation
• Props (ou propriété) : donnée ou gestionnaire d’événement
fourni à un composant par son composant parent
• Syntaxe d’envoi d’une propriété par un composant parent
<ComposantFils nomPropriété = valeur …
• Syntaxes d’accès à une propriété par un composant fils
 Pour une fonction composant :
props.nomPropiété
avec props parmètre de la fonction
 Pour un composant à base de classe
this.props.nomPropiété
• Les props sont ensuite utilisées par le composant fils ou
transmises aux composants enfants.
• Les props sont en lecture seule
15
Props
exemple
• Dans le composant App, ajoutez la propriété nom="JS Dev"
au composant fils Classroom
• Au composant Classroom, remplacez <Student /> par
<h1>Liste des étudiants de {this.props.nom}</h1>
<ul>
<Student nom="Fatou Dia" />
<Student nom="Saliou Diouf" />
<Student nom="Alain Gomis" />
</ul>
• Au composant Student
 passer le paramètre props
 remplacer tout le contenu du return par :
<li> {props.nom} </li>
16
État local
présentation
• État local d’un composant : évolution, en fonction
d’événements (click, submit, …), des données qu’il contient
• Ces données variables doivent être stockées dans « state » : un
objet natif de tout composant à état
• Initialisation de state : dans le constructeur avec la syntaxe
this.state = {nomVar1:val1, nomVar2:val2, …}
• Usage de state : partout dans le composant avec la syntaxe
this.state.nomVar
• Modif de state : via la méthode setState() avec les syntaxes
 this.setState({nomVar1 : newVal1, … } )
 this.setState(prevState => (
{nomvar1 : expr contenant prevState.nomVar1 … }
) ) // Si la valeur précédente de la propriété est utilisée
• Toute modification de state => nouvel appel de render() 17
État local
exemple
18
src/components/Classroom.js
Listes
présentation
• La plupart des app Web listent des données
• .map(): méthode de Array qui
 parcourt un tableau pour appliquer un même traitement
sur chaque élément
 retourne le tableau des résultats du traitement
Exemple
doubled = [1,2,3,4].map(val => 2*val) // [2,4,6,8]
• Une syntaxe d’une liste de composants
liste.map(item => <NomComposant
key={item.id}
prop1={item.prop1}
prop2={item.prop2}
…
/>)
19
Listes
clé
• Chaque item de la liste doit être associé à une clé unique et
stable
• Les clés permettent à React de réafficher plus rapidement la
liste en cas de modification (ajout, suppression, …)
• Exemple d’une insertion d’un élément au début d’une liste
sans clé
DOM virtuel à modifier
<ul>
<li>Dakar</li>
<li>Thies</li> 
</ul>
Dakar et Thies sont d’abord remplacés par Tamba et Dakar,
puis Thies est rajouté 20
DOM virtuel modifié
<ul>
<li>Tamba</li>
<li>Dakar</li>
<li>Thies</li>
</ul>
Listes
exemple
Dans la render() du composant Classroom, remplacez les 3 lignes
de <Student> par
21
Supprimer key et constater le warning sur la console
Affichage conditionnel
présentation
• Affichage conditionnel : afficher du contenu en fonction de
l’état de l’application
• Structure conditionnelle if
 Ex (afficher « Loading… » lors du chargement des données) :
if(!isLoading) { return null }
return <p>Loading...</p>
• Opérateur ternaire
 condition ? trueValue : falseValue.
 Ex :
return <div>{isLoading ? <p>Loading...</p> : null}</div>;
• Opérateur booléen &&
 true && expression vaut expression
 false && expression vaut false.
 Ex : return <div>{isLoading && <p>Loading...</p>}</div>;
22
Affichage conditionnel
exemples alternatifs
• Exemple 1
Juste avant le return du composant Classroom, ajoutez
if(!learners.length){
return(
<div>
<h1>Liste des étudiants de {this.props.nom}</h1>
<p>Aucun etudiant</p>
</div>
)
}
• Exemple 2
Dans le return du composant Classroom, juste avant la ligne
learners.map…, insérez :
(!learners.length) ? <p>Aucun etudiant</p> :
• Exemple 3
Dans le return du composant Classroom, juste avant la ligne
learners.map…, insérez :
(learners.length) &&
23
Événements
présentation
• Événements React = événements HTML
• L’écoute se fait inline çàd sur l’élément JSX
• Syntaxe (en camelCase) : onNomEvenement = {handler}
• Le handler ou gestionnaire d’événement étant une callback, il
faut la lier (bind) avec son composant
• Comment lier le handler avec son contexte ?
 Sur l’élément
onNomEvenement = {handler.bind(this)}
 Définition en fonction fléchée
handler = (…) => { … }
 Dans un constructeur (meilleure pour la perf. )
this.handler = this.handler.bind(this)
• NB : tout éventuel autre paramètre du handler doit être placé
après this 24
Événements
exemple
Dans le composant Classroom,
• ajoutez la méthode handleDelete()
handleDelete(id) {
this.setState(prevstate => ({
students : prevstate.students.filter(
student => student.id !== id)
}))
}
• ajoutez au constructeur
this.handleDelete = this.handleDelete.bind(this);
• remplacez
<Student key={learner.id} nom={learner.nom} />
par
<Student key={learner.id} learner={learner}
handleDelete={this.handleDelete}
/>
25
Événements
exemple – suite et fin
Le code du composant Student devient
26
Formulaires
composant contrôlé
• Pour contrôler l’état (initial et modifié) des éléments input
(texte), textarea et select, React leur assigne directement les
attributs value et onChange
• L’attribut value sera étroitement lié à une donnée du state
• L’attribut onChange permettra de modifier la donnée du state
• Exemple
…
this.state = {opinion: 'Votre opinion…' };
…
handleChange(event) {
this.setState( {opinion:event.target.value} );
}
…
<textarea value={this.state.opinion}
onChange={this.handleChange}/> 27
Formulaires
gestion de plusieurs champs contrôlés
• Pour gérer plusieurs champs contrôlés ajouter un
attribut name à chaque champ
• Dans un seul handleChange,
 accéder à chaque champ en fonction des valeurs
de event.target.name et de event.target.value.
 mettre à jour le state avec setState et
[event.target.name] : event.target.value
28
Formulaires
gestion de plusieurs champs contrôlés - exemple
…
this.state = {opinion:'Votre opinion…' , age:null };
…
handleChange(event) {
const name = event.target.name;
const value = event.target.value;
this.setState( { [name]:value } );
}
…
<textarea name='opinion' value={this.state.opinion}
onChange={this.handleChange} />
<input name="age" value = {this.state.age}
onChange = {this.handleChange} />
29
Formulaires
exemple - composant AddStudent
30
Après avoir défini addStudent, l’instancier dans Classroom en ajoutant
1) import AddStudent from "./AddStudent"
2) le code <addStudent /> juste avant <h1>
Formulaires
validation - exemple
• Dans le constructeur
this.state = { opinion: 'Votre opinion',
age: null, error_msg: '' };
• Dans un gestionnaire
…
let err = '';
if (name === "age") {
if (value !="" && !Number(val)) {
err = <strong>L’âge doit être un nombre</strong>;
}
}
this.setState( {error_msg: err} );
• Dans le template, juste après le champ « age »
{ this.state.error_msg }
• Exemple
N’activer le bouton de soumission que si le nom de l’étudiant est
saisi 31
Formulaires
gestion de la soumission
• Événement submit sur la balise <form>
• Pour le gestionnaire
 Passer en paramètre un objet de type Event
 Empêcher la soumission automatique avec
.preventDefault()
 Récupérer via le state toute valeur soumise
 Traiter les valeurs soumises
 Réinitialiser éventuellement tout champ
32
Formulaires
exemple suite et fin
Dans AddStudent, ajoutez l’attribut onSubmit à la balise form
et la méthode handleAdd
33
Dans Classroom, ajoutez l’attribut handleDelete à AddStudent
et la méthode handleAdd
Communiquer avec un serveur
présentation
• Une App React est, dans la plupart des cas, cliente d’un
serveur HTTP distant
• Principales méthodes HTTP : get (récupérer), post (ajouter),
put (modifier entièrement), patch (modifier partiellement) et
delete (supprimer)
• La communication avec un serveur se fait le plus souvent avec
l'objet XMLHttpRequest
• Qlq bibliothèques facilitant l’implémentation des requêtes
AJAX : Axios, jQuery AJAX, Windows.fetch
• Il est recommandé de déclencher une requête get dans
ComponentDidMount() : méthode appelée immédiatement
après que le composant est monté (inséré dans l’arbre)
34
Communiquer avec un serveur
exemple
• Installer le client HTTP « axios » dans le projet
npm install axios
• Installer globalement le serveur factice « json-server »
npm install --g json-server
• Dans un dossier quelconque, créer learners.json (contenu
dans diapo suivante )
• À partir du dossier contenant learners.json, démarrer
json-server sur un autre port que 3000 (utilisé aussi par React)
avec par exemple la commande suivante :
json-server --watch learners.json --port 3333
35
Communiquer avec un serveur
contenu de learners.json
36
Communiquer avec un serveur
exemple – récupérer tous les étudiants
• Dans le render()
 ajouter juste avant le return
const isLoading = this.state.isLoading;
 juste avant learners.map, ne mettre que la ligne
(isLoading) ? <p>Loading...</p> :
37
Dans Classroom, importer axios à partir de axios, puis
• Dans le constructeur, le state devient
this.state = {isLoading:true, students:[], error:null }
• Ajouter la méthode
Communiquer avec un serveur
exemple – supprimer un étudiant
Dans Classroom, modifier handleDelete
38
Communiquer avec un serveur
exemple – ajouter un étudiant
Dans Classroom, modifier handleAdd
39
Routage
présentation
• Principe du SPA : charger une seule page (index.html) et y
présenter, au besoin, tout composant de l’application
• Routage : permettre à l’application de naviguer entre les
différents composants, en changeant l'URL du navigateur, en
modifiant l'historique du navigateur et en gardant l'état de
l'interface utilisateur synchronisé.
• react-router-dom : la + populaire bibliothèque permettant
d’implémenter sur React le routage sur un navigateur
• Principaux composants de react-router-dom
 BrowserRoute : parent des autres et effectue le routage
 Route : définit une route entre un chemin (path) et un
composant (component)
 Switch : parent de Route et affiche la 1ère route qui
correspond à l'URL
 Link : crée une ancre de navigation
40
Routage
exemple - route
• Installer le router : npm install react-router-dom
• Créer le composant src/components/pages/About.js retournant
41
• Dans App.js, importer About et ajouter la ligne
import {BrowserRouter,Route,Switch} from "react-router-dom";
• De plus App.js retourne maintenant
Routage
exemple - navigation
1) Créer le composant src/components/layout/Header.js
42
2) Dans App.js, instancier Header juste avant <Switch>
Style
présentation
Il y a plusieurs façons de donner du style au contenu
• Style en ligne
• Feuille de style CSS
• Module CSS
43
Style
style en ligne
• Usage
 style limité à un contenu (peu recommandé)
 style calculé dynamiquement au moment de l‘affichage
(çàd appliquer un style en fonction d’une condition)
• Principe
Ajouter la propriété style à l’élément ou au composant
• Syntaxe
 style = { objet }
 Clés de l’objet = versions camelCase des propriétés CSS
 Valeurs de l’objet = versions string des valeurs CSS
44
Style
style en ligne - exemples
• Dans addStudent.js
envelopper les enfants de form dans la div suivante
<div style={{display:"flex", marginTop:"5px"}} >
…
<input style={ {flex:"10"} } />
• Dans Student.js
<div style={{textAlign:"left",
borderBottom:"1px dotted"}}>
<button style={ {float:"right"}} … >
• Dans TodoItem.js (Style dynamique)
<p style={{color: isDone?'green':'red'}}>
{title}
</p> 45
Style
feuille de style CSS
• Usage
Règles de style partagées
• Principe
 Écrire les règles de style CSS classiques dans un fichier .css
 Importer le .css dans tout composant au besoin
 Utiliser la propriété className pour appliquer les classes
46
Style
feuille de style CSS - exemple
• Dans App.css, ajoutez
.centrer {
width:80%;
margin-left:auto; margin-right:auto;
text-align:center
}
• Dans Header.js
<header className = "centrer" >
• Dans Classroom.js
<div className = "centrer" >
• Dans About.js (après avoir remplacé React.fragment par div )
<div className = "centrer" > 47
Style
module CSS
• Usage
Partager des classes sans avoir des conflits de noms
• Principe
 Écrire les règles CSS classiques dans un fichier .module.css
 Importer le .module.css dans tout composant au besoin
 Utiliser la propriété className et l’instance de l’importation
pour appliquer les classes
48
Style
module CSS - exemple
• Dans Button.module.css
.error { background-color: red;}
• Dans another-stylesheet.css
.error { color: red; }
• Dans Button.js
…
import styles from './Button.module.css';
import './another-stylesheet.css';
…
<button className={styles.error}>
Error Button
</button>
49
Références
1) https://openclassrooms.com/fr/courses/4664381-realisez-
une-application-web-avec-react-js/4664801-demarrez-
facilement-avec-create-react-app
2) https://www.reactenlightenment.com/react-jsx/5.1.html
3) https://fr.reactjs.org/docs/jsx-in-depth.html
4) https://www.w3schools.com/react/react_jsx.asp
5) https://fr.reactjs.org/docs/components-and-props.html
6) https://www.geeksforgeeks.org/reactjs-components/
7) https://www.reactenlightenment.com/react-props/7.1.html
8) https://daveceddia.com/display-a-list-in-react/
9) https://fr.reactjs.org/docs/reconciliation.html#recursing-on-
children
10) https://www.robinwieruch.de/conditional-rendering-react
50
Références
11) https://fr.reactjs.org/docs/forms.html
12) https://www.w3schools.com/react/react_forms.asp
13) https://www.w3schools.com/react/showreact.asp?filename
=demo2_react_forms_validate_errmessage
14) https://github.com/typicode/json-server
15) https://alligator.io/react/axios-react/
16) https://reacttraining.com/react-router/web/guides/quick-
start
17) https://blog.logrocket.com/react-router-dom-set-up-
essential-components-parameterized-routes-505dc93642f1/
18) https://www.pluralsight.com/guides/react-inline-styling
19) https://create-react-app.dev/docs/adding-a-css-modules-
stylesheet/ 51

Contenu connexe

Tendances

Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...ENSET, Université Hassan II Casablanca
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partiekadzaki
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EEInes Ouaz
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)ENSET, Université Hassan II Casablanca
 
Manuel des TP : Atelier Web 2
Manuel des TP : Atelier Web 2Manuel des TP : Atelier Web 2
Manuel des TP : Atelier Web 2Faycel Chaoua
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Abel LIFAEFI MBULA
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web servicesLilia Sfaxi
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement webHouda TOUKABRI
 

Tendances (20)

Angular Avancé
Angular AvancéAngular Avancé
Angular Avancé
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
Support Java Avancé Troisième Partie
Support Java Avancé Troisième PartieSupport Java Avancé Troisième Partie
Support Java Avancé Troisième Partie
 
Cours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partieCours php & Mysql - 1ére partie
Cours php & Mysql - 1ére partie
 
Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Support distributed computing and caching avec hazelcast
Support distributed computing and caching avec hazelcastSupport distributed computing and caching avec hazelcast
Support distributed computing and caching avec hazelcast
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce  Basé sur Spring IOC MVC Security JPA HibernateSite JEE de ECommerce  Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
 
Manuel des TP : Atelier Web 2
Manuel des TP : Atelier Web 2Manuel des TP : Atelier Web 2
Manuel des TP : Atelier Web 2
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 
Traitement distribue en BIg Data - KAFKA Broker and Kafka Streams
Traitement distribue en BIg Data - KAFKA Broker and Kafka StreamsTraitement distribue en BIg Data - KAFKA Broker and Kafka Streams
Traitement distribue en BIg Data - KAFKA Broker and Kafka Streams
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
 

Similaire à Introduction à React

react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basiczineblahib2
 
cours dev d'applications web moderne avec ReactJS
cours dev d'applications web moderne avec ReactJScours dev d'applications web moderne avec ReactJS
cours dev d'applications web moderne avec ReactJSaissamjadli
 
Alphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentauxAlphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentauxAlphorm
 
FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdfOualidBelbrik
 
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbreact (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbzineblahib2
 
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockageCréation d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockagedavrous
 
Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPkemenaran
 
Affichage d'un document Office sous Android
Affichage d'un document Office sous AndroidAffichage d'un document Office sous Android
Affichage d'un document Office sous AndroidStéphane Liétard
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++coursuniv
 
Utilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expérienceUtilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expériencelouschwartz
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJSVISEO
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1Sem Koto
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1Sem Koto
 

Similaire à Introduction à React (20)

react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
cours dev d'applications web moderne avec ReactJS
cours dev d'applications web moderne avec ReactJScours dev d'applications web moderne avec ReactJS
cours dev d'applications web moderne avec ReactJS
 
Alphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentauxAlphorm.com Formation React : Les fondamentaux
Alphorm.com Formation React : Les fondamentaux
 
FORMATION javascript.pdf
FORMATION javascript.pdfFORMATION javascript.pdf
FORMATION javascript.pdf
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
 
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbreact (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
react (1)contexte appbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
 
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockageCréation d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
 
JQuery
JQueryJQuery
JQuery
 
Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHP
 
2016_js_react.pdf
2016_js_react.pdf2016_js_react.pdf
2016_js_react.pdf
 
Affichage d'un document Office sous Android
Affichage d'un document Office sous AndroidAffichage d'un document Office sous Android
Affichage d'un document Office sous Android
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++
 
Utilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expérienceUtilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expérience
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
 
React redux-tutoriel-1
React redux-tutoriel-1React redux-tutoriel-1
React redux-tutoriel-1
 
Cours wpf avancé
Cours wpf avancéCours wpf avancé
Cours wpf avancé
 
jQuery
jQueryjQuery
jQuery
 

Plus de Abdoulaye Dieng

Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturelAbdoulaye Dieng
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobilesAbdoulaye Dieng
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPressAbdoulaye Dieng
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API RESTAbdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonAbdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmiqueAbdoulaye Dieng
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchronesAbdoulaye Dieng
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmiqueAbdoulaye Dieng
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 

Plus de Abdoulaye Dieng (20)

Fondamentaux du Référencement naturel
Fondamentaux du Référencement naturelFondamentaux du Référencement naturel
Fondamentaux du Référencement naturel
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Fondamentaux d’une API REST
Fondamentaux d’une API RESTFondamentaux d’une API REST
Fondamentaux d’une API REST
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Introduction à l’orienté objet en Python
Introduction à l’orienté objet en PythonIntroduction à l’orienté objet en Python
Introduction à l’orienté objet en Python
 
Introduction à Python
Introduction à PythonIntroduction à Python
Introduction à Python
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Initiation à Bootstrap
Initiation à BootstrapInitiation à Bootstrap
Initiation à Bootstrap
 
Requêtes HTTP synchrones et asynchrones
Requêtes HTTPsynchrones et asynchronesRequêtes HTTPsynchrones et asynchrones
Requêtes HTTP synchrones et asynchrones
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
 
Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Initiation à l'algorithmique
Initiation à l'algorithmiqueInitiation à l'algorithmique
Initiation à l'algorithmique
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
introduction à MongoDB
introduction à MongoDBintroduction à MongoDB
introduction à MongoDB
 

Introduction à React

  • 2. Objectif général Prendre en main l’une des bibliothèques JavaScript les plus utilisés pour créer des interfaces utilisateurs 2
  • 3. Objectifs spécifiques • Découper l’interface utilisateur avec les composants • Passer des informations (données ou instructions) d’un composant à son composant fils avec « props » • Gérer l’état local d’un composant avec « state » • Afficher une listes de composants avec map() • Afficher un composant en fonction de l’état de l’application • Interagir avec un utilisateur grâce à la gestion des événements • Interagir avec un utilisateur par le biais des formulaires • Communiquer avec un serveur HTTP avec AJAX • Afficher des vues en fonction de l’URL avec le routage • Mettre en forme un composant 3
  • 4. Sommaire 8) Affichage conditionnel 9) Événements 10) Formulaires 11) Communiquer avec un serveur HTTP 12) Routage 13) Style 1) Présentation de React 2) Environnement de développement 3) JSX 4) Composants 5) Props 6) État local 7) Listes
  • 5. Présentation de React • Problématique : comment développer efficacement (rapidité, facilité, portabilité du JS, …) une application Web ? • Solution : ensemble de classes, fonctions et utilitaires « prêt à l’emploi » • React : bibliothèque JavaScript open source pour la création d’interfaces utilisateur • Créée par Jordan Walke, développeur à Facebook, en fin 2011 • Quelques principes de React  DOM virtuel : arborescence d'objets JS en mémoire utilisée pour lister les éventuelles modifs de la vue afin d’éviter de recréer entièrement le DOM du navigateur (video)  création de composants réutilisables, avec en entrée des données, pouvant changer au cours du temps  Usage : Application monopage ou mobile 5
  • 6. Environnement de développement 1) Installer les prérequis node.js et NPM Télécharger et installer la dernière version LTS de Node.js à partir de https://nodejs.org/en/download/ 2) Installer Create-React-App npm install --global create-react-app 3) A partir d’un répertoire choisi, créer un nouveau projet React create-react-app nom-du-projet Exemple : créer le projet nommé « react-classroom » 4) Naviguer dans le dossier du projet cd nom-du-projet 5) Lancer le serveur de développement npm start 6
  • 7. JSX présentation • JSX (JavaScript eXtensible Markup Language) : syntaxe de type HTML / XML qui facilite l’écriture du HTML / XML dans du JS • JSX est destiné au transpilateur (comme Babel) pour être traduit en objets JavaScript standard • Exemple en JSX const greeting= <h1 className="speak"> Hello, world!</h1>; • Transpilation de l’exemple const greeting = React.createElement( 'h1', {className: 'speak'}, 'Hello, world!’ ); • Objet ou élément React créé par l’exemple const greeting = { type: 'h1', props: { className: 'speak', children: 'Hello, world!’ } }; 7
  • 8. JSX types d’élément • Eléments React : briques élémentaires constitutifs et visibles des applications React. • Les éléments React sont retournés par les composants (à voir plus loin) • Élément natif : nom commençant par une lettre minuscule Exemple : <h1 … • Élément défini ou importé dans le fichier JavaScript : nom commençant par une lettre majuscule Exemple : <NewsFeed … 8
  • 9. JSX attribut • Attribut : paire (nom,valeur) qui caractérise un élément • Les attributs fournissent des valeurs de configuration d’un élément • Nomenclature des attributs : éviter les mots clé JS et utiliser le camelCase Exemples : className au lieu de class htmlFor au lieu de for • Types de valeur d’un attribut :  Littéral chaîne de caractères Ex : <MyComponent user = "Ngor Diouf" />  Booléen : par défaut Ex : <MyComponent connected />  Expression JS Ex : <MyComponent total = {1 + 2 + 3 + 4} /> 9
  • 10. JSX types d’enfant • Enfant : contenu présent entre 2 balises (ouvrante et fermante) • Littéral chaîne de caractères Ex : <MyComponent>Bonjour le monde !</MyComponent> • Élément JSX Ex : <header> <Nav /> <SearchBox /> </header> • Expression JavaScript à enrober avec des accolades { } Ex : <h1>{i == 1 ? 'True!' : 'False'}</h1> • Les types d’enfant peuvent être mixés 10
  • 11. JSX syntaxes à respecter • One Top Level Element : le code HTML doit être enveloppé dans un seul élément parent Ex : <div> <h2>Content</h2> <p>This is the content!!!</p> </div> • Tout élément doit être fermé Ex : <input type="text" />; • Plusieurs lignes de HTML doivent être mises entre parenthèses Ex : ( <ul> <li>Apples</li> <li>Bananas</li> </ul> ) 11
  • 12. Composants illustration 12 Liste des étudiants de JS Dev Fatou Dia Saliou Diouf Alain Gomis X X X Nom de l’étudiant Ajouter Composant App Composant Classroom Composant Student React Classroom App Home | About Composant AddStudent Composant Header Composant About
  • 13. Composants présentation • Composant : partie de l’application • Les composants permettent de découper l’interface utilisateur en éléments indépendants et réutilisables • Composant : code JS qui renvoient des éléments React ou d’autres composants décrivant ce qui doit apparaître à l’écran. • Deux types de composant  Fonction composant Ex : function Welcome() { return <h1>Hello World !</h1> }  Composant à base de classe Ex : class Welcome extends React.Component { render() { return <h1>Hello World !</h1>; } } 13
  • 14. Composants exemple 14 Instancier Classroom dans App • remplacer tout le contenu de la div de src/App.js par <Classroom /> • Importer Classroom à partir de ./components/Classroom src/components/Student.js src/components/Classroom.js
  • 15. Props présentation • Props (ou propriété) : donnée ou gestionnaire d’événement fourni à un composant par son composant parent • Syntaxe d’envoi d’une propriété par un composant parent <ComposantFils nomPropriété = valeur … • Syntaxes d’accès à une propriété par un composant fils  Pour une fonction composant : props.nomPropiété avec props parmètre de la fonction  Pour un composant à base de classe this.props.nomPropiété • Les props sont ensuite utilisées par le composant fils ou transmises aux composants enfants. • Les props sont en lecture seule 15
  • 16. Props exemple • Dans le composant App, ajoutez la propriété nom="JS Dev" au composant fils Classroom • Au composant Classroom, remplacez <Student /> par <h1>Liste des étudiants de {this.props.nom}</h1> <ul> <Student nom="Fatou Dia" /> <Student nom="Saliou Diouf" /> <Student nom="Alain Gomis" /> </ul> • Au composant Student  passer le paramètre props  remplacer tout le contenu du return par : <li> {props.nom} </li> 16
  • 17. État local présentation • État local d’un composant : évolution, en fonction d’événements (click, submit, …), des données qu’il contient • Ces données variables doivent être stockées dans « state » : un objet natif de tout composant à état • Initialisation de state : dans le constructeur avec la syntaxe this.state = {nomVar1:val1, nomVar2:val2, …} • Usage de state : partout dans le composant avec la syntaxe this.state.nomVar • Modif de state : via la méthode setState() avec les syntaxes  this.setState({nomVar1 : newVal1, … } )  this.setState(prevState => ( {nomvar1 : expr contenant prevState.nomVar1 … } ) ) // Si la valeur précédente de la propriété est utilisée • Toute modification de state => nouvel appel de render() 17
  • 19. Listes présentation • La plupart des app Web listent des données • .map(): méthode de Array qui  parcourt un tableau pour appliquer un même traitement sur chaque élément  retourne le tableau des résultats du traitement Exemple doubled = [1,2,3,4].map(val => 2*val) // [2,4,6,8] • Une syntaxe d’une liste de composants liste.map(item => <NomComposant key={item.id} prop1={item.prop1} prop2={item.prop2} … />) 19
  • 20. Listes clé • Chaque item de la liste doit être associé à une clé unique et stable • Les clés permettent à React de réafficher plus rapidement la liste en cas de modification (ajout, suppression, …) • Exemple d’une insertion d’un élément au début d’une liste sans clé DOM virtuel à modifier <ul> <li>Dakar</li> <li>Thies</li>  </ul> Dakar et Thies sont d’abord remplacés par Tamba et Dakar, puis Thies est rajouté 20 DOM virtuel modifié <ul> <li>Tamba</li> <li>Dakar</li> <li>Thies</li> </ul>
  • 21. Listes exemple Dans la render() du composant Classroom, remplacez les 3 lignes de <Student> par 21 Supprimer key et constater le warning sur la console
  • 22. Affichage conditionnel présentation • Affichage conditionnel : afficher du contenu en fonction de l’état de l’application • Structure conditionnelle if  Ex (afficher « Loading… » lors du chargement des données) : if(!isLoading) { return null } return <p>Loading...</p> • Opérateur ternaire  condition ? trueValue : falseValue.  Ex : return <div>{isLoading ? <p>Loading...</p> : null}</div>; • Opérateur booléen &&  true && expression vaut expression  false && expression vaut false.  Ex : return <div>{isLoading && <p>Loading...</p>}</div>; 22
  • 23. Affichage conditionnel exemples alternatifs • Exemple 1 Juste avant le return du composant Classroom, ajoutez if(!learners.length){ return( <div> <h1>Liste des étudiants de {this.props.nom}</h1> <p>Aucun etudiant</p> </div> ) } • Exemple 2 Dans le return du composant Classroom, juste avant la ligne learners.map…, insérez : (!learners.length) ? <p>Aucun etudiant</p> : • Exemple 3 Dans le return du composant Classroom, juste avant la ligne learners.map…, insérez : (learners.length) && 23
  • 24. Événements présentation • Événements React = événements HTML • L’écoute se fait inline çàd sur l’élément JSX • Syntaxe (en camelCase) : onNomEvenement = {handler} • Le handler ou gestionnaire d’événement étant une callback, il faut la lier (bind) avec son composant • Comment lier le handler avec son contexte ?  Sur l’élément onNomEvenement = {handler.bind(this)}  Définition en fonction fléchée handler = (…) => { … }  Dans un constructeur (meilleure pour la perf. ) this.handler = this.handler.bind(this) • NB : tout éventuel autre paramètre du handler doit être placé après this 24
  • 25. Événements exemple Dans le composant Classroom, • ajoutez la méthode handleDelete() handleDelete(id) { this.setState(prevstate => ({ students : prevstate.students.filter( student => student.id !== id) })) } • ajoutez au constructeur this.handleDelete = this.handleDelete.bind(this); • remplacez <Student key={learner.id} nom={learner.nom} /> par <Student key={learner.id} learner={learner} handleDelete={this.handleDelete} /> 25
  • 26. Événements exemple – suite et fin Le code du composant Student devient 26
  • 27. Formulaires composant contrôlé • Pour contrôler l’état (initial et modifié) des éléments input (texte), textarea et select, React leur assigne directement les attributs value et onChange • L’attribut value sera étroitement lié à une donnée du state • L’attribut onChange permettra de modifier la donnée du state • Exemple … this.state = {opinion: 'Votre opinion…' }; … handleChange(event) { this.setState( {opinion:event.target.value} ); } … <textarea value={this.state.opinion} onChange={this.handleChange}/> 27
  • 28. Formulaires gestion de plusieurs champs contrôlés • Pour gérer plusieurs champs contrôlés ajouter un attribut name à chaque champ • Dans un seul handleChange,  accéder à chaque champ en fonction des valeurs de event.target.name et de event.target.value.  mettre à jour le state avec setState et [event.target.name] : event.target.value 28
  • 29. Formulaires gestion de plusieurs champs contrôlés - exemple … this.state = {opinion:'Votre opinion…' , age:null }; … handleChange(event) { const name = event.target.name; const value = event.target.value; this.setState( { [name]:value } ); } … <textarea name='opinion' value={this.state.opinion} onChange={this.handleChange} /> <input name="age" value = {this.state.age} onChange = {this.handleChange} /> 29
  • 30. Formulaires exemple - composant AddStudent 30 Après avoir défini addStudent, l’instancier dans Classroom en ajoutant 1) import AddStudent from "./AddStudent" 2) le code <addStudent /> juste avant <h1>
  • 31. Formulaires validation - exemple • Dans le constructeur this.state = { opinion: 'Votre opinion', age: null, error_msg: '' }; • Dans un gestionnaire … let err = ''; if (name === "age") { if (value !="" && !Number(val)) { err = <strong>L’âge doit être un nombre</strong>; } } this.setState( {error_msg: err} ); • Dans le template, juste après le champ « age » { this.state.error_msg } • Exemple N’activer le bouton de soumission que si le nom de l’étudiant est saisi 31
  • 32. Formulaires gestion de la soumission • Événement submit sur la balise <form> • Pour le gestionnaire  Passer en paramètre un objet de type Event  Empêcher la soumission automatique avec .preventDefault()  Récupérer via le state toute valeur soumise  Traiter les valeurs soumises  Réinitialiser éventuellement tout champ 32
  • 33. Formulaires exemple suite et fin Dans AddStudent, ajoutez l’attribut onSubmit à la balise form et la méthode handleAdd 33 Dans Classroom, ajoutez l’attribut handleDelete à AddStudent et la méthode handleAdd
  • 34. Communiquer avec un serveur présentation • Une App React est, dans la plupart des cas, cliente d’un serveur HTTP distant • Principales méthodes HTTP : get (récupérer), post (ajouter), put (modifier entièrement), patch (modifier partiellement) et delete (supprimer) • La communication avec un serveur se fait le plus souvent avec l'objet XMLHttpRequest • Qlq bibliothèques facilitant l’implémentation des requêtes AJAX : Axios, jQuery AJAX, Windows.fetch • Il est recommandé de déclencher une requête get dans ComponentDidMount() : méthode appelée immédiatement après que le composant est monté (inséré dans l’arbre) 34
  • 35. Communiquer avec un serveur exemple • Installer le client HTTP « axios » dans le projet npm install axios • Installer globalement le serveur factice « json-server » npm install --g json-server • Dans un dossier quelconque, créer learners.json (contenu dans diapo suivante ) • À partir du dossier contenant learners.json, démarrer json-server sur un autre port que 3000 (utilisé aussi par React) avec par exemple la commande suivante : json-server --watch learners.json --port 3333 35
  • 36. Communiquer avec un serveur contenu de learners.json 36
  • 37. Communiquer avec un serveur exemple – récupérer tous les étudiants • Dans le render()  ajouter juste avant le return const isLoading = this.state.isLoading;  juste avant learners.map, ne mettre que la ligne (isLoading) ? <p>Loading...</p> : 37 Dans Classroom, importer axios à partir de axios, puis • Dans le constructeur, le state devient this.state = {isLoading:true, students:[], error:null } • Ajouter la méthode
  • 38. Communiquer avec un serveur exemple – supprimer un étudiant Dans Classroom, modifier handleDelete 38
  • 39. Communiquer avec un serveur exemple – ajouter un étudiant Dans Classroom, modifier handleAdd 39
  • 40. Routage présentation • Principe du SPA : charger une seule page (index.html) et y présenter, au besoin, tout composant de l’application • Routage : permettre à l’application de naviguer entre les différents composants, en changeant l'URL du navigateur, en modifiant l'historique du navigateur et en gardant l'état de l'interface utilisateur synchronisé. • react-router-dom : la + populaire bibliothèque permettant d’implémenter sur React le routage sur un navigateur • Principaux composants de react-router-dom  BrowserRoute : parent des autres et effectue le routage  Route : définit une route entre un chemin (path) et un composant (component)  Switch : parent de Route et affiche la 1ère route qui correspond à l'URL  Link : crée une ancre de navigation 40
  • 41. Routage exemple - route • Installer le router : npm install react-router-dom • Créer le composant src/components/pages/About.js retournant 41 • Dans App.js, importer About et ajouter la ligne import {BrowserRouter,Route,Switch} from "react-router-dom"; • De plus App.js retourne maintenant
  • 42. Routage exemple - navigation 1) Créer le composant src/components/layout/Header.js 42 2) Dans App.js, instancier Header juste avant <Switch>
  • 43. Style présentation Il y a plusieurs façons de donner du style au contenu • Style en ligne • Feuille de style CSS • Module CSS 43
  • 44. Style style en ligne • Usage  style limité à un contenu (peu recommandé)  style calculé dynamiquement au moment de l‘affichage (çàd appliquer un style en fonction d’une condition) • Principe Ajouter la propriété style à l’élément ou au composant • Syntaxe  style = { objet }  Clés de l’objet = versions camelCase des propriétés CSS  Valeurs de l’objet = versions string des valeurs CSS 44
  • 45. Style style en ligne - exemples • Dans addStudent.js envelopper les enfants de form dans la div suivante <div style={{display:"flex", marginTop:"5px"}} > … <input style={ {flex:"10"} } /> • Dans Student.js <div style={{textAlign:"left", borderBottom:"1px dotted"}}> <button style={ {float:"right"}} … > • Dans TodoItem.js (Style dynamique) <p style={{color: isDone?'green':'red'}}> {title} </p> 45
  • 46. Style feuille de style CSS • Usage Règles de style partagées • Principe  Écrire les règles de style CSS classiques dans un fichier .css  Importer le .css dans tout composant au besoin  Utiliser la propriété className pour appliquer les classes 46
  • 47. Style feuille de style CSS - exemple • Dans App.css, ajoutez .centrer { width:80%; margin-left:auto; margin-right:auto; text-align:center } • Dans Header.js <header className = "centrer" > • Dans Classroom.js <div className = "centrer" > • Dans About.js (après avoir remplacé React.fragment par div ) <div className = "centrer" > 47
  • 48. Style module CSS • Usage Partager des classes sans avoir des conflits de noms • Principe  Écrire les règles CSS classiques dans un fichier .module.css  Importer le .module.css dans tout composant au besoin  Utiliser la propriété className et l’instance de l’importation pour appliquer les classes 48
  • 49. Style module CSS - exemple • Dans Button.module.css .error { background-color: red;} • Dans another-stylesheet.css .error { color: red; } • Dans Button.js … import styles from './Button.module.css'; import './another-stylesheet.css'; … <button className={styles.error}> Error Button </button> 49
  • 50. Références 1) https://openclassrooms.com/fr/courses/4664381-realisez- une-application-web-avec-react-js/4664801-demarrez- facilement-avec-create-react-app 2) https://www.reactenlightenment.com/react-jsx/5.1.html 3) https://fr.reactjs.org/docs/jsx-in-depth.html 4) https://www.w3schools.com/react/react_jsx.asp 5) https://fr.reactjs.org/docs/components-and-props.html 6) https://www.geeksforgeeks.org/reactjs-components/ 7) https://www.reactenlightenment.com/react-props/7.1.html 8) https://daveceddia.com/display-a-list-in-react/ 9) https://fr.reactjs.org/docs/reconciliation.html#recursing-on- children 10) https://www.robinwieruch.de/conditional-rendering-react 50
  • 51. Références 11) https://fr.reactjs.org/docs/forms.html 12) https://www.w3schools.com/react/react_forms.asp 13) https://www.w3schools.com/react/showreact.asp?filename =demo2_react_forms_validate_errmessage 14) https://github.com/typicode/json-server 15) https://alligator.io/react/axios-react/ 16) https://reacttraining.com/react-router/web/guides/quick- start 17) https://blog.logrocket.com/react-router-dom-set-up- essential-components-parameterized-routes-505dc93642f1/ 18) https://www.pluralsight.com/guides/react-inline-styling 19) https://create-react-app.dev/docs/adding-a-css-modules- stylesheet/ 51

Notes de l'éditeur

  1. https://openclassrooms.com/fr/courses/4664381-realisez-une-application-web-avec-react-js/4664801-demarrez-facilement-avec-create-react-app
  2. https://www.reactenlightenment.com/react-jsx/5.1.html Transpiler : Convertir du code d’un langage à un autre
  3. https://fr.reactjs.org/docs/jsx-in-depth.html
  4. https://www.w3schools.com/react/react_jsx.asp
  5. https://fr.reactjs.org/docs/components-and-props.html https://www.geeksforgeeks.org/reactjs-components/
  6. Next step : Comment afficher la liste d’étudiants d’une classe donnée
  7. https://www.reactenlightenment.com/react-props/7.1.html
  8. Next step : comment stocker et gérer la liste des étudiants dans le composant Classroom ?
  9. prevState permet de modifier une propriété en fonction de sa valeur précédente
  10. https://daveceddia.com/display-a-list-in-react/
  11. https://fr.reactjs.org/docs/reconciliation.html#recursing-on-children
  12. Next step : et s’il y a aucun étudiant, comment gérer l’affichage ?
  13. https://www.robinwieruch.de/conditional-rendering-react En JS, true && expression vaut expression, et false && expression vaut false.
  14. Next step : retirer un étudiant de la classe ?
  15. Next step : ajouter un étudiant dans la classe ?
  16. https://fr.reactjs.org/docs/forms.html https://www.w3schools.com/react/react_forms.asp
  17. To do Valider le champ nom Désactiver le bouton de soumission tant que nom est vide
  18. N’activer le bouton de soumission que si le nom de l’étudiant est saisi : <input type="submit" value="Ajouter" disabled={!this.state.nom} /> https://www.w3schools.com/react/showreact.asp?filename=demo2_react_forms_validate_errmessage
  19. Next step : persister les actions (suppression, ajout) sur les étudiants Sol : serveur
  20. [...objetIterable, 4, 5, 6] Syntaxe de décomposition La syntaxe de décomposition permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets).
  21. https://blog.logrocket.com/react-router-dom-set-up-essential-components-parameterized-routes-505dc93642f1/
  22. Les fragments nous permettent de grouper une liste d’enfants sans ajouter de nœud supplémentaire au DOM. Nvelle syntaxe concise des fragments <> …. </>
  23. Link et to permettent de basculer entre les composants sans recharger entièrement la page.
  24. Style en ligne style limité à un contenu (peu recommandé) style calculé dynamiquement au moment de l‘affichage (çàd appliquer un style en fonction d’une condition) Feuille de style CSS Règles de style partagées Module CSS Partager des classes sans avoir des conflits de noms
  25. Style calculé dynamiquement au moment de l‘affichage Par exemple dans TodoItem.js (Style dynamique) <p style={{color: isDone?'green':'red'}}> {title} </p> https://www.pluralsight.com/guides/react-inline-styling
  26. https://www.pluralsight.com/guides/react-inline-styling
  27. https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
  28. https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/