AJC FORMATION : 06. React JS - Développement d'applications web
Organisme
75009 PARIS 9Voir toutes ses formationsAutres organismes proposant cette formation
Durée
Modalités
- Classe virtuelle
- Présentiel
Les participants réalisent tout au long des exercices, QCM et/ou cas pratiques. En fin de formation, les acquis sont vérifiés
Prix
Public
Développeurs, architectes, chefs de projets…
Pré-requis
Avoir des connaissances pratique du développement Web, maîtrise et pratique de JavaScript (ES5 minimum).
Objectifs pédagogiques
- Connaître les spécificités de ReactJS
- Savoir développer des applications web performantes avec ReactJS
- Concevoir une SPA avec ReactJS et Flux
- Comprendre le subset JavaScript JSX
- Optimiser les performances des RIA
- Être en mesure de comprendre les impacts du choix d'une architecture incluant ce type d'application
Programme détaillé
Introduction à l’ES6 et aux modules
- Rappels
- Design patterns
- Nouveautés de la syntaxe ES6
- Compilation du code ES6 avec Babel
- Typescript et Flow
- Gestion des modules avec Webpack
Introduction à React
- Ecosystème des frameworks JavaScript
- Différentes approches du data-binding
- Philosophie de React
- Environnement de développement
- Outils de debug
Développer avec React
- Création d’un composant
- La syntaxe JSX
- JSX vs JavaScript
- Comprendre JSX en détails
- Gestion du « state » du composant
- Les méthodes du cycle de vie
Travaux pratiques : Création d’un projet élémentaire permettant d’afficher une page minimaliste
Interactivité des composants
- Gestion des événements
- Imbrication de composants
- Utilisation des « props »
- Composants réutilisables
- Manipulation du DOM
- Gestion des formulaires
- Design pattern des composants
Travaux pratiques : Création d’une application qui permet à deux composants de communiquer
Application monopage avec Flux ou Redux
- Présentation de Flux
- Installation de Redux
- Les différentes entités du pattern Flux
- Principe du « one way data flow »
- Présentation de Redux
- Utilisation du store
- Les actions et le reducer
- Extensions utiles de Redux
- Intégration dans React
- L’internationalisation
Travaux pratiques : Utilisation d un projet React qui interagit avec Redux pour y stocker des informations
La navigation avec React Router
- Présentation de React Router
- Installation de React Router
- Configurer les routes
- Récupérer les paramètres de l’URL
- Créer des liens
- Déclencher une navigation
Travaux pratiques : sur le TP précédent mettre en place un menu qui permet de naviguer de page en page en utilisant les routes
Application isomorphique
- Principe et bénéfice du développement isomorphique
- Écosystème du Javascript côté serveur
- Configuration de NodeJS pour React
- Récupérer les paramètres de l’URL
Introduction à React Native
- L’hétérogénéité des OS mobiles
- Natif vs hybride vs cross-platform
- Principales solutions cross-platform
- React Native
- Démonstration d’application React Native
Travaux pratiques : Création d’une application élémentaire