Objectif général : Prendre en main l’une des bibliothèques JavaScript les plus utilisés pour créer des interfaces utilisateurs
Objectifs spécifiques :
Découper l’interface utilisateur avec les composants;
Configurer les composants 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;
Objectif général :
Prendre en main l’une des bibliothèques JavaScript les plus utilisés pour créer des interfaces utilisateurs
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
Ce Support de cours Spring contient :
- Architecture JEE (Over view)
- Spring Overview
- Spring IOC
- Spring MVC
- Spring Integration (RMI, JaxWS, JaxRS, JMS, JMX,...)
- Spring Security
Bon apprentissage à tous
Support Dot Net avec C#. Ce cours traite les points suivants :
- Architecture .Net
- Les bases de C#
- Objet et Classe
- Héritage
- Encapsulation
- Polymorphisme
- Les exceptions
- Les entrées sorties
- Les interfaces graphiques
- Le multi Threading
- Programmation réseaux (Sockets et DataGram)
- Accès aux bases de données
Découvrez le framework web Spring Boot qui a la cote !
Apprenez comment son système d'auto-configuration fonctionne.
Live coding et exemple de migration vers Spring Boot sont de la partie.
Objectif général :
Prendre en main l’une des bibliothèques JavaScript les plus utilisés pour créer des interfaces utilisateurs
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
Ce Support de cours Spring contient :
- Architecture JEE (Over view)
- Spring Overview
- Spring IOC
- Spring MVC
- Spring Integration (RMI, JaxWS, JaxRS, JMS, JMX,...)
- Spring Security
Bon apprentissage à tous
Support Dot Net avec C#. Ce cours traite les points suivants :
- Architecture .Net
- Les bases de C#
- Objet et Classe
- Héritage
- Encapsulation
- Polymorphisme
- Les exceptions
- Les entrées sorties
- Les interfaces graphiques
- Le multi Threading
- Programmation réseaux (Sockets et DataGram)
- Accès aux bases de données
Découvrez le framework web Spring Boot qui a la cote !
Apprenez comment son système d'auto-configuration fonctionne.
Live coding et exemple de migration vers Spring Boot sont de la partie.
Ce Support explique quelques concepts de base de NodeJS et montre comment mettre en oeuvre la technologie NodeJS pour développer la partie Backend d'une application.
Les vidéos des démonstrations sont publiées sur les adresse suivantes :
- https://www.youtube.com/watch?v=-X_C1tS5-9Y
- https://www.youtube.com/watch?v=rE-xRH28m0s
- https://www.youtube.com/watch?v=tnxjkTvWoKA
Cette série explique les éléments suivants :
- Architecture Web
- Modèles Multi-Threads avec les entrées sorties bloquantes
- Modèles Single Thread avec les entrées sortie non bloquantes
-Technologie Node JS
- Comment créer une simple application Node JS avec java Script
- Architecture du Framwork Express
- Comment créer une application NodeJS avec Type Script
- Comment écrire des tests unitaires avec Jest
- Quelques concepts sur MongoDb
- Comment Créer une API Rest avec NodeJS, Express et MongoDb
- Comment tester l'API Rest
- Comment Créer la partie FrontEnd avec Angular.
Même si la qualité audio n'est pas bonne, ses vidéos peuvent aider ceux qui débutent dans NodeJS en attendant d'autres vidéos avec plus qualité audio et de contenu.
Bonne lecture
Ce support de cours contient les concepts fondamentaux de la sécurité des applications Web Statless avec Json Web Token. Des applications de mise en oeuvre de JWT et Spring Security pour les applications basées sur les Micro-services sont publiées ma chaîne vidéo Youtube :
https://www.youtube.com/user/mohamedYoussfi
Le code source des applications est publié sur mon compte GitHUB:
https://github.com/mohamedYoussfi/
Bon apprentissage
Formation JPA Avancé / Hibernate gratuite par Ippon 2014Ippon
Les ORM, c’est pratique. Mais cela peut rapidement devenir complexe ou subtile. JPA permet de rapidement modéliser la couche d’accès aux données avec une facilité indiscutable. Cependant, il est préférable de bien en comprendre le fonctionnement pour éviter quelques anti patterns fâcheux.
La formation JPA Avancé proposée par Ippon détaille les aspects techniques et permet d’aller plus loin dans la compréhension et la maîtrise. Enrichie par des TP très fournis lorsqu’elle est dispensée par les formateurs Ippon, elle permet d’assimiler en 3 jours les subtilités et offre les outils pour réaliser une couche d’accès aux données de qualité, performante et maintenable.
Techniques de modélisation, gestion et subtilités du cache (L1, L2), mécanismes transactionnels, langage de requêtage… Tous ces aspects et bien d’autres sont détaillés et illustrés afin de vous apporter les clefs pour vos prochains projets.
Découvrez dès aujourd’hui les slides de cette formation, mis à disposition dans le cadre de l’OpenFormation.
Ce support explique les concepts de bases du principe de l'inversion de contrôle et d'injections des dépendances.
Les concepts les plus importants à comprendre par les futurs ingénieurs du génie Logiciel.
Alphorm.com Formation React : Les fondamentauxAlphorm
Découvrez, dans cette formation, la bibliothèque React de Facebook.
Vous apprendrez à configurer votre machine de développement.
Vous verrez, grâce au développement d’une application simple les principaux concepts de React
Ce Support explique quelques concepts de base de NodeJS et montre comment mettre en oeuvre la technologie NodeJS pour développer la partie Backend d'une application.
Les vidéos des démonstrations sont publiées sur les adresse suivantes :
- https://www.youtube.com/watch?v=-X_C1tS5-9Y
- https://www.youtube.com/watch?v=rE-xRH28m0s
- https://www.youtube.com/watch?v=tnxjkTvWoKA
Cette série explique les éléments suivants :
- Architecture Web
- Modèles Multi-Threads avec les entrées sorties bloquantes
- Modèles Single Thread avec les entrées sortie non bloquantes
-Technologie Node JS
- Comment créer une simple application Node JS avec java Script
- Architecture du Framwork Express
- Comment créer une application NodeJS avec Type Script
- Comment écrire des tests unitaires avec Jest
- Quelques concepts sur MongoDb
- Comment Créer une API Rest avec NodeJS, Express et MongoDb
- Comment tester l'API Rest
- Comment Créer la partie FrontEnd avec Angular.
Même si la qualité audio n'est pas bonne, ses vidéos peuvent aider ceux qui débutent dans NodeJS en attendant d'autres vidéos avec plus qualité audio et de contenu.
Bonne lecture
Ce support de cours contient les concepts fondamentaux de la sécurité des applications Web Statless avec Json Web Token. Des applications de mise en oeuvre de JWT et Spring Security pour les applications basées sur les Micro-services sont publiées ma chaîne vidéo Youtube :
https://www.youtube.com/user/mohamedYoussfi
Le code source des applications est publié sur mon compte GitHUB:
https://github.com/mohamedYoussfi/
Bon apprentissage
Formation JPA Avancé / Hibernate gratuite par Ippon 2014Ippon
Les ORM, c’est pratique. Mais cela peut rapidement devenir complexe ou subtile. JPA permet de rapidement modéliser la couche d’accès aux données avec une facilité indiscutable. Cependant, il est préférable de bien en comprendre le fonctionnement pour éviter quelques anti patterns fâcheux.
La formation JPA Avancé proposée par Ippon détaille les aspects techniques et permet d’aller plus loin dans la compréhension et la maîtrise. Enrichie par des TP très fournis lorsqu’elle est dispensée par les formateurs Ippon, elle permet d’assimiler en 3 jours les subtilités et offre les outils pour réaliser une couche d’accès aux données de qualité, performante et maintenable.
Techniques de modélisation, gestion et subtilités du cache (L1, L2), mécanismes transactionnels, langage de requêtage… Tous ces aspects et bien d’autres sont détaillés et illustrés afin de vous apporter les clefs pour vos prochains projets.
Découvrez dès aujourd’hui les slides de cette formation, mis à disposition dans le cadre de l’OpenFormation.
Ce support explique les concepts de bases du principe de l'inversion de contrôle et d'injections des dépendances.
Les concepts les plus importants à comprendre par les futurs ingénieurs du génie Logiciel.
Alphorm.com Formation React : Les fondamentauxAlphorm
Découvrez, dans cette formation, la bibliothèque React de Facebook.
Vous apprendrez à configurer votre machine de développement.
Vous verrez, grâce au développement d’une application simple les principaux concepts de React
Objectif général : Prendre en main l’un des Frameworks JavaScript les plus utilisés pour développer efficacement des applications Web
Objectifs spécifiques
Structurer l’application avec les composants
Gérer les données dynamiques avec le Data binding
Enrichir le HTML avec des directives prédéfinies
Interagir avec un utilisateur par le biais des formulaires
Organiser et partager le code métier avec les services
Communiquer avec un serveur via le service HttpClient
Afficher des vues en fonction de l’URL avec le routage
jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but
de simplifier des commandes communes de JavaScript. La première version date de janvier 2006.
Le framework contient notamment les fonctionnalités suivantes :
- Parcours et modification du DOM
- Selecteurs CSS 1 à 3
- Événements
- Effets et animations
- Manipulations des feuilles de style en cascade
- Ajax
- Plugins
- Fonctions utilitaires
La conception d'application Web complexe se reposant sur un socle JavaScript devient monnaie courante.
De ce fait, nous nous devons de nous outiller, ainsi que d'utiliser des frameworks adéquats.
Cette présentation a pour but de vous faire découvrir l'un de ces frameworks: RequireJS.
Nous verrons alors que nous pouvons produire des applications modulaires avec gestion de dépendances simplement, permettant ainsi d'avoir des applications qui se chargent rapidement alors que nous avons un découpage complexe, mais aussi des applications maintenables et testables facilement.
Voir: http://humantalks.com/talks/26-apercu-de-requirejs
Objectif général :
Améliorer le positionnement des pages d’un site Web dans les SERP (Search Engine Result Pages)
Objectifs opérationnels :
Sélectionner, dans un site Web, les pages à optimiser
Trouver des mots clés pour une page à optimiser
Optimiser le référencement naturel du contenu d’une page
Faciliter l’exploration, l’indexation et la consultation de l’ensemble des pages
Obtenir du trafic à partir de backlinks
Objectif général
Prendre en main l’un des frameworks PHP les plus utilisés
Objectifs opérationnels :
Faire correspondre une URL donnée à un traitement précis grâce au routage
Traiter les requêtes grâce aux contrôleurs
Intégrer des données dans des templates grâce à TWIG
Faciliter la communication avec une base de données grâce à Doctrine
Permettre à un utilisateur d’initialiser ou de modifier les attributs d'un objet métier grâce aux formulaires
Objectifs
Connaître les principales technologies utilisées pour développer des applications mobiles
Savoir quelle technologie est la mieux adaptée pour un projet
Objectif général : Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
Positionner du contenu avec le système de grille
Créer des barres de navigation
Mettre en forme des tableaux
Créer des formulaires
Créer des boutons
Mettre en forme des images
Objectif général : Prendre en main l’un des frameworks PHP les plus utilisés
Objectifs spécifiques
Faire correspondre une URL donnée à un traitement précis grâce au routage
Regrouper des traitements connexes grâce aux contrôleurs
Récupérer les données d’une requête http grâce à Request
Retourner des contenus aux formats texte, HTML, JSON, etc. grâce à Response
Intégrer des données dans des templates grâce à Blade
Interagir avec l’utilisateur grâce aux formulaires
Créer, mettre à jour et suivre les évolutions d’un schéma de base de données grâce aux migrations
Faciliter la communication avec une base de données grâce à Eloquent
Objectif général : Connaître les fondamentaux d’une API REST
Objectifs spécifiques :
Savoir définir une API
Connaître l’architecture REST
Connaître les contraintes du REST
Connaître la structure d’une requêtes HTTP
Connaître les caractéristiques d’une ressources
Se servir des méthodes HTTP
Connaître la structure d’une réponses HTTP
Connaître les codes HTTP
Objectif général : Savoir créer des pages Web interactives sans trop solliciter le serveur et le réseau pour offrir une meilleure expérience utilisateur
Objectifs opérationnels
- Stocker des données à l’aide des variables
- Traiter des données à l’aide des opérateurs.
- Communiquer avec l’internaute à l’aide des E/S de base
- Contrôler le flux d’exécution des instructions.
- Réutiliser et organiser le code en créant des fonctions
- Créer l’interactivité grâce à la gestion des évènements
- Traiter plus facilement plusieurs données connexes grâce aux tableaux et aux objets
- Gérer les propriétés de la fenêtre avec l’objet window
- Manipuler le contenu de la page Web grâce à l’objet document
- Contrôler la saisie d’un formulaire avec l’objet form
Objectif général : Développer en orienté objet avec Python
Objectifs opérationnels :
- Organiser le code grâce aux classes
- Sécuriser une classe avec l’encapsulation
- Réutiliser et factoriser du code avec l’héritage
- Invoquer des méthodes de même nom, quel que soit le type d'objet sur lequel elles opèrent, sans avoir à effectuer au préalable une vérification de type grâce au polymorphisme
Objectif général : Acquérir les connaissances nécessaires à la programmation avec le langage Python
Objectifs opérationnels :
- Mémoriser des données primitives
- Traiter des données
- Communiquer avec l’extérieur
- Contrôler le flux d’exécution des instructions
- Mémoriser des données composites
- Découper et réutiliser du code
Objectif général : Acquérir les bases méthodologiques de la résolution d'un problème conduisant à la réalisation d'un programme informatique
Objectifs opérationnels :
- Connaître les étapes de résolution d’un problème
- Stocker et traiter des données simples
- Permettre à un programme de communiquer avec l’extérieur
- Contrôler le flux d’exécution des instructions
- Traiter des données composites
- Définir et utiliser des procédures et des fonctions
Objectif général
Prendre en main l’un des framework PHP les plus utilisés
Objectifs opérationnels
Structurer les fonctionnalités grâce aux bundles
Faire correspondre une URL donnée à un traitement précis grâce au routage
Traiter les requêtes grâce aux contrôleurs
Intégrer des données dans des templates grâce à TWIG
Faciliter la communication avec une base de données grâce à Doctrine
Permettre à un utilisateur d’initialiser ou de modifier les attributs d'un objet métier grâce aux formulaires
Objectif général
Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
Positionner du contenu avec le système de grille
Créer des barres de navigation
Créer un fil d’Ariane
Mettre en forme des listes
Mettre en forme des tableaux
Créer des formulaires
Créer des boutons
Mettre en forme des images
Créer une page d’atterrissage
Objectifs généraux :
Savoir effectuer une requête HTTP synchrone ou asynchrone
Savoir effectuer des requêtes RESTful avec les méthodes GET, POST, PUT, PATCH et DELETE
Objectifs opérationnels :
Comprendre une requête synchrone
Effectuer une requête synchrone
Lire, d’une manière synchrone, le contenu d’un fichier local
Comprendre une requête asynchrone
Effectuer une requête asynchrone
Récupérer des données à partir d’un serveur avec une requête asynchrone
Comprendre les méthodes de requête RESTful
Effectuer des requêtes RESTful avec les méthodes GET, POST, PUT, PATCH et DELETE
Objectif général : Prendre en main la bibliothèque JavaScript la plus utilisée
Objectifs spécifiques :
Inclure la bibliothèque
Sélectionner du contenu
Manipuler des éléments
Mettre en forme du contenu
Gérer des évènements
Utiliser des effets
Effectuer des requêtes AJAX
Objectif général : Savoir créer des pages Web interactives sans trop solliciter le serveur et le réseau pour offrir une meilleure expérience utilisateur
Objectifs opérationnels :
Stocker des données à l’aide des variables
Traiter des données à l’aide des opérateurs.
Communiquer avec l’internaute à l’aide des E/S de base
Contrôler le flux d’exécution des instructions.
Réutiliser et organiser le code en créant des fonctions
Créer l’interactivité grâce à la gestion des évènements
Traiter plus facilement plusieurs données connexes grâce aux tableaux et aux objets
Traiter des chaînes de caractères avec l’objet String
Gérer les propriétés de la fenêtre avec l’objet Window
Manipuler le contenu de la page Web grâce à l’objet Document
Contrôler la saisie d’un formulaire avec l’objet Form
Objectif général : Acquérir les bases méthodologiques de la résolution d'un problème conduisant à la réalisation d'un programme informatique
Objectifs spécifiques :
Connaître les étapes de résolution d’un problème
Stocker et traiter des données simples
Permettre à un programme de communiquer avec l’extérieur
Contrôler le flux d’exécution des instructions
Traiter des données composites
Définir et utiliser des procédures et des fonctions
Objectif général : Découvrir quelques nouveautés du HTML5
Objectifs opérationnels :
Connaître les avantages du HTML5
Utiliser les nouveaux éléments de structuration
Utiliser les nouveaux éléments conteneurs
Utiliser les nouveaux éléments de contenu incorporé
Utiliser les nouveaux éléments et attributs de formulaire
Objectif général : Prendre en main Express js, le mini-framework de Node js le plus utilisé
objectifs spécifiques :
Installer Node js et Express js
Créer une application Express js
Router les requêtes
Recevoir des données à partir de l’URL d’une requête
Recevoir des données à partir du corps d’une requête
Traiter des fichiers uploadés
Utiliser un moteur de template
Utiliser une base de données
Utiliser des middlewares
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
• Configurer les composants 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 XML) : syntaxe de type HTML / XML
• JSX facilite l’écriture du HTML / XML dans du JavaScript
• 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
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
remplacez 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, remplace 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 : 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
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 name='opinion'
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
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 } 30
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
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
• 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 --global 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)
json-server --watch learners.json --port 3333
35
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;
Remplacer la ligne juste avant learners.map
(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, insérer Header juste avant 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
• 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