Commencez votre projet React Native Expo en utilisant un modèle préconçu

9 min

introduction dans cette section, vous apprendrez comment commencer avec react native en utilisant un expo modèle et comment le connecter à back4app en 4 étapes faciles prérequis pour compléter ce tutoriel, vous aurez besoin de une application backend back4app remarque suivez le https //www back4app com/docs/get started/new parse app pour apprendre à créer une application parse sur back4app https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm ou https //classic yarnpkg com/en/docs/install installé sur votre système expo cli installé en suivant https //docs expo io/get started/installation/?redirected 1 obtenez le modèle pour obtenir le projet modèle, téléchargez et décompressez le code source de notre https //github com/templates back4app/react native template sur votre machine ou clonez le projet avec la ligne de commande git exécutez la commande suivante pour télécharger et extraire le modèle en utilisant curl curl lok https //github com/templates back4app/react native template/archive/master zip && unzip master zip ou exécutez la commande suivante pour cloner le modèle en utilisant git git clone https //github com/templates back4app/react native template 2 téléchargez les dépendances de l'application assurez vous d'avoir installé npm npm ou yarn yarn sur votre système consultez les https //docs npmjs com/getting started ou https //classic yarnpkg com/en/docs/install#windows stable pour plus d'infos 2\ dans votre terminal, exécutez cd react native template master cd react native template master et ouvrez le répertoire racine du projet 3\ exécutez npm install npm install pour installer les dépendances dans ce tutoriel, nous utilisons npm pour gérer les dépendances, mais vous êtes libre d'utiliser yarn à la place 3 configurez les identifiants de l'application pour permettre à l'application de se connecter en toute sécurité aux serveurs back4app, vous devez fournir au sdk javascript parse les identifiants de l'application localisez votre id d'application id d'application et clé javascript clé javascript en naviguant vers votre application tableau de bord tableau de bord > paramètres de l'application paramètres de l'application > sécurité et clés sécurité et clés dans le répertoire racine du projet, ouvrez le fichier à app/(tabs)/index tsx app/(tabs)/index tsx le fichier devrait ressembler à ceci index tsx parse initialize( 'your application id here', // replace with your parse application id 'your javascript key here' // replace with your parse javascript key ); parse serverurl = 'https //parseapi back4app com/'; copiez et collez votre id d'application id d'application et clé javascript clé javascript dedans 4 testez votre connexion à l'intérieur de app js app js de votre projet modèle, il y a une fonction qui crée un objet person et une autre pour récupérer les personnes de votre application vers votre base de données back4app index tsx // function to create a new person async function createperson() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const personobject = new personobject(); personobject set("name", "back4app user"); const result = await personobject save(); setresult(`object created with id ${result id}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } async function fetchpeople() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const query = new parse query(personobject); const results = await query find(); const names = results map(result => ({ objectid result id, name result get("name"), })); setresult(`fetched names ${json stringify(names, null, 2)}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } pour exécuter et tester la connexion de votre application ouvrez le terminal de votre projet exécutez npm run android npm run android ou npm run ios npm run ios ou npm run start npm run start pour ouvrir l'application sur votre plateforme cible c'est fait ! à ce stade, vous avez appris comment démarrer et exécuter une application react native connectée à back4app