• 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

Configurez votre environnement de développement

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

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. ;)

Installez les outils

Pour développer avec React Native, vous allez avoir besoin de Node.js.

Logo de NodeJS
Node.js

Nous le verrons plus tard, mais Node.js va nous permettre de créer un serveur et d'y déposer notre code React Native (en Javascript).

Maintenant, et grâce à Node.js, vous pouvez installer les lignes de commande CRNA. Ces lignes de commande nous permettront, un peu plus loin, de créer une CRNA.

Ouvrez un terminal et tapez :

$ npm install -g expo-cli

Pour développer une application React Native, on développe en Javascript, et le meilleur moyen de développer en Javascript reste le bon vieil éditeur de texte. Libre à vous de choisir votre éditeur préféré. Pour ma part, j'utilise Atom, un éditeur de texte très léger qui permet d'installer des modules supplémentaires, et notamment Nuclide.

Si vous êtes sur Atom, je vous invite à installer ce module en allant dans : Preferences / Install et de rechercher "Nuclide". Si vous n'êtes pas sur Atom, ou si vous ne souhaitez pas l'installer, pas d'inquiétudes : Nuclide est totalement optionnel pour développer en React Native et pour suivre ce cours.

À cet instant, vous avez tout ce qu'il faut pour créer une CRNA et développer en React Native, mais il nous manque quelque chose : un outil pour lancer et afficher votre application sur un téléphone / une tablette. Malheureusement, rien n'est magique dans le développement. :p

Expo

En plus de nous procurer un outil de développement d’application React Native, Expo nous offre une application hôte. Cette application va nous permettre d'exécuter et d'afficher le rendu de nos applications pendant les phases de développement. C’est fou tout ce qu’Expo peut faire pour nous ! :D

Si vous possédez un smartphone / une tablette iOS ou Android

Vous pouvez télécharger l'application Expo. L'application est disponible sur l'App Store et sur le Google Play.

Vous pouvez passer directement à la partie : Création de votre CRNA.

Si vous ne possédez pas de smartphone ou de tablette

La démarche est plus complexe. Vous devrez configurer votre environnement de développement pour démarrer un téléphone / une tablette virtuelle, autrement dit un émulateur Android ou un simulateur iOS.

Pour iOS

Il faut être sur Mac et installer XCode, un logiciel permettant de développer des applications natives iOS. Il vous faudra aussi installer Watchman, un service qui observe vos changements dans vos fichiers et informe le simulateur pour qu'il se mette à jour. Votre projet n'a pas besoin de Watchman pour que vos changements soient bien pris en compte, mais il est recommandé de l'installer sur Mac pour augmenter les performances de débugage.

Le service peut être installé avec Homebrew :

$ brew install watchman

Une fois installé, normalement, votre environnement est suffisamment configuré pour tester votre application React Native.

Pour Android

Il faut configurer l'environnement propre à Android, c'est-à-dire Python 2, un JDK, un SDK Android et une machine virtuelle Android avec AVD. Je vous invite à vous référer à la documentation React Native et à la partie Building Projects with Native Code (sélectionnez bien l'onglet Building Projects with Native Code). C'est vraiment très bien expliqué. Que vous soyez sur Windows / Mac OS / Linux, il y a une documentation faite pour vous.

Création d'une CRNA

Nous voici avec un environnement de développement fonctionnel pour créer une CRNA.

Il est temps de créer votre première application React Native.

Dans un terminal, placez-vous dans le dossier de votre choix. Pour ma part, j'ai créé un dossier exprès /ReactNative :

$ cd /chemin_vers_votre_dossier/ReactNative/

Puis créez votre CRNA. On va appeler notre projet "MoviesAndMe" :

$ expo init MoviesAndMe

Expo vous demande de choisir le template de départ pour votre application :

Choix du template de notre CRNA
Choix du template de notre CRNA

Nous allons partir d’un projet vierge, choisissez donc blank , le premier choix.

La création peut prendre un peu de temps ; il faut que le projet installe une multitude de librairies Javascript. Une fois que cela est fini, vous devriez voir apparaître le message :

Your project is ready at …

Félicitations, vous venez de créer votre première application React Native. :soleil:

Vous voyez que c'était plutôt rapide, non ? Bon OK, pour ceux qui n'ont pas de smartphone ou de tablette à portée de main, c'était un peu plus long, mais rassurez-vous, votre configuration n'a pas été faite en vain. Vous avez installé l'environnement de développement pour créer une application React Native avec du code natif. Lorsque l'on abordera le sujet de l'utilisation des composants du téléphone, votre environnement sera déjà prêt. Vous avez juste pris de l'avance sur mon cours. :D

Votre application React Native est prête. Elle contient plein de fichiers qui, si vous êtes comme moi au moment de découvrir React Native, n'ont aucun sens pour vous. Alors, petite pause, petit café et on aborde ce sujet dans le prochain chapitre.

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