Durée
13,0 heures
Tarif régulier
250 $
Objectifs de la formation
React est un framework de développement d’applications web Front End basé sur le langage JavaScript. L’ensemble de ressources proposé s’adresse aux développeurs qui souhaitent lever la complexité apparente du framework pour réaliser des applications web et mobiles bien architecturées et aisées à maintenir.Clientèle visée
DéveloppeursPréalables
Aucun.Formateurs
Information à venir
Architecture de la formation
React - Le framework JavaScript pour le développement Front End d'applications web
Introduction à React
• Présentation de React
• Installation de l'environnement de développement
• Structure d'un projet React
• Présentation du projet à réaliser
• Présentation de React
• Installation de l'environnement de développement
• Structure d'un projet React
• Présentation du projet à réaliser
Principes et fonctionnement de React
• Les composants
• Le fonctionnement de JSX
• Les Props
• Les State
• Récapitulatif sur les Props et les State
• Les composants
• Le fonctionnement de JSX
• Les Props
• Les State
• Récapitulatif sur les Props et les State
Réalisation d'un annuaire des services publics
• Création du projet
• Création du composant de recherche
• Connexion du composant de recherche à l'API externe de l'annuaire
• Création du composant de résultat (stateless)
• Affichage des résultats
• Récapitulatif du projet
• Création du projet
• Création du composant de recherche
• Connexion du composant de recherche à l'API externe de l'annuaire
• Création du composant de résultat (stateless)
• Affichage des résultats
• Récapitulatif du projet
Pour aller plus loin
• Introduction aux Lifecycle methods
• Introduction aux principes de Routing
• Conclusion
React - Développez le Front End de vos applications web et mobiles avec JavaScript
• Découverte de React
• Ajouter du comportement aux composants
• Concevoir une application avec Redux
• Gérer les effets de bord avec Redux-Saga
• Développer pour le mobile avec React Native
• Fonctionnalités avancées avec React Native
• Gestion de formulaires et du routage
• Sécurité et persistance avec Firebase
• Connecter React à une API GraphQL
• Écrire des composants réutilisables
• Tester une application React
• Conclusion
React - Gérez la navigation de votre application web avec react- router
• Introduction aux Lifecycle methods
• Introduction aux principes de Routing
• Conclusion
React - Développez le Front End de vos applications web et mobiles avec JavaScript
• Découverte de React
• Ajouter du comportement aux composants
• Concevoir une application avec Redux
• Gérer les effets de bord avec Redux-Saga
• Développer pour le mobile avec React Native
• Fonctionnalités avancées avec React Native
• Gestion de formulaires et du routage
• Sécurité et persistance avec Firebase
• Connecter React à une API GraphQL
• Écrire des composants réutilisables
• Tester une application React
• Conclusion
React - Gérez la navigation de votre application web avec react- router
Introduction
• Différence entre le routing côté serveur et le routing côté client
• Présentation de la librairie react-router
• Présentation du projet à réaliser
• Préparation de l'environnement pour la réalisation du projet
• Différence entre le routing côté serveur et le routing côté client
• Présentation de la librairie react-router
• Présentation du projet à réaliser
• Préparation de l'environnement pour la réalisation du projet
Prise en main de react-router
• Créer un premier navigateur et une première route
• Mettre en place plusieurs routes
• Créer un système de menus et des liens
• Transformer un menu en NavLink
• Créer une page d'erreur 404
• Créer une redirection avec le composant Redirect
• Comprendre les propriétés reliées au composant Route
• Comprendre le composant HoC (High Order Component) withRouter
• Créer un premier navigateur et une première route
• Mettre en place plusieurs routes
• Créer un système de menus et des liens
• Transformer un menu en NavLink
• Créer une page d'erreur 404
• Créer une redirection avec le composant Redirect
• Comprendre les propriétés reliées au composant Route
• Comprendre le composant HoC (High Order Component) withRouter
Mise en application : réalisation d'un guide de pays
• Réorganisation du code en différents composants
• Création du composant de recherche avec appel à l'API restcountries.eu
• Création des résulats du filtre de pays
• Création de la page propre à un pays et de ses liens
• Conversion d'un lien en un lien dynamique
• Conclusion sur l'ensemble du projet
React - Fonctionnalités avancées du framework de développement Front End
• Réorganisation du code en différents composants
• Création du composant de recherche avec appel à l'API restcountries.eu
• Création des résulats du filtre de pays
• Création de la page propre à un pays et de ses liens
• Conversion d'un lien en un lien dynamique
• Conclusion sur l'ensemble du projet
React - Fonctionnalités avancées du framework de développement Front End
Introduction
• Comprendre comment React modifie le DOM
• Mise en place de l'environnement de développement
• Comprendre comment React modifie le DOM
• Mise en place de l'environnement de développement
Cycle de vie des composants
• Le cycle de vie d'un composant de type class
• Mise en pratique - Les méthodes du cycle de vie lors de la création d'un composant
• Mise en pratique - Les méthodes du cycle de vie d'un composant lors de sa mise à jour
• Mise en pratique - Les méthodes du cycle de vie d'un composant lors de sa suppression
• Le cycle de vie d'un composant de type class
• Mise en pratique - Les méthodes du cycle de vie lors de la création d'un composant
• Mise en pratique - Les méthodes du cycle de vie d'un composant lors de sa mise à jour
• Mise en pratique - Les méthodes du cycle de vie d'un composant lors de sa suppression
Refs, Fragments et propTypes
• Mise en pratique - Les références (Refs)
• Mise en pratique - Les Fragments
• Mise en pratique - Les propTypes
• Mise en pratique - Les HOC (Higher Order Component)
• Mise en pratique - Les références (Refs)
• Mise en pratique - Les Fragments
• Mise en pratique - Les propTypes
• Mise en pratique - Les HOC (Higher Order Component)
React Hooks
• Comprendre les React Hooks
• Mise en pratique - Le Hook useState
• Mise en pratique - Utiliser plusieurs state en même temps
• Mise en pratique - Le Hook useEffectMise en pratique - Le Hook useRef
• Mise en pratique - Créer un Hook sur mesure
• Pour aller plus loin
Apprendre à développer avec JavaScript (3e édition)
• Présentation du langage JavaScript
• Développement à partir d’algorithmes
• Bases du langage JavaScript
• Conditionnement des traitements
• Traitements itératifs (boucles)
• Tableaux
• Procédures et fonctions
• Approche "objet" en JavaScript
• Objets de base de JavaScript
• Les nouveautés d’EcmaScript
• Saisie de données via des formulaires
• Modèle DOM
• Exploration de flux XML via DOM
• Gestion des cookies en JavaScript
• Stockage local de données
• Stockage distant (Ajax - PHP - MySQL - XML)
• Stockage distant (Ajax - PHP - MySQL - JSON)
• Géolocalisation
• Dessin (HTML5 CANVAS)
• Graphiques de gestion
• Framework AngularJS
• Framework Node.js
• Développement hybride en JavaScript
• Ionic 3, JavaScript en mode hybride
• Gestion du Hardware sous Ionic
• Composants de base sous Ionic
• Applications basiques sous Ionic
• Gestion de la persistance sous Ionic
• Gestion des listes sous Ionic
• Graphiques de gestion sous Ionic
• Comprendre les React Hooks
• Mise en pratique - Le Hook useState
• Mise en pratique - Utiliser plusieurs state en même temps
• Mise en pratique - Le Hook useEffectMise en pratique - Le Hook useRef
• Mise en pratique - Créer un Hook sur mesure
• Pour aller plus loin
Apprendre à développer avec JavaScript (3e édition)
• Présentation du langage JavaScript
• Développement à partir d’algorithmes
• Bases du langage JavaScript
• Conditionnement des traitements
• Traitements itératifs (boucles)
• Tableaux
• Procédures et fonctions
• Approche "objet" en JavaScript
• Objets de base de JavaScript
• Les nouveautés d’EcmaScript
• Saisie de données via des formulaires
• Modèle DOM
• Exploration de flux XML via DOM
• Gestion des cookies en JavaScript
• Stockage local de données
• Stockage distant (Ajax - PHP - MySQL - XML)
• Stockage distant (Ajax - PHP - MySQL - JSON)
• Géolocalisation
• Dessin (HTML5 CANVAS)
• Graphiques de gestion
• Framework AngularJS
• Framework Node.js
• Développement hybride en JavaScript
• Ionic 3, JavaScript en mode hybride
• Gestion du Hardware sous Ionic
• Composants de base sous Ionic
• Applications basiques sous Ionic
• Gestion de la persistance sous Ionic
• Gestion des listes sous Ionic
• Graphiques de gestion sous Ionic
Formation privée en entreprise
Vous êtes plusieurs à vouloir suivre une formation en particulier dans votre entreprise? Si vous êtes plus de 8 personnes, nous pouvons nous déplacer à vos bureaux pour vous donner votre formation en privé. Contactez-nous pour plus de détails ou demandez-nous une soumission en ligne.
Demander une soumissionDurée
13,0 heures
Tarif régulier
250 $
Formation privée en entreprise
Vous êtes plusieurs à vouloir suivre une formation en particulier dans votre entreprise? Si vous êtes plus de 8 personnes, nous pouvons nous déplacer à vos bureaux pour vous donner votre formation en privé. Contactez-nous pour plus de détails ou demandez-nous une soumission en ligne.
Demander une soumission