Anthony Cecchetto

Développeur, Graphiste, Webdesigner, Intégrateur, Freelance

Installation de React-Native sur Windows

 Admin Non classé 26.06.2017 à 12:05
Large creating universal windows apps with react native opt

Nous allons voir comment créer rapidement et simplement une application avec React-Native sous Windows. Mais tout d'abord petite introduction à React Native !

 

Qu'est ce que c'est "React Native" ?

C'est tout simplement un framework mobile développé initialement par Facebook et pour Facebook. Il est devenu par la suite open source, et du coup, aujourd'hui, il est développé par une communauté de développeur et de plus en plus de sociétés high-tech l'utilisent (Netflix et Airbnb pour ne citer que celles-ci).

C'est un framework très jeune puisqu'il a été annoncé en 2015 et la documentation est pour le moment uniquement disponible en anglais, d'où l'utilité de cette petite introduction à l'utilisation de ce framework.

J'essaierai au cours de mon periple de créer d'autre "tutoriaux" sur ce Framework puisque j'ai commencé à l'utiliser pour une application sociale il y a 1 mois environ.

 

Comment l'installer ?

Pour ce faire, nous allons utiliser le gestionnaire de paquet Chocolatey. Pour l'installer il vous suffit de coller cette ligne dans le terminal Windows (cmd.exe) :

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

Une fois Chocolatey d'installé, nous pouvons installer Node.js facilement avec cette commande :

chocolatey install nodejs

Si la commande a bien été effectuée, vous devriez avoir Node.js et NPM d'installé. Pour le vérifier (si ça ne fonctionne pas, pas de panique ! fermez le terminal et ré-ouvrer-le) :

node -v
npm -v

Personnellement les deux commandes me sortent v.8.1.2 pour Node et 5.0.3 pour NPM.

Maintenant, passons aux choses sérieuses et installons React-Native simplement avec cette commande :

npm install -g react-native-cli

Ici aussi vous pouvez tester si l'installation c'est bien passée en faisant react-native -v dans votre terminal.

Cette fois c'est bon ! on va créer notre premier projet en faisant simplement : 

react-native init MaSuperApp

Ici, "MaSuperApp" est le nom que vous souhaitez donner à votre application.

 

Cette dernière ligne de commande peut prendre un peu de temps car :

  • Elle installe React.js (car React Native a été conçu à partir des composants de React.js. Du coup ce dernier est nécessaire au bon fonctionnement de votre application)
  • Elle installe Jest, un autre outil de Facebook qui vous permet de réaliser des tests unitaires facilement.

Une fois l'installation terminée et la création de votre première application faite, vous allez avoir un message comme ci-dessous :

To run your app on iOS:
   cd C:\Users\ac.FV\Desktop\MaSuperApp
   react-native run-ios
   - or -
   Open ios\MaSuperApp.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd C:\Users\ac.FV\Desktop\MaSuperApp
   Have an Android emulator running (quickest way to get started), or a device c
onnected
   react-native run-android

 

Mise en place d'Android

Notre application est prête ! Il ne nous reste plus qu'à installer Android-Studio et le SDK Java pour commencer à développer !

  • Pour télécharger le SDK Java suivez ce lien.
  • Pour télécharger Android-Studio suivez ce lien.

Une fois les deux fichiers téléchargés et installés on peut passer à la configuration.

Pour publier des applications sur le Google Play, la plateforme de Google pour Android, vous allez devoir avoir un compte développeurqui est payant et coût 25€ de "frais d'inscription".

...