• 30 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 09/09/2020

Appréhendez les différentes possibilités de développement avec React Native

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Je vous en ai parlé dans le premier chapitre : 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.

Lorsque j'ai découvert React Native, je vous avoue que j'ai été un peu perdu. :'( Ne connaissant pas du tout la technologie, je n'avais aucune idée de l'option à choisir. On s'attend à ce que la documentation nous aiguille pour faire un choix, mais ce n'est pas du tout le cas. Je vais essayer de combler ce manque et de répondre à vos interrogations.

À la fin de ce chapitre, on optera pour une solution et on se lancera dans la création de notre toute première application React Native.

Les deux options

Si vous jetez un œil au Getting Started de React Native, vous remarquerez qu'il y a deux onglets :

Getting Started de React Native
Getting Started de React Native

Le premier onglet vous guidera pour démarrer rapidement une application React Native. Quant au deuxième, il vous détaillera les différentes étapes avant de pouvoir créer une application React Native avec du code natif.

Je vois déjà vos yeux s'agrandir et la question qui va avec : Euh ... il y a une différence dans ce que tu viens de dire ?

En fait, lorsque vous développez une application mobile, vous avez parfois besoin d'accéder à des composants du téléphone, par exemple la caméra, la géolocalisation, les contacts, etc. Dès lors que vous souhaitez utiliser un composant du téléphone, il faut utiliser du code natif, écrit en Swift, Objective-C, Java ou Kotlin. Aucun framework cross-platform n'échappe à cette règle. La plupart des frameworks masquent ce fonctionnement en vous permettant d'utiliser des modules qui gèrent tout, mais derrière, le code est toujours le même : c'est du code natif.

React Native fait la différence entre les applications qui n'auront pas besoin d'accéder à des composants du téléphone, donc sans code natif, et les applications qui auront besoin d'accéder aux composants du téléphone, donc avec du code natif.

create-react-native-app

Dans le premier onglet, Quick Start, React Native vous explique comment créer une create-react-native-app. Pour la suite de ce cours, nous allons appeler cette solution une CRNA (Create-React-Native-App), c'est l'abréviation qu'utilisent les développeurs React Native pour parler de create-react-native-app, et c'est beaucoup plus court à écrire. :-° Une CRNA est une solution créée par la communauté React Native pour se lancer rapidement dans les développements ; elle nécessite peu de configuration. C'est le moyen le plus simple de créer une application mobile React Native.

L'inconvénient est qu'elle ne permet pas d'utiliser du code natif et donc d'accéder aux composants du téléphone.

React Native avec du code natif

Dans l'autre onglet, Building Projects with Native Code, React Native nous explique comment configurer son environnement de développement pour utiliser React Native avec du code natif. Le processus est plus long qu'une CRNA, car il faut installer tous les composants pour compiler du code natif : JDK (Java Development Kit), Android SDK, AVD (Android Virtual Device), XCode (pour iOS), etc.

Étant donné qu'on a envie de rentrer tout de suite dans le vif du sujet, sans avoir à installer beaucoup d'éléments, on va partir sur une CRNA.

Je vois déjà la moitié des lecteurs s'en aller, se disant : "Une CRNA, c'est bien, mais on ne peut pas utiliser les composants du téléphone. Mon projet perso en a besoin ; je fais comment, moi ?"

Ne vous inquiétez pas, React Native a tout prévu. Dès que vous aurez besoin des composants du téléphone, vous n'aurez qu'une commande à taper et votre projet passera automatiquement d'une CRNA à une application React Native avec du code natif. À ce moment-là, vous pourrez utiliser autant de composants du téléphone que souhaité.

En plus, nous allons nous aussi être confrontés à ce problème un peu plus loin dans ce cours, lorsque l'on souhaitera prendre une photo ou accéder à la galerie de photo. La caméra et la galerie photo sont des composants du téléphone. Donc pas d'inquiétudes, on traitera ensemble ce sujet primordial.

Pourquoi partir sur une CRNA ?

Je vous l'ai dit, une CRNA permet de se lancer rapidement dans les développements.

Dans le monde du développement mobile, il existe une multitude de solutions pour développer une application et notamment sur du développement cross-platform. Si le framework est trop long à configurer ou s'il nécessite trop de temps d'apprentissage, les développeurs vont se lasser et passer à un autre framework. C'est tout ce que je souhaite éviter avec vous et c'est pour cette raison aussi que la communauté React Native a créé cette solution.

Pour la petite histoire, au début de React Native, il n'y avait qu'une option : créer une application React Native avec du code natif. La communauté a compris le manque, et surtout le frein, que présentait l'absence d'une solution plus simple.

Vous connaissez à présent les différentes options pour démarrer un projet en React Native. J'espère que j'ai répondu à toutes vos interrogations et que vous n'êtes pas aussi perdu que je l'étais quand j'ai commencé mon apprentissage de React Native. :lol:

Dans ce cours, on va donc démarrer par une CRNA et je vous montrerai, quand on y sera confronté, comment basculer vers une application React Native avec du code natif et utiliser les composants du téléphone.

Une CRNA est très simple à créer et utiliser, mais elle nécessite quand même un minimum de configuration. On voit tout cela ensemble dans le prochain chapitre.

Exemple de certificat de réussite
Exemple de certificat de réussite