Crear una APP con Expo (React Native)

Tiempo de lectura: 2 minutos

¡Hola! En este tutorial, te mostraré cómo crear una aplicación móvil con Expo.

Expo es una plataforma de desarrollo de aplicaciones móviles que permite a los desarrolladores crear aplicaciones móviles rápidamente utilizando React Native. Expo proporciona herramientas para simplificar la creación de aplicaciones móviles, como un conjunto de componentes preconstruidos, una API para acceder a las características del dispositivo móvil y una plataforma para compartir tu aplicación con otros.

Paso 1: Instalar Expo CLI

Para empezar, necesitamos instalar Expo CLI en nuestro sistema. Para hacerlo, abre la terminal y ejecuta el siguiente comando:

npm install -g expo-cli

Este comando instalará Expo CLI de forma global en tu sistema.

Paso 2: Crear un nuevo proyecto de Expo

Una vez que hemos instalado Expo CLI, podemos crear un nuevo proyecto de Expo. Para hacerlo, ejecuta el siguiente comando en la terminal:

expo init MyNewApp

Este comando creará un nuevo proyecto de Expo llamado «MyNewApp» en tu directorio actual. Toma en cuenta que la creación del proyecto puede tardar unos minutos.

Paso 3: Ejecutar la aplicación en el emulador

Una vez que el proyecto ha sido creado, podemos ejecutar nuestra aplicación en el emulador. Para ello, primero necesitamos abrir un emulador de Android o iOS. Puedes hacerlo usando Android Studio o Xcode.

Después de abrir el emulador, navega al directorio del proyecto y ejecuta el siguiente comando:

expo start

Este comando iniciará el servidor de desarrollo de Expo y abrirá una ventana del navegador que muestra el Metro Bundler. Desde aquí, puedes seleccionar el emulador en el que deseas ejecutar la aplicación.

Paso 4: Editar el código fuente

Ahora que hemos creado un nuevo proyecto de Expo y lo hemos ejecutado en el emulador, podemos comenzar a editar el código fuente. Abre el archivo App.js en tu editor de código favorito y reemplaza su contenido con el siguiente código:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello, world!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Este código importa las bibliotecas necesarias de React Native y define una función de componente llamada «App» que devuelve un componente de vista y un componente de texto. El componente de vista se utiliza para agregar estilos y el componente de texto se utiliza para mostrar el mensaje «Hello, world!».

Paso 5: Ejecutar la aplicación actualizada

Una vez que hemos editado el código fuente, podemos volver a compilar la aplicación y ejecutarla en el emulador. Para hacerlo, simplemente vuelve a la terminal y ejecuta el mismo comando que usaste antes:

expo start

Luego, selecciona el emulador en el que deseas ejecutar la aplicación.

¡Listo! Ahora deberías ver una pantalla en blanco con el mensaje «Hello, world!» en el emulador que seleccionaste. Puedes continuar editando el código fuente y explorando las herramientas de Expo para construir tu aplicación móvil.