Booster des Talents IT

Formation React NativeNew Formation !

logo du framework React pour le développement d'applications JavaScript web et mobiles
Développez des applications mobiles natives de qualité grâce à notre formation de 4 jours !
Cette formation vous permettra d’acquérir les connaissances et compétences nécessaires pour aborder un projet React Native en toute sérénité. Des concepts fondamentaux aux techniques de développement avancées, vous apprendrez tout ce qu’il faut savoir pour concevoir et déployer des applications mobiles multiplateformes offrant un véritable rendu natif. Configuration de composants, mise en page, navigation, persistance des données ou encore intégration de modules externes, notre formation React Native couvre l’ensemble des principes de développement du framework développé par Facebook. Soyez enfin en mesure de tirer profit de vos compétences en développement web dans le monde du mobile, sans sacrifier la qualité ou la performance !
Prixà partir de
2350 €HT
RéférenceAF27745
Durée4 jours
Public Architectes, Chefs de Projet, Développeurs
PrérequisConnaissance du langage de programmation JavaScript.
Éditeurs Open Source, Facebook
TP50%

Plan de Formation React Native

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

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

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

Atelier : 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

Atelier : 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

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

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é

Atelier : 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

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

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

Atelier : 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

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…

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 applications React Native sur les stores
  • Bonnes pratiques de développement et erreurs à éviter
  • Ressources additionnelles

Nos autres formations Développement mobile

AF27745Formation React Native New Formation ! en Intra/Cours Particulier4 jours2350 €HT
AF27085Formation PWA Progressive Web Apps New Formation ! en Intra/Cours Particulier3 jours1650 €HT
AF26944Formation Kotlin New Formation ! 11 sessions prévues4 jours2250 €HT
AF26242Formation Ergonomie mobile et tactile 10 sessions prévues3 jours1650 €HT
AF24389Formation Ionic 6 sessions prévues2 jours1090 €HT
Voir les 17 formations
Vous pouvez également être intéressé par des formations crossplateform, facebook, flux, multiplateforme, react, react native, redux ou par les formations de notre filière Développement mobile
A propos de React Native
React Native est un framework JavaScript utilisé pour développer des applications mobiles. Créé en 2015 par Facebook qui cherchait à enrichir l’expérience utilisateur sur smartphones et tablettes, React Native est basé sur React mais destiné au développement d’apps iOS ou Android ayant un rendu natif. Au lieu d’exécuter des WebViews ou de transpiler du JavaScript, React Native permet l’invocation et l’orchestration de composants UI natifs. Le résultat offre une expérience utilisateur similaire à celle des applications développées en Objective-C ou Java, tout en permettant aux développeurs de tirer pleinement parti des avantages de JavaScript et du framework React.

Les applications créées avec React Native se différencient ainsi des applications web mobiles, des applications HTML5 ou des applications hybrides développées avec Apache Cordova (PhoneGap) ou Ionic. Conformes aux normes imposées par le système d’exploitation, elles se caractérisent notamment par de meilleures performances et des animations plus fluides. Outre Facebook, un large panel d’entreprises utilisent aujourd’hui React Native pour réaliser des applications : Airbnb, Instagram, Wix, Pinterest, Netflix, Yahoo, Dropbox ou encore Amazon Video ont placé cette technologie au cœur de leurs développements.

Avant de réaliser votre formation React Native, vous pouvez prendre en main les principales fonctionnalités du framework grâce au tutoriel ci-dessous :

En savoir plus
Prixà partir de
2350 €HT
RéférenceAF27745
Durée4 jours
Public Architectes, Chefs de Projet, Développeurs
PrérequisConnaissance du langage de programmation JavaScript.
Éditeurs Open Source, Facebook
Travaux pratiques50%