React Native: Cómo empezar con React

react native

Índice

¿Qué es React Native?

React Native es un framework popular y en rápida expansión para crear aplicaciones móviles multiplataforma. Utiliza JavaScript y React para renderizar las interfaces de la aplicación y viene con sus propios componentes de interfaz de usuario. Este marco permite a los desarrolladores aprovechar las ventajas del uso de JavaScript, como la rapidez de desarrollo y la facilidad de gestión de datos, al tiempo que permite a los usuarios utilizar sus SDK nativos para móviles favoritos. Los desarrolladores pueden compartir código entre plataformas con React Native, lo que es absolutamente impecable para los equipos que trabajan en varios proyectos.

También te puede interesar : » Kit de desarrollo de la nube de AWS con Java»

React Native: Componentes principales y componentes nativos

Es un marco de desarrollo de aplicaciones móviles de código abierto para que los usuarios desarrollen aplicaciones Android e iOS utilizando React y las capacidades de la plataforma nativa. Este marco te permite utilizar JavaScript para acceder a las API de tu plataforma y describir la apariencia de tu interfaz de usuario mediante componentes React: bloques de código reutilizable y anidado.

Componentes nativos

Usamos Java o Kotlin para escribir vistas en el desarrollo Android; en el desarrollo IOS usamos Swift u Objective C. Podemos invocar fácilmente estas vistas con JavaScript usando componentes React usando Native. Crea las correspondientes vistas de Android e iOS para esos componentes en tiempo de ejecución. Dado que los componentes nativos están respaldados por las mismas vistas que Android e iOS, las aplicaciones nativas se ven, se sienten y funcionan como cualquier otra aplicación. Se trata de componentes respaldados por plataformas Componentes nativos.

Componentes básicos

React viene con un conjunto importante de Componentes nativos listos para usar que podemos utilizar para empezar a construir nuestra aplicación al instante. Estos son los de React Native. Sin embargo, React nos da la oportunidad de construir nuestros propios Componentes Nativos tanto para Android como para iOS que se adapten a las necesidades individuales de nuestra app. React Native tiene muchos componentes básicos, pero aquí sólo te mostraré los componentes básicos más utilizados a continuación.

Componentes de interfaz de usuario React NativeAndroid ViewVista IOSWeb AnalógicaDescripción
<View><ViewGroup><UIView>Sin desplazamiento <div>Un contenedor que admite diseño con flexbox, estilo, algunos controles táctiles y de accesibilidad.
<Text><TextView><UITextView><p>Muestra, estiliza y anida cadenas de texto e incluso gestiona eventos táctiles.
<Image><ImageView><UIImageView><img>Muestra diferentes tipos de imágenes
<ScrollView><ScrollView><UIScrollView><div>Un contenedor de desplazamiento genérico que puede contener varios componentes y vistas
<TextInput><EditText><UITextField><input type="text">Permite al usuario introducir texto

Configuración del entorno de desarrollo

Hay dos maneras de configurar la participación en el desarrollo de tu primer proyecto React Native.

Expo CLI

La mejor manera de empezar para los principiantes es desarrollar una aplicación utilizando Expo CLI. Expo es un conjunto de herramientas construidas para React Native, y lo más útil para nosotros ahora es que nos permite construir apps usando este framework en el momento justo. Sólo necesitas una versión actualizada de Node.js y un teléfono o emulador. Si quieres probar Native directamente en tu navegador web sin instalar ninguna herramienta, puedes probar Snack.expo. dev para empezar con cualquier proyecto que implique React Native.

React Native CLI

Si tienes experiencia en desarrollo móvil, puedes utilizar React Native CLI. Xcode o Android Studio es necesario para empezar con React Native CLI. Si ya tienes instalada una de estas aplicaciones, podrás empezar en unos minutos. Si aún no están disponibles, espere pasar una hora instalándolos y configurándolos.

Empezar con la Expo CLI en Windows

Si tienes instalado Node 12 LTS o la última versión, puedes utilizar npm para instalar la utilidad de línea de comandos Expo CLI. De lo contrario, es posible que tenga que instalar primero Node 12 LTS o la versión más reciente. Puedes comprobar la versión del Nodo que estás utilizando escribiendo este comando a continuación:

C:Usersuser>node -v
C:Usersuser>node --version
 clase
Nota: Si ves que tu versión de Node es la 12 o superior, estás listo. De lo contrario, es posible que tenga que actualizar la versión de Node.

Ahora ejecute el siguiente comando para instalar la Expo CLI en su máquina.

C:Usersuser>npm install -g expo-cli.

Dependiendo de la configuración de su PC y la velocidad de Internet, puede tomar un tiempo para instalar Expo CLI en su PC (alrededor de 5-10 min).

Después de completar el proceso de instalación, escriba este comando para ver la versión de Expo CLI.

C:Usersuser>expo --version
clase

Ahora que todo está configurado y funcionando, estamos listos para crear nuestro primer proyecto con React Native.

Creación de nuestra primera aplicación React Native

Puedes crear la carpeta del proyecto donde quieras, depende de ti. Voy a crear una carpeta en mi escritorio llamada«ReactNative» Ahora escriba los siguientes comandos para crear su primera aplicación:

C:UsersuserDesktopReactNative>expo init MyFirstApp
clase
Nota: Le dará a seleccionar una opción. Después, puedes elegir el que prefieras. Elegiré la que está en blanco con una aplicación mínima tan limpia como un lienzo vacío.

Ahora el proyecto está listo. Para ejecutar el proyecto, tenemos que el directorio del proyecto y ejecutar los siguientes comandos.

C:UsersuserDesktopReactNative>cd MyFirstApp

Ahora escriba los siguientes comandos a continuación para iniciar el servidor de desarrollo para usted. Puedes abrir iOS, Android o Web desde aquí o ejecutarlos directamente con el comando específico.

C:UsersuserDesktopReactNativeMyFirstApp>npm start
C:UsersuserDesktopReactNativeMyFirstApp>npm run android
C:UsersuserDesktopReactNativeMyFirstApp>npm run ios
C:UsersuserDesktopReactNativeMyFirstApp>npm run web

El resultado podría ser el siguiente:

clase

http://localhost:19002/ es la URL de las herramientas de desarrollo. Visite esta URL en su navegador favorito. Y haz clic en el enlace donde quieras ver el resultado. Voy a hacer clic en «Ejecutar en el navegador web» el resultado debe ser el siguiente:

clase

Ahora abre el archivo App.js con tu editor de código favorito en la carpeta del proyecto. Voy a abrirlo en Bloc de notas++ y añadirle algo de código básico.

import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function app(){
    return(
        <View style = {styles.container}>
            <Text style = {style.cong}> Congratulations! </Text>
            <Text> You've built your first React Native App. </Text>
            <StatusBar style = "auto"/>
        </View>
    );
}

const style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    cong:{
        backgroundColor: 'red',
        padding: '10px',
    },
});
clase

Cómo React Native ayuda a construir una fantástica carrera de desarrollo de aplicaciones

React Native le permite dirigirse directamente a los dispositivos móviles en lugar de a los navegadores, y puede utilizar esta función para componer aplicaciones nativas para android y iPhone. Es una tecnología fantástica en la que introducirse. Si quieres aprender React, a continuación te damos algunas razones por las que deberías elegirlo para construir una fantástica carrera en el desarrollo de aplicaciones.

  • Es fácil de aprender
  • Es similar a React.js, por lo que no tienes que aprender cosas extra.
  • Falta de competencia
  • Es un servicio muy bien pagado

El framework React Native es una plataforma dinámica que le ayuda a crear aplicaciones móviles eficaces e instintivas utilizando sus conocimientos de JavaScript. React simplifica la creación de aplicaciones móviles que se ejecutan en diversas plataformas como Android e iOS con códigos fluidos sin comprometer la interfaz de usuario ni la experiencia del usuario. No cabe duda de que a React Native le irá bien en el sector de las TI.

En conclusión, React Native es un framework popular para el desarrollo de aplicaciones móviles porque ofrece soporte multiplataforma tanto para Android como para iOS sin violar la interfaz o la experiencia del usuario.

React Native ha demostrado ser una forma eficaz de crear aplicaciones multiplataforma de alto rendimiento. La clave está en encontrar el equilibrio adecuado entre tecnologías nativas y web.

Encuentre nuestros otros blogs sobre React aquí.

Unimedia Technology

Aquí en Unimedia Technology tenemos un equipo de Cloud Native Developers que pueden ayudarte a desarrollar tus Aplicaciones AWS y Azure más complejas.

Recuerde que en Unimedia somos expertos en tecnologías emergentes, así que no dude en ponerse en contacto con nosotros si necesita asesoramiento o servicios. Estaremos encantados de ayudarle.

Unimedia Technology

Su socio de desarrollo de software

Somos una consultora tecnológica de vanguardia especializada en arquitectura y desarrollo de software a medida.

Nuestros servicios

Suscríbase a nuestras actualizaciones

Mantente al día, informado y ¡demos forma juntos al futuro de la tecnología!

Lecturas relacionadas

Profundice con estos artículos

Descubra más opiniones expertas y análisis en profundidad de Unimedia en el ámbito del desarrollo de software y la tecnología.

Let’s make your vision a reality!

Simply fill out this form to begin your journey towards innovation and efficiency.

Hagamos realidad tu visión.

Sólo tienes que rellenar este formulario para iniciar tu viaje hacia la innovación y la eficiencia.