React Native est flexible et cela commence dès le lancement de votre projet. Dans ce chapitre, je vais vous présenter les deux options pour démarrer un projet React Native

React Native ne dispose pas d'IDE (Environnement de Développement) comme iOS avec XCode, et Android avec Android Studio. Donc avant de pouvoir développer une application React Native, il faut créer soi-même son environnement de développement. Heureusement pour nous, une CRNA reste le moyen le plus simple et le plus rapide pour configurer notre environnement. Cela ne nous prendra que quelques minutes. ;)

J'ai nommé ce chapitre "Maîtrisez la hiérarchie d'une application React Native" pour simplifier le sommaire. Pour être plus précis, il s'agit de la hiérarchie d'une CRNA. La hiérarchie diverge un peu entre une CRNA et une application React Native avec du code natif, nous le verrons plus loin dans ce cours, mais la différence est très légère. Désolé pour ce raccourci. :-°

On vient de créer notre première application mobile React Native. Avant de nous lancer dans les développements, je vais vous expliquer comment tester le rendu de votre application grâce à Expo.

Vous venez de créer votre première application React Native, plus précisément une CRNA. C'est déjà pas mal. On a vu son architecture, son rendu, son rechargement, mais on ne sait toujours pas comment c'est développé. Le moment est venu de mettre les mains dans le code et de jouer avec les différents composants de React Native. Enfin ! :pirate:

Nous venons de créer notre tout premier component, mais, on ne va pas se mentir, il est quasi inutilisable en l'état. En tout cas, le TextInput pour saisir du texte est inaccessible, masqué par la barre de statut du device. Il est temps d'ajouter une couche de peinture pour styliser tout cela et rendre notre component fonctionnel.

En React Native, tous les components utilisent Flexbox et sont des "boîtes flexibles". Donc, dès lors que vous appliquez un style de margin, un padding, un alignement, une taille dynamique, bref tout ce qui touche à du positionnement d'éléments, vous passez sans trop le savoir par Flexbox. C'est pour cela que bon nombre de styles sont regroupés dans la partie "Flexbox" de la documentation des styles que j'ai partagée avec vous dans le chapitre précédent.

Il est temps d'avancer sur notre application. Dans ce chapitre, nous allons créer une liste de données avec des films. Cela va me permettre de vous présenter un nouveau concept : les Props. Un nom qui ne rassure pas, je vous l'accorde, mais, une fois de plus, il n'y a rien de compliqué, vous verrez.

Dans ce chapitre, nous allons découvrir et utiliser l'API TMDB (The Movie DataBase) pour récupérer toutes sortes de films. Vous verrez que l'API TMDB est très puissante et surtout qu'elle permet de récupérer les informations des films en français ! Tout le contenu et la richesse de cette API sont créés par une communauté de cinéphiles passionnés. :zorro:

Dans ce chapitre, nous allons revoir des notions et concepts appris précédemment, afin de vous perfectionner dans leur utilisation. On ne verra donc rien de nouveau. Rassurez-vous, même si vous n'êtes pas bien réveillé, ce chapitre devrait bien se passer. :D Vous allez voir qu'avec tout ce que l'on a déjà appris, on est en mesure de créer des fonctionnalités vraiment sympas et très rapidement. Au programme, je vous propose d'ajouter 3 fonctionnalités dans notre component Search : ajouter un composant de chargement pour faire patienter l'utilisateur pendant la récupération des films de l'API ; valider la recherche avec le clavier, en plus de la validation avec le bouton "Rechercher" ; rendre notre liste de films plus "lisible", en afficher le poster du film, parce que, oui, on a toujours notre rectangle gris.

Je ne sais pas si vous avez poussé vos tests de l'application très loin, mais si vous scrollez jusqu'en bas de la liste des films recherchés, vous devriez rapidement être bloqué, au bout de 20 films très exactement. C'est normal, l'API TMDB ne renvoie que 20 films par appel et gère ensuite une pagination pour récupérer les suivants. Je vous propose de gérer une pagination dans notre liste de films. Dès que l'utilisateur arrive à la fin de notre liste de films, on va récupérer les films suivants et ainsi créer ce qu'on appelle en développement un scroll infini. Bien sûr, infini jusqu'à ce que l'API ne renvoie plus de films correspondant à votre recherche. :p Mais méfiez-vous, la base de données de TMDB est bien remplie.

Vous connaissez à présent toutes les bases de la programmation en React Native. Mais je sens que vous avez envie d'en connaître bien plus, en tout cas, vous êtes là pour ça, non ? :D On va découvrir ensemble comment créer une application plus complète. Je vais vous apprendre à créer plusieurs vues et surtout à naviguer entre elles. En développement mobile, la navigation représente le passage d'une vue à une autre. À moins que votre application n'ait qu'une seule et unique vue, vous allez forcément y être confronté. C'est un point essentiel dans les applications mobiles. Une navigation bien gérée, cohérente, rend votre application intuitive et fluide. Pourtant, c'est souvent un sujet délicat lors de la réalisation d'applications cross-platforms, non pas parce que c'est difficile à maîtriser, mais parce que l'animation de la navigation n'est pas la même entre iOS et Android.

En React Native, et plus globalement en React, un component est créé lorsqu'on l'affiche, puis il est éventuellement modifié et enfin, il est supprimé lorsqu'il n'est plus affiché à l'écran. Chacune de ces étapes correspond à un cycle de vie. Dans ce chapitre, je vais vous apprendre à réaliser des actions lorsque vos components changent de cycle de vie. Enfin, apprendre est un grand mot. Sans trop le savoir, on réalise ces types d'action depuis le début de ce cours, vous allez voir. ;)

Nous allons à présent aborder Redux. Il s'agit certainement de la partie la plus complexe de ce cours, alors surtout, ne vous découragez pas. Je vais tout faire pour simplifier au maximum son fonctionnement. On va y aller en douceur et si jamais tout n'est pas clair dans vos têtes, pas d'inquiétudes, on va pratiquer, pratiquer, pratiquer, jusqu'à ce que ce soit clair pour vous.

On va créer l'architecture Redux petit bout par petit bout : reducer, action, store et state global. À la fin, on connectera tous les éléments ensemble afin d'obtenir une architecture fonctionnelle. Donc si l'utilité d'un élément créé ou son fonctionnement vous échappe, poursuivez jusqu'au bout du chapitre et tout devrait être plus clair.

Notre store Redux et son reducer sont prêts et ils sont capables de fournir le state global à nos components abonnés. Ils attendent à présent qu'on leur envoie une action pour ajouter ou supprimer un film des favoris et donc mettre à jour le state global. C'est ce que nous allons réaliser dans ce chapitre.

Maintenant que Redux n'est plus un secret pour vous, :soleil: nous allons pousser la navigation dans notre application encore plus loin. Nous allons créer une barre d'onglets, aussi appelée TabBar dans le mobile. Pour l'instant, on se contentera de deux onglets : un pour la recherche de films et un pour afficher les films favoris.

Vous êtes encore là ? Les mots "data binding" ne vous ont pas fait fuir ? ^^ Tant mieux, c'est un concept hyper intéressant et vous allez comprendre énormément de choses sur le fonctionnement de vos applications. Le data binding n'est pas un concept créé par React et Facebook, et c'est loin d'être nouveau. C'est un concept très utilisé dans le développement web. Si vous avez fait de l'AngularJS, par exemple, vous avez forcément dû en entendre parler et il y a fort à parier que je ne vous apprenne pas grand-chose ici.

Le développement spécifique est l'écriture de code propre à une plateforme : iOS / Android. Lorsque l'on développe sur React Native et sur les frameworks cross-platforms, on développe son application une seule fois et, par conséquent, les comportements sont les mêmes sur les deux plateformes. On souhaite parfois avoir un comportement différent en fonction de la plateforme. Sur iOS, vous voudrez avoir le bouton en haut à droite, alors que, sur Android, vous le voudrez en bas à gauche, etc.

Les animations font partie intégrante des applications mobiles. Elles sont bien sûr optionnelles, mais c'est un plus non négligeable. C'est ce qui rend votre application unique et interactive. Notre application est déjà pleine d'animations, sans que l'on s'en rende compte. Par exemple, quand on passe d'une vue à une autre, il y a une animation pour afficher la nouvelle vue. Quand on clique sur un bouton, il y a une animation pour faire varier son opacité, sa transparence. Quand on affiche un chargement, ce dernier ne tourne pas tout seul, c'est encore une animation.

Il va donc nous falloir utiliser du code natif dans notre application et, là encore, je vous en ai déjà parlé, mais, actuellement, on ne peut pas. On est toujours sur une CRNA (Create-React-Native-App), une solution développée par la communauté React Native très pratique, très puissante, qui fonctionne avec Expo, mais qui a ses limites. Une CRNA ne peut fonctionner qu'avec du Javascript, elle ne gère pas le langage natif. On va donc devoir s'en séparer et partir sur la deuxième solution de développement React Native, à savoir : une Application React Native avec du code natif.

Si vous êtes encore là, c'est que vous avez envie d'en découdre avec notre application React Native avec du code natif et les composants des devices. J'ai peut-être semblé un peu nostalgique dans le précédent chapitre, lorsque l'on a abandonné notre CRNA, mais, sachez-le, le passage sur une application React Native avec du code natif nous a ouvert une multitude de possibilités : composants du device, librairies React Native, développement natif, etc.

Nous voilà de véritables experts du développement React Native. Nous sommes capables de gérer une navigation complexe, de transmettre des données dans toute notre application, de jouer des animations et pourtant, on débugue toujours notre application avec des logs. ^^ Il est temps de pousser le débugage de notre application plus loin. Bien sûr, les logs et les messages qui s'affichent à l'écran sont, à 90 % du temps, amplement suffisants. Mais parfois, on tombe sur une anomalie, un comportement difficile à identifier et, dans ce genre de cas, les logs et les warnings ne suffisent plus. Il existe plusieurs outils, plus ou moins poussés, pour débuguer son application. Je vais vous présenter chacun d'entre eux. Mais avant cela, reparlons un peu des logs, vous voulez bien ?

Bienvenue dans le dernier chapitre de ce cours. Eh oui, déjà ! :( Ici, je vais vous apprendre comment finaliser votre application et la préparer pour un départ imminent vers les stores Apple et Google. Actuellement, notre application fonctionne avec un serveur Node.JS, en localhost, sur lequel notre application pointe pour récupérer le fichier bundle Javascript. Vous vous doutez bien que votre application ne peut pas fonctionner comme cela chez vos utilisateurs. Il y a donc quelques étapes à effectuer afin de préparer votre application pour les stores. Avant cela, il faut que l'on traite un point pour le moins... impactant pour l'utilisateur. Ce dernier peut ajouter un avatar, ajouter des films dans ses favoris, mais, dès qu'il relance l'application, son avatar et ses films favoris sont perdus. Il faut que l'on trouve le moyen de sauvegarder, en langage technique persister, les données de l'application. Et plus précisément ici, ce sont les données de notre store Redux.