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 https //www back4app com/docs/get started/new parse app para aprender cómo crear una aplicación parse en back4app npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm o yarn https //classic yarnpkg com/en/docs/install instalado en tu sistema expo cli instalado siguiendo esta guía https //docs expo io/get started/installation/?redirected 1 obtener la plantilla para obtener el proyecto de plantilla, descarga y descomprime el código fuente en nuestro repositorio de github https //github com/templates back4app/react native template 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 curl lok https //github com/templates back4app/react native template/archive/master zip && unzip master zip o ejecuta el siguiente comando para clonar la plantilla usando git git clone https //github com/templates back4app/react native template 2 descarga las dependencias de la aplicación asegúrate de que has instalado \<font color="#2166ae">npm\</font> o \<font color="#2166ae">yarn\</font> en tu sistema mira las guías para obtener npm https //docs npmjs com/getting started o guías para obtener yarn https //classic yarnpkg com/en/docs/install#windows stable para más información 2\ en tu terminal, ejecuta \<font color="#2166ae">cd react native template master\</font> y abre el directorio raíz del proyecto 3\ ejecuta \<font color="#2166ae">npm install\</font> 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 \<font color="#2166ae">id de la aplicación\</font> y \<font color="#2166ae">clave de javascript\</font> navegando a tu \<font color="#2166ae">tablero\</font> > \<font color="#2166ae">configuración de la aplicación\</font> > \<font color="#2166ae">seguridad y claves\</font> en el directorio raíz del proyecto, abre el archivo en \<font color="#2166ae">app/(tabs)/index tsx\</font> 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 \<font color="#2166ae">id de la aplicación\</font> y \<font color="#2166ae">clave de javascript\</font> en él 4 prueba tu conexión dentro del \<font color="#2166ae">app js\</font> 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 \<font color="#2166ae">npm run android\</font> o \<font color="#2166ae">npm run ios\</font> o \<font color="#2166ae">npm run start\</font> 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