Domaine : Bureautique et informatique

Description de la formation 

Développez des applications mobiles natives de qualité grâce à notre formation de 4 jours !

Objectifs de la formation

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 !

Public cible

Architectes, Chefs de Projet, Développeurs

Compétences pré-requises

Connaissance du langage de programmation JavaScript

Durée

4 jours

Nombre de participants maximum

8 personnes

Programme

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

Dates des sessions 

  • le 02/06/2020 à Distance,
  • le 16/06/2020 à Lille,
  • le 29/06/2020 à Grenoble,
  • le 29/06/2020 à Lyon,
  • le 06/07/2020 à Paris,
  • le 07/07/2020 à Distance,
  • le 20/07/2020 à Nantes,
  • le 04/08/2020 à Distance,
  • le 08/09/2020 à Distance,
  • le 21/09/2020 à Grenoble,
  • le 21/09/2020 à Lyon,
  • le 21/09/2020 à Toulouse,
  • le 06/10/2020 à Paris,
  • le 06/10/2020 à Aix-en-Provence,
  • le 03/11/2020 à Lille,
  • le 23/11/2020 à Grenoble,
  • le 23/11/2020 à Lyon,
  • le 15/12/2020 à Paris,
  • le 15/12/2020 à Nantes

Tarif HT

2 350 euros.

Informations diverses 

Formation possible en inter, en intra, en cours particulier et à distance


S'inscrire à la formation

Accéder à la plateforme d'inscription

Modalités de prise en charge

Vous pouvez bénéficier de l’aide à la formation du Fonds national de l’Emploi, FNE-Formation.

Le dispositif

Le FNE-Formation est une aide attribuée par la Direccte à une entreprise (aide à la formation du Fonds National de l’Emploi). 

Il a pour objet la mise en œuvre de mesures de formation professionnelle, permettant de faciliter la continuité de l’activité des salariés face aux transformations consécutives aux mutations économiques, et de favoriser leur adaptation à de nouveaux emplois en cas de changements professionnels dus à l’évolution technique ou à la modification des conditions de production.

L’ensemble des entreprises ayant des salariés placés en activité partielle sont éligibles pour ces salariés à l’exception des salariés en contrat d’apprentissage ou en contrat de professionnalisation.

Il n’y a pas de critère de taille d’entreprise ou de secteur d’activité.

Tous les salariés, à l’exception des alternants sont éligibles, indépendamment de leur catégorie socio-professionnelle ou de leur niveau de diplôme.

Les engagements de l’entreprise

En contrepartie des aides de l’Etat, l’employeur doit s’engager à maintenir dans l’emploi le salarié formé pendant toute la période de la convention.

Le contrat de travail étant suspendu pendant la période d’activité partielle, l’entreprise doit pouvoir justifier de l’accord écrit des salariés placés en activité partielle pour le suivi de la formation.

En savoir plus

 

Vous bénéficiez des dispositifs de prises en charges en cours d’OPCO Mobilités.

En savoir plus

Partager