Comment installer React Native sur Mac…

react-native

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, 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 :

brewInstall

Puis de Node :

brewInstallNode

Et de Watchman :

brewInstallWatchman

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

npmInstallReact

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

InitReactProject

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 :

Xcode Command Line Tools

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

Run-ios

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 » :

ConfigureGooglePlayServices

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 :

Run-Android

Et là, c’est tout bon !

 

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

pluginVisualStudioCodeReact

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

debugReactVisualStudio

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 !

Une réflexion sur “Comment installer React Native sur Mac…

  1. Pingback: React Native : je continue mes essais ! | Pour quelques lignes de plus...

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s