¿Cuáles son los pasos para crear la primera aplicación React Native?

React Native es un marco de software de interfaz de usuario de código abierto creado por Meta Platforms, Inc. Se utiliza para desarrollar aplicaciones para Android, Android TV, iOS, etc. Siempre estamos buscando ciclos de desarrollo más cortos, un tiempo de implementación más rápido y mejores rendimiento de la aplicación. Y hay tantos marcos móviles híbridos como NativeScript, React Native, Ionic, Xamarin, PhoneGap, etc.

React Native: es un marco desarrollado por Facebook para crear aplicaciones de estilo nativo para iOS y Android bajo un lenguaje común, JavaScript. Inicialmente, Facebook solo desarrolló React Native para admitir iOS. Sin embargo, con su compatibilidad reciente con el sistema operativo Android, la biblioteca ahora puede generar interfaces de usuario móviles para ambas plataformas.

Construir con React Native es extremadamente eficiente y altamente adictivo, pero comenzar puede ser un poco complicado. React Native usa Node.js, un tiempo de ejecución de JavaScript, para construir su código JavaScript. Si aún no tiene Node.js instalado, ¡es hora de obtenerlo!

Instalación: aquí usaremos la versión Expo CLI que será mucho más fluida para ejecutar sus aplicaciones React Native. Siga los pasos a continuación uno por uno para configurar su entorno nativo de React.

Expo: Es un marco y una plataforma para aplicaciones React universales. Es un conjunto de herramientas y servicios construidos alrededor de React Native y plataformas nativas que lo ayudan a desarrollar, construir, implementar e iterar rápidamente en iOS, Android y aplicaciones web desde la misma base de código JavaScript/TypeScript.

Paso 1: Abra su terminal y ejecute el siguiente comando.

npm install -g expo-cli

Paso 2: ahora expo-cli está instalado globalmente para que pueda crear la carpeta del proyecto ejecutando el siguiente comando.

expo init "projectName"

Paso 3 : Ahora ve a la carpeta creada e inicia el servidor usando el siguiente comando.

cd "projectName"

Para ejecutar el programa React-Native

npm start web

Estructura del proyecto:

Ejemplo: en este ejemplo, simplemente representamos un texto y le ponemos un poco de estilo, como el color del texto.

import React from "react";
import { Text, View, StyleSheet } from "react-native";
  
const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
          Welcome to React-Native
      </Text>
      <Text style={styles.para}>
        This is your first React Native Program Geek!!!
      </Text>
    </View>
  );
};
  
export default App;
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 8,
    backgroundColor: "white",
  },
  paragraph: {
    marginTop: "40%",
    marginLeft: 20,
    color: "green",
    textAlign: "center",
    fontWeight: "bold",
    fontSize: 30,
  },
  para: {
    marginLeft: 20,
    color: "red",
    textAlign: "center",
    fontWeight: "bold",
  },
});

Producción: