React Native est un framework d’applications mobiles open source créé par Facebook. Vous pouvez l’utiliser pour développer des applications pour les appareils Android et iOS avec une seule base de code. Facebook Instagram et Facebook, et dans cet article, je vais vous montrer comment créer votre première application native React pour Android.

Exemple de code natif React

Le code natif React pour un écran d’application mobile typique ressemble à ceci:

import * as React from 'react';import {Text, View, Stylesheet} from 'react-native';const ExampleScreen = (props) { return ( <View style = {styles.containerStyling}> <Text style = {styles.textStyling}> Hello world!</Text> </View> );}const styles = Stylesheet.create({ containerStyling:{ background: '#0000FF' }, textStyling :{ marginBottom :20, color:'#FFF' }});export default ExampleScreen

Si vous regardez de près, vous verrez que React Native utilise une combinaison de JavaScript, de balisage de type HTML et de CSS. Cet extrait de code définit un écran avec un affichage de texte et un style.

Environnements de développement natifs React : Expo vs React Native CLI

Il existe deux façons de créer une application native React :

1. Expo CLI
2. React Native CLI

Je parlerai des avantages et des inconvénients de chacune ci-dessous.

Expo CLI

Expo est un framework open source et une plate-forme pour les applications React universelles qui donne un flux de travail de développement d’applications géré. Il s’agit d’un ensemble d’outils et de services construits autour de plates-formes natives et natives React qui aident à développer, créer, déployer et itérer rapidement sur iOS, Android et des applications Web à partir de la même base de code JavaScript ou TypeScript.

Expo élimine toutes les complexités associées à la création d’applications natives React. Certaines des caractéristiques de l’Expo CLI incluent:

• API universelles qui donnent accès à des fonctionnalités telles que la caméra, les cartes, les notifications, les capteurs, les haptiques et bien plus encore.
• Un service de génération basé sur le cloud qui vous fournit des binaires prêts pour l’app Store et gère les certificats.
• Mises à jour en direct qui vous permettent de mettre à jour votre application à tout moment sans les tracas et les délais de soumission au magasin.

CLI native React

La CLI native React est un environnement de développement plus basique et plus simple. La bonne chose est qu’il permet de créer des binaires d’applications sur votre propre machine, sans compter sur un service cloud. D’un autre côté, la configuration est beaucoup plus compliquée — pour créer des applications pour Android, vous devrez installer Android Studio et configurer de nombreuses fonctionnalités avant de commencer. Ce processus peut être un peu complexe, mais l’environnement CLI natif de React est plus adapté aux développeurs d’applications professionnels.

Pour ce tutoriel, nous utiliserons Expo car c’est le moyen le plus simple de commencer à créer des applications natives React.

Comment fonctionne Expo

Pour utiliser Expo, vous devez d’abord installer l’application Client Expo, disponible sur le Play Store (une version est également disponible sur l’App Store iOS). L’application Client Expo vous permettra d’exécuter l’application à des fins de test en temps réel.

Vous pouvez coder votre application native React sur votre propre ordinateur avec votre éditeur de texte de programmation préféré, puis utiliser l’interface de ligne de commande Expo pour tester ou publier votre application. En coulisses, Expo empaquettera votre code natif React et le mettra à disposition de l’application client Expo sur votre appareil. Vous pouvez également utiliser l’interface de ligne de commande Expo pour publier votre application et la mettre à la disposition de toute personne disposant du Client Expo, ou pour créer une version autonome de votre application qui peut être téléchargée sur l’app Store et exécutée sans installer le Client Expo.

Création d’une application Avec Expo

Dans ce tutoriel, nous utiliserons l’interface de ligne de commande Expo pour créer notre application.

Prérequis

Pour créer une application native React avec Expo, vous devez respecter les conditions suivantes :

• Node.js version 12 LTS ou supérieure et Git sur votre ordinateur
• un appareil Android avec Lollipop (Android 5) ou supérieure
• l’application client Expo installée sur votre appareil Android (téléchargez le client Expo pour Android depuis le Play Store)
• une compréhension de base de ReactJS ou JavaScript

Notez également que votre ordinateur de développement et votre téléphone doivent être connectés au même réseau sans fil.

Nœud de téléchargement.js

Visite le nœud.site Web js et téléchargez la dernière version de Node. Node est disponible pour les systèmes d’exploitation Windows, macOS et Linux. Il vous suffit de choisir votre système d’exploitation et de l’installer selon les instructions disponibles sur le site.

Pour vérifier si le nœud.js est installé, ouvrez une fenêtre de terminal et tapez :

node -v

Cette commande affichera la version du nœud installé.

Installer le client Expo

Après avoir installé Node, vous devrez également installer le client Expo CLI. Exécutez simplement la commande suivante :

 npm install expo-cli --global

Pour les utilisateurs de macOS et Linux, assurez-vous d’utiliser sudo.

sudo npm install expo-cli --global

Ignorez les avertissements ou les erreurs qui se produisent lors de l’installation de l’interface de ligne de commande Expo. Après une installation réussie, vous devriez voir le message ci-dessous.

Créez une application de liste de tâches Avec React Native

Nous allons créer une application de liste de tâches simple qui vous permet d’entrer une liste des tâches à accomplir et de les afficher à l’écran.

Créer un nouveau projet Avec Expo

Pour commencer, exécutez la commande Expo CLI suivante pour créer un nouveau projet:

expo init tasklist

tasklist est le nom du projet. Vous serez invité à choisir un modèle pour votre projet. Pour l’instant, choisissez le modèle vierge, ce qui vous donne des dépendances minimales.

La commande expo init crée un dossier de projet et installe toutes les dépendances requises par l’application native React.

expo init tasklist-app? Choose a template: expo-template-blank📦 Using npm to install packages. You can pass --yarn to use Yarn instead.✔ Downloaded and extracted project files.✔ Installed JavaScript dependencies.✅ Your project is ready!To run your project, navigate to the directory and run one of the following npm commands.- cd tasklist-app- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.- npm run android- npm run ios # requires an iOS device or macOS for access to an iOS simulator- npm run web

Accédez au dossier du projet et exécutez la commande suivante:

cd tasklist-appnpm start

npm start démarrera le Expo dev tools et ouvrez un nouvel onglet dans votre navigateur qui ressemble à ceci:

Cette fenêtre vous permet d’exécuter votre application sur un simulateur ou un appareil connecté.

Connectez un appareil

Maintenant, ouvrez l’application client Expo sur votre appareil Android physique et sélectionnez l’option Scanner le code QR, comme indiqué ci-dessous.

Ensuite, revenez à la fenêtre de développement de l’Expo, scannez le code à barres et attendez la fin du processus de génération du bundle JavaScript. Cela prend généralement quelques minutes. Une fois le processus terminé, l’application devrait être en cours d’exécution sur votre téléphone!

Structure du projet

Maintenant que votre environnement de développement est prêt, vous pouvez modifier le code du projet à l’aide de votre éditeur de code préféré. Le dossier du projet ressemble à ceci:

• assets: contient les images de l’application
• node_modules: contient toutes les dépendances de l’application du projet
• .js: contient le code qui rend l’interface utilisateur et est un fichier essentiel

App.js est ouvert dans la capture d’écran ci-dessus. Regardons de plus près. Tout d’abord, nous importons React à partir de react. Nous importons ensuite les composants Text et View à partir de react-native. Nous importons également Stylesheet, ce qui aide au style.

React Native est livré avec des composants intégrés tels que <Text> et <View> par opposition aux composants HTML standard, tels que <div> et <p>. Le composant <View> est le composant le plus fondamental de React Native et est utilisé pour regrouper d’autres composants enfants – comme <div> en HTML. Le composant <Text> est utilisé pour afficher le contenu textuel sur l’écran — comme <p> en HTML.

Dans la version standard de l’application.js créé par Expo, il y a une vue simple avec un composant texte et une barre d’état. Cette vue est renvoyée par la fonction App(). La constante styles contient des CSS de base pour styliser la vue.

Ensuite, ajoutons de nouveaux composants et styles à l’application!

Créez l’interface utilisateur de l’application

Ouvrez l’application.fichier js et entrez le code suivant.

import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} /> <Button title = "+"/> </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center', bottom:20 },});

Le code ci-dessus ajoute une simple saisie de texte et un bouton pour ajouter de nouvelles tâches. Nous utilisons le style CSS flexbox pour positionner les composants les uns à côté des autres.

Ajout de la gestion des événements

Pour obtenir l’entrée utilisateur, nous importons d’abord la fonction useState() de react et l’utilisons pour mettre à jour l’état de la newTask() et setnewTask() fonctions. Puisque l’utilisateur n’a encore rien tapé, l’état initial sera vide. Ajoutez le code suivant en haut de la fonction App(), juste au-dessus de return:

const = useState('');

Nous définissons ensuite le taskInputHandler, qui écoute le changement dans l’entrée et met à jour le contenu de la fonction setNewTask(). Ajoutez ces lignes à la fonction App() suivante :

 const taskInputHandler = (enteredText) => { setNewTask(enteredText); };

Maintenant, nous enregistrons ce gestionnaire d’entrée avec le composant TextInput. Mettez à jour votre composant TextInput pour qu’il ressemble à ce qui suit.

 <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} />

Maintenant, nous devons gérer les pressions sur les boutons. Lorsque l’utilisateur appuie sur le bouton +, nous voulons ajouter la nouvelle tâche à une liste.

Tout d’abord, nous définirons notre état pour la liste des tâches :

 const = useState();

Ensuite, nous définirons une fonction addTaskHandler pour ajouter la nouvelle tâche (trouvée dans l’état newTask) à la liste.

 const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); };

Et enregistrez ce gestionnaire d’événements avec le composant <Button>:

 <Button title = "+" onPress = {addTaskHandler} />

Enfin, nous ajouterons une nouvelle vue pour afficher toutes les tâches de la liste que nous avons créée. Cela va juste après la vue du conteneur d’entrée, mais toujours à l’intérieur de la vue du conteneur principal.

 <View> {appTasks.map((task) => <Text>{task}</Text>)} </View>

Code source complet pour l’application.js

Le code complet de l’application.js est montré ci-dessous. Comparez-le à ce que vous avez.

 import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { const = useState(''); const = useState(); const taskInputHandler = (enteredText) => { setnewTask(enteredText); }; const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); }; return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} /> <Button title = "+" onPress = {addTaskHandler} /> </View> <View> {appTasks.map((task) => <Text>{task}</Text>)} </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center, bottom:20 },});

Conclusion

Dans ce tutoriel, vous avez appris à créer une application native React avec Expo.

React Native est un excellent framework et une plate-forme populaire pour les développeurs et les entreprises. Les applications créées avec React Native sont garanties pour fonctionner sans problème sur n’importe quelle plate-forme ou système. React Native économise également le travail de développement en vous permettant de coder votre application une fois et de l’exécuter sur n’importe quelle plate-forme mobile.

Modèles d’applications mobiles Premium De CodeCanyon

CodeCanyon est un marché en ligne qui propose des centaines de modèles d’applications mobiles — pour Android, iOS, React Native et Ionic. Vous pouvez économiser des jours, voire des mois, d’efforts en utilisant l’un d’eux.

Que vous commenciez à utiliser React Native ou que vous soyez un développeur chevronné, un modèle d’application React Native est un excellent moyen de gagner du temps et des efforts sur votre prochain projet d’application.

Si vous avez du mal à décider quel modèle sur CodeCanyon vous convient, ces articles devraient vous aider:

• 
  Mobile App
  21+ Best React Native App Templates of 2021 (Including 5 Free)
  Franc Lucas
• 
  Ionic
  15 Stunning Ionic App Templates and Ionic Themes
  Franc Lucas
• 
  React
  9 React Native App Templates for You to Study and Use
  Franc Lucas