Cette formation est aussi disponible à la carte pour une prestation dans les locaux de votre entreprise (intra-entreprise) !
| Prix | 2 700 € HT |
| Durée | 5 jours |
| Prochaines dates | du 11 au 15 mai |
| Pré-requis | Une pratique du développement Web, si possible une connaissance basique de Javascript et CSS |
React – 3 jours
Introduction
Écosystème des Framework Web.
Principes de Data-Binding, immutabilité Langage JSX, présentation, syntaxe Transpilers.
Environnement de développement et outillage.
Présentation de React
Historique de React, positionnement.
Philosophie et concepts fondamentaux, modèle MVC.
Virtual DOM.
Méthodes principales de l’API.
Créer des composants de vues.
Cycle de vie.
Gérer les états de composant avec Render Function.
Composants React et interactivité
Gérer les évènements, autobinding et délégation.
Design Pattern, les composants à état.
Composition par ensembles.
Propriétés des composants : Props vs. States.
Component Data Flow.
Composants réutilisables.
Contrôle des composants de formulaire Manipuler le DOM.
Application Web monopage avec React et Flux ou Redux
Présentation de Flux, Redux.
Propagation des données.
Créer des vues et contrôleurs.
Rôle du dispatcher.
Le Store et les actions.
Approche avec Redux.
Routage
React Router, installation, présentation et principes.
Organisation de routes.
Autres solutions.
Isomorphisme
Le développement d’applications isomorphiques, principes et bénéfices.
Ecosystème du JavaScript côté serveur.
Initiation à NodeJS, configuration pour React.
Pour aller plus loin
Interconnexion avec des BDD.
Utilisation d’une API REST.
Utilisation de TypeScript avec React.
Migrer une application .NET vers React.
React Native – 2 jours
Introduction à la formation React Native
Retour sur le développement mobile.
Frameworks et outils pour le développement multiplateforme (Cordova, Ionic, NativeScript…).
Présentation générale, historique et positionnement de React Native.
Principes fondamentaux et architecture.
ECMAScript 6, 7, moteur Babel et syntaxe JSX.
Cycle de vie des composants React, apprendre à « penser React ».
Installer et configurer React Native.
Atelier : Installation de l’environnement de développement, création d’une première application React Native et prise en main des outils de debug. Manipulation des nouveautés ES6 et ES7.
Les bases de React Native
View, Text, Image… : les composants de base.
Cycles de vie des composants.
Créer un composant.
Utiliser les props et states pour configurer un composant.
Comprendre les différences entre props et states.
Atelier : Démarrage d’un projet avec create-react-native-app (Expo), création et configuration de composants React Native.
Styles et mise en page avec Flexbox
Déclarer et utiliser les styles L’API Stylesheet, méthodes et propriétés.
Contrôler la taille des composants à l’écran.
Appliquer des styles spécifiques à un composant.
Combiner, organiser et partager des styles.
Introduction à Flexbox, différences avec CSS sur le web.
Contrôler la disposition des éléments avec Flexbox.
Maîtriser l’utilisation de flexDirection, justifyContent et alignItems.
Atelier : Manipulation des styles, découverte des bonnes pratiques, utilisation des différentes propriétés et valeurs de Flexbox.
Architecture : Flux et Redux
Retour sur le MVC (Model-View-Controller).
Introduction à l’architecture d’application Flux.
Intérêts et cas d’utilisation.
La librairie JavaScript Redux : actions, reducer(s), store.
Installer et implémenter Redux.
Atelier : Présentation d’une utilisation de Flux et Redux pour gérer les différents états de l’application.
Construction d’une application React Native
Gérer les entrées textuelles de l’utilisateur.
Travailler avec les évènements Touch et le Gesture Responder System.
Utiliser les composants FlatList, SectionList et ScrollView.
Définir la hiérarchie des composants.
Organiser les répertoires pour bien structurer son projet.
Chercher et utiliser des composants développés par la communauté.
Atelier : Développement d’une application React Native utilisant divers composants, natifs et tiers (présentation de Awesome React Native).
Navigation et animations
Panorama des solutions pour gérer la navigation.
Présentation de React Navigation.
Naviguer entre les écrans d’une application.
Gérer la hiérarchie des routes et l’historique de navigation.
Le composant NavigatorIOS.
Options avancées de navigation.
Les APIs Animated et LayoutAnimation.
Créer et configurer des animations.
Animer des éléments en réponse à une interaction tactile avec PanResponder.
Atelier : Intégration d’un deuxième écran dans l’application avec react-navigation, ajout d’animations et de transitions personnalisées.
Formulaires et gestion des données
Créer les composants principaux d’un formulaire.
Définir une logique de validation et gérer les erreurs.
Redux-form et autres solutions (tcomb-form-native, react-reactive-form).
Récupérer des données avec XMLHttpRequest ou Fetch API.
Stockage offline et persistance des données avec AsyncStorage.
Autres outils disponibles (realm, graphQL…).
Utiliser Redux pour une meilleure gestion des données.
Atelier : Développement d’un formulaire sur l’application, intégration de fonctionnalités permettant la récupération des données d’une API REST et la persistance de données.
Les principales APIs React Native et modules natifs
Spécificités des plateformes iOS et Android.
Obtenir la localisation de l’utilisateur avec l’API Geolocation.
Accéder aux photos et à la caméra avec CameraRoll.
Gérer les permissions.
Réutiliser ou développer un module natif.
Atelier : Mise à jour de notre application en intégrant certaines APIs natives de React Native, intégration d’un module natif développé par la communauté.
Aller plus loin…
Optimiser les performances de l’application.
Tests unitaires et tests fonctionnels.
CodePush pour le déploiement continu et les mises à jour à distance (Over The Air).
Publier une application React Native sur les stores.
Bonnes pratiques de développement et erreurs à éviter.
Ressources additionnelles.