Comment installer et créer votre première application native React (QuickStart)

Comment installer et créer votre première application native React (QuickStart)

React est une bibliothèque JavaScript multiplateforme maintenue par Facebook. Il est utilisé pour créer des interfaces utilisateur. À l'aide du natif React, vous pouvez facilement créer les applications mobiles. React natif fournit un rechargement chaud de votre application. Afin que vous puissiez créer votre application plus rapidement. Au lieu de recompilorer, vous pouvez recharger votre application instantanément avec sa fonction de rechargement chaud. En utilisant le natif React, vous pouvez combiner plusieurs composants écrits dans Objective-C, Java ou Swift les uns avec les autres. Vous pouvez également utiliser React Native pour créer une partie de l'application et une partie de votre application en utilisant directement le code natif.

Utilisez ce guide de démarrage rapide pour commencer à développer votre application mobile avec React Native.

Étape 1 - Installez le nœud.js

React natif obligatoire Node.js à installer sur votre système. Pour démarrer le développement avec une nouvelle application, nous vous recommandons d'utiliser le dernier nœud.Version JS. Si vous n'avez pas de nœud.JS installé, utilisez l'un des liens ci-dessous pour installer le dernier nœud.js sur votre système.

  • Installer le nœud.JS / NPM sur Ubuntu, Linuxmint
  • Installer le nœud.JS / NPM sur Fedora, Centos
  • Installer le nœud.JS / NPM sur Debian

Étape 2 - Créez l'application Native React

J'utilise le module NPM de création-réact-Native-App pour la création de la nouvelle application Native React pour le développement QuickStart. Installons d'abord le package NPM de création de création-réaction-application en utilisant la commande ci-dessous.

NPM Install -g Create-Rad-Native-App 

Ensuite, exécutez les commandes suivantes pour créer un nouveau projet React Native appelé «MyApp»:

CD / OPT Create-React-Native-App MyApp 

Les commandes ci-dessus créeront un répertoire MyApp et généreront des fichiers requis pour le développement de démarrage. Allons à l'étape ci-dessous pour démarrer le serveur de développement avec la nouvelle application.

Étape 3 - Démarrez l'application native React

Les commandes suivantes démarreront un serveur de développement pour vous et imprimeront un code QR dans votre terminal. Utilisez ce code QB avec votre application Expo pour accéder à ce répertoire d'application. Assurez-vous que le système d'application et l'appareil mobile sont sur le même réseau.

cd myapp npm start 

Étape 4 - Ouvrez l'application sur l'appareil mobile

Pour accéder à l'application React pendant le développement, j'utilise l'application Android Expo sur mon appareil Android, vous pouvez installer cette application sur Google Play.

Après l'installation, démarrez l'application Expo et scannez le code-barres ci-dessus dans votre fenêtre Terminal. Dès que vous scannez le code-barres, vous verrez le message JavaScript de construction apparaître sur votre terminal. Le même message apparaîtra au bas de votre application Expo sur votre appareil mobile.

Une fois la construction terminée, la page par défaut s'affiche sur votre écran mobile. Il se manifeste comme suivant mon appareil.

À des fins de test, j'ai ouvert un nouveau terminal et accédé au répertoire MyApp. Maintenant suivi les instructions affichées sur la page par défaut et l'application édité.js. Modifiez le texte avec mon propre exemple de texte.

L'application de classe par défaut d'exportation étend React.Composant render () return (bonjour react! Técadmin.filet );
12345678910L'application de classe par défaut d'exportation étend React.Composant render () return ( Bonjour réagir! Técadmin.filet ));

Au fur et à mesure que j'enregistre le fichier, réagissez automatiquement la page et les mises à jour des émissions sur mon appareil mobile. Il s'agit également de la meilleure caractéristique de React to Build Application automatiquement sur les modifications détectées. Mon écran mis à jour montre comme ci-dessous.