Introduction à la formation React Native
Ce premier module constitue une introduction à React Native, le framework JavaScript de Facebook utilisé pour développer des applications mobiles. Nous effectuerons en premier lieu un bref retour sur les spécificités du développement mobile, et en particulier sur l’écosystème multiplateforme. Vous comprendrez ainsi le positionnement de React Native sur le marché, identifierez ses spécificités et son intérêt pour les développeurs. Vous manipulerez ensuite les principales fonctionnalités d’ECMAScript 6 et 7 au cœur de React Native, avant de voir ou revoir les concepts de développement propres à React.
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
Exemples de cas pratiques : 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
React Native fournit un certain nombre de composants. Dans cette deuxième section, nous en étudierons les principaux, comme View ou Text, ainsi que leurs cycles de vie. Vous apprendrez également à utiliser les Props et States afin de paramétrer ces composants.
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
Exemples de cas pratiques : Démarrage d’un projet avec create-react-native-app, création et configuration de composants React Native.
Styles et mise en page avec Flexbox
React Native emprunte plusieurs concepts au développement web, et notamment à CSS (tout en contournant ses principaux défauts grâce à une approche différente). Nous verrons ici comment styliser vos applications pour créer de belles interfaces utilisateurs, optimisées pour le mobile. Vous apprendrez à utiliser l’algorithme Flexbox et saurez disposer au mieux vos composants à l’écran.
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
Exemples de cas pratiques : Manipulation des styles, découverte des bonnes pratiques, utilisation des différentes propriétés et valeurs de Flexbox.
Architecture : Flux et Redux
Vous découvrirez dans ce module le modèle d’architecture d’application Flux et son flux de données unidirectionnel. Apprenez à l’implémenter grâce à la librairie Redux, un concept largement adopté par les développeurs en lieu et place du pattern MVC.
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
Introduction à MobX
Exemples de cas pratiques : 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
Durant ce module, vous apprendrez à utiliser un grand nombre de composants React Native. Pour faciliter leur prise en main, nous développerons une application simple mais qui nous permettra de découvrir les principales fonctionnalités du framework. Nous verrons par ailleurs qu’il n’est pas nécessaire de réinventer la roue et qu’un grand nombre de composants existent déjà : React Native est un framework open source et dispose d’une communauté particulièrement active.
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é
Exemples de cas pratiques : Développement d’une application React Native utilisant divers composants, natifs et tiers (présentation de Awesome React Native).
Navigation et animations
Dans cette section, nous couvrirons les concepts de navigation dans React Native. Puisqu’une application mobile est rarement composée d’un seul écran, nous apprendrons à gérer la transition entre plusieurs pages. Vous découvrirez la solution React Navigation, qui permet de gérer les écrans d’une application en seulement quelques lignes de code. Nous nous pencherons ensuite sur les animations, un aspect fondamental pour enrichir l’expérience utilisateur de vos applications.
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
Exemples de cas pratiques : 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
Ce module sera consacré dans un premier temps à la création de formulaires pour notre application. Nous verrons ensuite comment effectuer des requêtes pour récupérer des données sur un serveur distant en utilisant l’API Fetch. Vous apprendrez finalement à mettre en œuvre le stockage persistant des données sous React Native et utiliserez à nouveau la solution Redux pour gérer les 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
Exemples de cas pratiques : Développement d’un formulaire sur l’application, intégration de fonctionnalités permetant 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
Dans le chapitre précédent, nous avons utilisé l’API native AsyncStorage. Nous découvrirons maintenant quelques-unes des autres plateformes APIs supportées par React Native. Vous découvrirez par exemple comment ajouter la géolocalisation à votre application, pour détecter automatiquement la position de l’utilisateur, ou encore comment interagir avec la bibliothèque d’images et la caméra du smartphone. Nous verrons enfin comment intégrer des modules natifs à notre application.
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
Exemples de cas pratiques : 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…
Pour ce dernier module, nous effectuerons tout d’abord un panorama des acquis de la formation, en revenant éventuellement sur certains points selon les besoins des participants. Vous testerez ensuite votre application développée durant la formation, et nous discuterons des différentes options utilisées par les développeurs pour déployer les applications sur le Google Play Store et l’App Store d’Apple. Nous verrons notamment comment utiliser CodePush pour le déploiement continu, et terminerons la formation en passant en revue les meilleures pratiques de développement ainsi que les écueils à éviter.
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
