Premiers pas avec react-native

Configuration pour Mac

Installation du gestionnaire de paquets Homebrew brew

Collez-le à une invite de terminal.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Installation de l’IDE Xcode

Téléchargez-le en utilisant le lien ci-dessous ou trouvez-le sur Mac App Store

https://developer.apple.com/download/

REMARQUE : Si Xcode-beta.app est installé avec la version de production de Xcode.app, assurez-vous d’utiliser la version de production de l’outil xcodebuild. Vous pouvez le paramétrer avec :

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/

Installation de l’environnement Android

  • Allez ** allez **

*Si vous avez installé XCode, Git est déjà installé, sinon exécutez ce qui suit

   brew install git

  • [Dernier JDK][1]

  • [Studio Android] [2]

    Choose a Custom installation

    [![Choose a Custom installation][3]][3]

    Choose both Performance and Android Virtual Device

    [![Choose both Performance and Android Virtual Device][4]][4]

    After installation, choose Configure -> SDK Manager from the Android Studio welcome window.

    [![choose Configure -> SDK Manager][5]][5]

    In the SDK Platforms window, choose Show Package Details and under Android 6.0 (Marshmallow), make sure that Google APIs, Intel x86 Atom System Image, Intel x86 Atom_64 System Image, and Google APIs Intel x86 Atom_64 System Image are checked.

    [![SDK Platforms window][6]][6]

    In the SDK Tools window, choose Show Package Details and under Android SDK Build Tools, make sure that Android SDK Build-Tools 23.0.1 is selected.

    [![SDK Tools window][7]][7]

  • Variable d’environnement ANDROID_HOME

    Ensure the ANDROID_HOME environment variable points to your existing Android SDK. To do that, add this to your ~/.bashrc, ~/.bash_profile (or whatever your shell uses) and re-open your terminal:

    If you installed the SDK without Android Studio, then it may be something like: /usr/local/opt/android-sdk

    export ANDROID_HOME=~/Library/Android/sdk

Dépendances pour Mac

Vous aurez besoin de Xcode pour iOS et Android Studio pour Android, node.js, les outils de ligne de commande React Native et Watchman.

Nous vous recommandons d’installer node et watchman via Homebrew.

brew install node
brew install watchman

Watchman est un outil de Facebook pour surveiller les changements dans le système de fichiers. Il est fortement recommandé de l’installer pour de meilleures performances. C’est facultatif.

Node est livré avec npm, qui vous permet d’installer l’interface de ligne de commande React Native.

npm install -g react-native-cli

Si vous obtenez une erreur d’autorisation, essayez avec sudo :

sudo npm install -g react-native-cli.

Pour iOS, le moyen le plus simple d’installer Xcode est via le Mac App Store. Et pour Android, téléchargez et installez Android Studio.

Si vous envisagez d’apporter des modifications au code Java, nous vous recommandons Gradle Daemon qui accélère la construction.

Test de votre installation React Native

Utilisez les outils de ligne de commande React Native pour générer un nouveau projet React Native appelé “AwesomeProject”, puis exécutez les run-ios réactifs dans le dossier nouvellement créé.

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

Vous devriez bientôt voir votre nouvelle application s’exécuter dans le simulateur iOS. react-native run-ios n’est qu’un moyen d’exécuter votre application - vous pouvez également l’exécuter directement depuis Xcode ou Nuclide.

Modification de votre application

Maintenant que vous avez exécuté l’application avec succès, modifions-la.

  • Ouvrez index.ios.js ou index.android.js dans l’éditeur de texte de votre choix et modifiez quelques lignes.
  • Appuyez sur Command⌘ + R dans votre simulateur iOS pour recharger l’application et voir votre monnaie! C’est ça!

Toutes nos félicitations! Vous avez exécuté et modifié avec succès votre première application React Native.

source : [Getting Started - React-Native][8]

[1] : http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html [2] : http://developer.android.com/sdk/index.html [3] : http://i.stack.imgur.com/WklQv.png [4] : http://i.stack.imgur.com/UiNxG.png [5] : http://i.stack.imgur.com/JYSu6.png [6] : http://i.stack.imgur.com/wBiuq.png [7] : http://i.stack.imgur.com/9ZsjC.png [8] : http://facebook.github.io/react-native/docs/getting-started.html

Configuration pour Linux (Ubuntu)

1) Configurer Node.JS

Démarrez le terminal et exécutez les commandes suivantes pour installer nodeJS : 

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

Si la commande de nœud n’est pas disponible 

sudo ln -s /usr/bin/nodejs /usr/bin/node

Installations alternatives de NodeJS : 

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

ou

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

vérifiez si vous avez la version actuelle 

node -v

Exécutez le npm pour installer le réactif natif 

sudo npm install -g react-native-cli

2) Configurer Java

sudo apt-get install lib32stdc++6 lib32z1 openjdk-7-jdk

3) Configurer Android Studio :

SDK Android ou Android Studio 

http://developer.android.com/sdk/index.html

Android SDK et ENV 

export ANDROID_HOME=/YOUR/LOCAL/ANDROID/SDK
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

4) Émulateur de configuration :

Sur le terminal lancez la commande

android

Sélectionnez “Plates-formes SDK” dans le gestionnaire de SDK et vous devriez voir une coche bleue à côté de “Android 7.0 (Nougat)”. Si ce n’est pas le cas, cliquez sur la case à cocher puis sur “Appliquer”.

[![entrez la description de l’image ici][1]][1]

[1] : https://i.stack.imgur.com/ZrSya.png

5) Démarrer un projet

Exemple d’initialisation d’application 

react-native init ReactNativeDemo && cd ReactNativeDemo

Obs : Vérifiez toujours si la version sur android/app/build.gradle est la même que celle des outils de compilation téléchargés sur votre SDK Android 

android {
    compileSdkVersion XX
    buildToolsVersion "XX.X.X"
...

6) Exécuter le projet

Ouvrez Android AVD pour configurer un androïde virtuel. Exécutez la ligne de commande : 

android avd

Suivez les instructions pour créer un périphérique virtuel et le démarrer

Ouvrez un autre terminal et exécutez les lignes de commande :

react-native run-android
react-native start

Configuration pour Windows

Remarque : Vous ne pouvez pas développer d’applications réactives natives pour iOS sur Windows, uniquement des applications Android réactives natives.

Les documents de configuration officiels pour react-native sur Windows peuvent être [trouvé ici][1]. Si vous avez besoin de plus de détails, il y a un [guide granulaire ici][2].

Outils/Environnement

  • Windows 10
  • outil de ligne de commande (par exemple Powershell ou ligne de commande Windows)
  • [Chocolatey][3] ([étapes de configuration via PowerShell][4])
  • Le JDK (version 8)
  • AndroidStudio
  • Une machine Intel avec la technologie de virtualisation activée pour HAXM (facultatif, uniquement nécessaire si vous souhaitez utiliser un émulateur)

1) Configurez votre machine pour réagir au développement natif

Démarrez la ligne de commande en tant qu’administrateur et exécutez les commandes suivantes :

choco install nodejs.install
choco install python2

Redémarrez la ligne de commande en tant qu’administrateur pour pouvoir exécuter npm

npm install -g react-native-cli

Après avoir exécuté la dernière commande, copiez le répertoire dans lequel react-native a été installé. Vous en aurez besoin pour l’étape 4. J’ai essayé ceci sur deux ordinateurs dans un cas, c’était : C:\Program Files (x86)\Nodist\v- x64\6.2.2. Dans l’autre, c’était : C:\Users\admin\AppData\Roaming\npm

2) Définissez vos variables d’environnement

[Un guide étape par étape avec des images peut être trouvé ici pour cette section.] [2]

Ouvrez la fenêtre Variables d’environnement en accédant à :

[Clic droit] Menu “Démarrer” -> Système -> Paramètres système avancés -> Variables d’environnement

Dans la section inférieure, recherchez la variable système “Path” et ajoutez l’emplacement où react-native a été installé à l’étape 1.

Si vous n’avez pas ajouté de variable d’environnement ANDROID_HOME, vous devrez également le faire ici. Toujours dans la fenêtre “Variables d’environnement”, ajoutez une nouvelle variable système avec le nom “ANDROID_HOME” et la valeur comme chemin vers votre SDK Android.

Redémarrez ensuite la ligne de commande en tant qu’administrateur afin de pouvoir y exécuter des commandes réactives natives.

3) Créez votre projet En ligne de commande, accédez au dossier dans lequel vous souhaitez placer votre projet et exécutez la commande suivante :

react-native init ProjectName

4) Exécutez votre projet Démarrer un émulateur depuis Android Studio Accédez au répertoire racine de votre projet en ligne de commande et exécutez-le :

cd ProjectName
react-native run-android

Vous pouvez rencontrer des problèmes de dépendance. Par exemple, il peut y avoir une erreur indiquant que vous ne disposez pas de la bonne version des outils de génération. Pour résoudre ce problème, vous devrez ouvrir [le gestionnaire de sdk dans Android Studio] [5] et télécharger les outils de construction à partir de là.

Félicitations!

Pour actualiser l’interface utilisateur, vous pouvez appuyer deux fois sur la touche “r” lorsque vous êtes dans l’émulateur et que vous exécutez l’application. Pour voir les options de développement, vous pouvez appuyer sur ctrl + m.

[1] : https://facebook.github.io/react-native/docs/getting-started.html#dependencies-for-windows-android [2] : http://bitvbit.blogspot.com/2016/07/react-native-android-apps-on-windows.html [3] : https://chocolatey.org/ [4] : http://bitvbit.blogspot.com/2016/07/react-native-android-apps-on-windows.html#setup-choco [5] : https://developer.android.com/studio/intro/update.html#sdk-manager

Android – Bouton de retour matériel →