Comienza tu proyecto de React Native Expo utilizando una plantilla preconstruida

9 min

introducción en esta sección, aprenderás cómo comenzar con react native utilizando una expo plantilla y cómo conectarla a back4app en 4 pasos fáciles requisitos previos para completar este tutorial, necesitarás una aplicación de backend de back4app nota sigue el tutorial de nueva aplicación parse para aprender cómo crear una aplicación parse en back4app npm o yarn instalado en tu sistema expo cli instalado siguiendo esta guía 1 obtener la plantilla para obtener el proyecto de plantilla, descarga y descomprime el código fuente en nuestro repositorio de github en tu máquina o clona el proyecto con la línea de comandos de git ejecuta el siguiente comando para descargar y extraer la plantilla usando curl o ejecuta el siguiente comando para clonar la plantilla usando git 2 descarga las dependencias de la aplicación asegúrate de que has instalado npm npm o yarn yarn en tu sistema mira las guías para obtener npm o guías para obtener yarn para más información 2\ en tu terminal, ejecuta cd react native template master cd react native template master y abre el directorio raíz del proyecto 3\ ejecuta npm install npm install para instalar las dependencias en este tutorial, estamos usando npm para gestionar las dependencias, pero eres libre de usar yarn en su lugar 3 configura las credenciales de la aplicación para permitir que la aplicación se conecte de forma segura a los servidores de back4app, debes proporcionar al sdk de javascript de parse las credenciales de la aplicación localiza tu id de la aplicación id de la aplicación y clave de javascript clave de javascript navegando a tu tablero tablero > configuración de la aplicación configuración de la aplicación > seguridad y claves seguridad y claves en el directorio raíz del proyecto, abre el archivo en app/(tabs)/index tsx app/(tabs)/index tsx el archivo debería verse así 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/'; copia y pega tu id de la aplicación id de la aplicación y clave de javascript clave de javascript en él 4 prueba tu conexión dentro del app js app js de tu proyecto plantilla, hay una función que crea un objeto persona y otra para obtener personas de tu app a tu base de datos 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); } } para ejecutar y probar la conexión de tu app abre la terminal de tu proyecto ejecuta npm run android npm run android o npm run ios npm run ios o npm run start npm run start para abrir la aplicación en tu plataforma objetivo ¡está hecho! en este punto, has aprendido cómo iniciar y ejecutar una aplicación react native conectada a back4app