Pour changer un peu de la programmation iOS, j’ai décidé de jeter un oeil à React-Native…

Pour ceux qui ont hiberné ces 2 dernières années, React-Native est un projet initié par Facebook qui est open source, et qui nous fait la promesse de pouvoir enfin développer des application cross-platform aussi efficaces que des applications natives. Dans la même optique, j’avais déjà essayé Xamarin, mais je n’avais pas vraiment été convaincu (à un moment ou un autre, il fallait toujours passé en langage natif).

Voici donc le premier d’une série d’articles concernant React-Native, et pour commencer, nous allons parler de l’installation, qui n’est pas forcément une mince affaire…

Sur Mac, il faut en premier installer XCode, ci cela n’est déjà fait (mais est-ce possible si vous lisez ce blog ?). Là, je ne détaille pas, rdv sur l’App Store.

Ensuite, il faut installer Node et Watchman. Pour se faciliter la vie, on va d’abord installer Brew, qui est un gestionnaire de paquets.

Tout se fait à partir du terminal.

Installation de Brew :

Puis de Node :

Et enfin React-Native (npm à été installé en même temps que Node) :

Pour créer votre projet React-Native, il faut taper :

et là, cela cogite, télécharge et… plante magistralement avec le message :

« xcrun: error: unable to find utility « instruments », not a developer
tool or in PATH »

WTF ???

Pas de panique, en fait, c’est un problème d’Xcode et des « Command Line Tools ».

Pour régler cela, il faut ouvrir Xcode, puis, dans les préférences, paramétrer la version des Command Line Tools :

Ensuite, après un petit « react-native run-ios« , vous devriez avoir l’immense satisfaction d’obtenir ceci :

Ouf !

Mais le but d’être cross-platform, c’est aussi de pouvoir coder pour Android !

Alors, on continue.

Il faut d’abord installer Android Studio

Puis configurer correctement le path en créant un fichier .bash_profile. Pour cela, toujours dans un terminal, entrer la commande « nano ~/.bash_profile »

Cela ouvre un éditeur de textes. Entrez les lignes suivantes :

# Android SDK
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools

puis cmd + x, yes, enter.

Ensuite, il faut installer le JDK (Java Developer Kit) : à télécharger ici et suivez les instructions d’installation.

Puis on continue avec la configuration d’Android Studio…

Installation des Google Play Services : lancer Android Studio, puis aller dans configure -> SDK Manager. Cochez « Google Play Services » et cliquez sur « Apply » :

Dans l’onglet « SDK Platforms », installez au minimum l’API 23 (Android 6).

Si ce n’est déjà fait, allez maintenant dans de gestionnaire de machines virtuelles d’Android Studio (AVD mananger), et suivez les instruction pour en créer une sous Android 6.

Lancez là !

Et on peut enfin taper la commande magique « react-native. run-android » (depuis le répertoire de votre projet React bien sûr.

Après un peut de temps (dépend de la machine et de la vitesse de la connexion Internet), vous devriez obtenir ceci :

Et là, c’est tout bon !

Je vous conseille juste d’installer l’IDE Visual Studio Code et d’y inclure le plugin React :

et de modifier le fichier launch.json pour pouvoir debugger dans Visual Studio Code :

Cette fois, c’est fini !

Dans un prochain billet, je vous ferait part de mes débuts avec React-Native. En attendant, n’hésiter pas à commenter si vous avez des question / suggestions !