React Native vous permet de créer des applications mobiles natives à l'aide de JavaScript et de React, la bibliothèque d'interface utilisateur créée par Facebook. Il facilite l'écriture de code pour les appareils Android et iOS, sans avoir à maîtriser à la fois Java (Android) et C++/Objective C (iOS).
Voici tout ce que vous devez savoir pour être opérationnel avec React Native.
Si vous connaissez déjà React, vous n'avez pas besoin de grand-chose pour démarrer avec React Native. Vous aurez besoin d'une connexion Internet et vous devez pouvoir vous connecter à votre ordinateur via le réseau. Vous pouvez également lire nos guides sur les bases de la ligne de commande Linux ou la ligne de commande Windows pour débutant.
L'installation de React Native ne pourrait pas être plus simple, mais vous devrez installer Node.js d'abord.
Nous avons discuté de ce qu'est Node.js en 2013, mais en bref, il vous permet d'écrire des applications de bureau et de serveur "appropriées" en utilisant JavaScript.
Rendez-vous sur la page de téléchargement de Node.js et choisissez le programme d'installation Windows ou macOS. Des versions Linux sont également disponibles, mais vous devrez faire un peu plus de travail pour les installer.
Une fois téléchargé, exécutez le programme d'installation, acceptez le contrat de licence et installez. Non seulement vous obtenez Node.js, mais vous obtenez également npm, qui est un gestionnaire de packages JavaScript. Avec cela, vous pouvez installer d'autres packages --- comme React Native !
Le moyen le plus simple de commencer à utiliser React Native est avec create-react-native-app programme en ligne de commande. Ouvrez un nouveau terminal ou une nouvelle console et utilisez npm pour l'installer :
npm install -g create-react-native-app 
Si vous rencontrez un problème lors de l'installation de create-react-native-app, vous devrez peut-être corriger les autorisations npm.
Une fois installé, vous êtes prêt à commencer à créer votre application.
Maintenant que vous avez installé create-react-native-app, vous pouvez créer votre première application. Créez un nouveau dossier pour stocker votre projet et accédez-y dans la ligne de commande.
Utilisez l'application create-react-native-app utilitaire pour créer votre application. Cette commande créera une application appelée FirstAndroidApp :
create-react-native-app FirstAndroidApp 
React Native a créé un nouveau dossier pour vous, basé sur le nom de votre projet (FirstAndroidApp). Accédez à ce dossier, puis exécutez :
npm start 
Cela démarrera votre serveur de développement.
Vous verrez de nombreuses options pour redémarrer le serveur, ainsi qu'un code QR et l'adresse IP du serveur. Vous êtes prêt à courir sur votre téléphone maintenant.
Pour tester votre application sur votre appareil Android, vous devez installer une application appelée Expo. Cela se connectera à votre ordinateur et chargera votre application. Toutes les modifications que vous apportez rechargeront l'application. Cela fonctionne très bien et c'est un excellent moyen de développer votre application.
Une fois que vous avez installé Expo, assurez-vous que votre téléphone est sur le même réseau que votre ordinateur. Cela ne fonctionnera pas sur un autre réseau ou derrière un pare-feu.
Développer Ouvrez l'application Expo et choisissez Scanner le code QR . Dirigez l'appareil photo de votre téléphone vers le code QR dans votre ligne de commande et après quelques secondes, votre application apparaîtra sur votre téléphone. De retour sur votre ligne de commande, vous verrez plusieurs nouveaux statuts. Ceux-ci vous indiquent que l'application est terminée et qu'elle est en cours d'exécution sur votre appareil.
Commençons à écrire du code !
Dans votre FirstAndroidApp dossier, React Native a créé plusieurs fichiers. Il y a un node_modules dossier, qui stocke les packages Node que vous pouvez installer pour compléter votre application. Ouvrez App.js dans votre éditeur de texte préféré.
Ce fichier contient 24 lignes de code. Il existe plusieurs importations, une classe appelée App , et une feuille de style :
importer React depuis 'react' ;
import { StyleSheet, Text, View } de 'react-native' ;
exporter la classe par défaut App étend React.Component {
rendu() {
retourner (