Crear una APP con React Native

Tiempo de lectura: 2 minutos

¡Hola! En este tutorial, te mostraré cómo crear un «Hello World» en React Native.

React Native es un framework de JavaScript utilizado para crear aplicaciones móviles multiplataforma. Permite a los desarrolladores escribir código una vez y luego ejecutarlo en múltiples plataformas, como iOS y Android.

Antes de comenzar, asegúrate de tener instalado Node.js y NPM en tu máquina. Si aún no los tienes, puedes descargarlos e instalarlos desde la página web oficial de Node.js.

Paso 1: Instalar React Native CLI

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

npm install -g react-native-cli

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

Paso 2: Crear un nuevo proyecto de React Native

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

react-native init HelloWorld

Este comando creará un nuevo proyecto de React Native llamado «HelloWorld» 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:

react-native run-android

Este comando compila el código de React Native y lo ejecuta en el emulador de Android. Si estás utilizando un emulador de iOS, ejecuta el siguiente comando en su lugar:

react-native run-ios

Este comando compilará el código de React Native y lo ejecutará en el emulador de iOS.

Paso 4: Editar el código fuente

Ahora que hemos creado un nuevo proyecto de React Native 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 { View, Text } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Hello, world!</Text>
    </View>
  );
}

export default HelloWorldApp;

Este código importa las bibliotecas necesarias de React Native y define una función llamada «HelloWorldApp» 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:

react-native run-android

o

react-native run-ios

Dependiendo del emulador que estés utilizando.

¡Listo! Ahora deberías ver una pantalla en blanco con el mensaje «Hello, world!»