¿Qué es React Native?

React Native es un marco de desarrollo de aplicaciones móviles multiplataforma que Facebook creó en 2015. React Natives utiliza JavaScript como lenguaje de programación subyacente, y su objetivo es ayudar a los desarrolladores a crear aplicaciones móviles nativas para dispositivos Android e IOS con una sola base de código.

En esta publicación, presentaré algunos de los conceptos y componentes clave.

Qué es el desarrollo multiplataforma

El desarrollo multiplataforma es el arte de escribir software que se ejecuta en diferentes plataformas; escribes tu base de código una vez y la compartes en diferentes plataformas. El desarrollo multiplataforma te proporciona un amplio público objetivo, ya que tiene varias opciones para ejecutar tu base de código. Por ejemplo, una aplicación se puede compartir en dispositivos Android e IOS, lo que da como resultado una base de usuarios más amplia.

Características de React Native

Veamos algunas de las características de React Native.

Escribe una vez y úsalo en todas partes

React Native utiliza el enfoque de escribir una vez y usar en todas partes; esto significa que el código escrito en React Native se puede utilizar para crear aplicaciones nativas que funcionen en varias plataformas.

Gran base comunitaria

Dado que React native se basa en JavaScript, tiene una tasa de adopción significativa y una gran base de comunidad. JavaScript es el lenguaje de programación front-end más popular y se utiliza para alimentar casi todos los sitios web.

Paquetes y plugins de terceros

Con React Native, puedes utilizar complementos y paquetes de terceros para mejorar las capacidades de tu aplicación. De hecho, muchas bibliotecas JavaScript de código abierto que se encuentran en NPM se pueden usar con React Native.

Actualización rápida

La actualización rápida es una función de React Native que le permite obtener comentarios casi instantáneos para los cambios en tu código. Con la función de actualización rápida, puede ver que cada interfaz de usuario cambia inmediatamente a medida que actualiza el código.

Capacidad para crear aplicaciones multiplataforma rápidamente

Con React Native, no necesitas aprender programación para IOS o Android a menos que esté creando una aplicación compleja. Esto significa que puedes desarrollar tu aplicación completamente en JavaScript y compartir el código en diferentes plataformas que funcionan en IOS y Android.

No necesitas un compilador

React Native tiene una función de recarga en caliente que te permite ver tus resultados después de cada cambio que realices en tu código, a diferencia de una aplicación nativa en la que tienes que compilar tu código cada vez que realiza tus cambios.

Fácil de depurar

React Native aprovecha las herramientas de desarrollo de Chrome y Safari, lo que permite a los desarrolladores detectar y resolver errores rápidamente.

Algunas de las aplicaciones populares creadas con React Native incluyen:

• Facebook
• Instagram
• Skype
• Pinterest
• Salesforce
• Discord
• Bloomberg
• Wix
• Uber Eats
• Y muchas más

¿Cómo funciona React Native?

A diferencia de React, que se renderiza en el DOM de la web, React Native se renderiza en vistas nativas de iOS o Android: esto permite a los desarrolladores crear aplicaciones nativas de iOS y Android simplemente usando React Native.

React vs React Native

React y React Native son bastante similares, ya que ambos usan JavaScript; sin embargo, también son diferentes.

• React se utiliza para desarrollar aplicaciones web, mientras que React Native se utiliza para crear aplicaciones móviles.
• Cuando se trata de configuración, React requiere herramientas de configuración, ya que es un marco, mientras que React Native viene incluido con todas las herramientas necesarias para crear aplicaciones.
• React no admite la recarga en vivo, mientras que React Native admite la recarga en vivo.
• React utiliza todos los elementos proporcionados por la especificación HTML, como <div>, <span>, etc., mientras que los nativos de React introducen nuevos componentes para su uso: <view> y <text>.

Cómo configurar un entorno de desarrollo nativo de React

Supongamos que deseas crear una aplicación para Android e IOS; tendrías dos entornos de desarrollo separados, es decir. Xcode y Android Studi. Sin embargo, con React Native, solo necesitas una herramienta para admitir ambas versiones.

Expo CLI

Expo CLI es una aplicación de línea de comandos que permite a los desarrolladores crear aplicaciones multiplataformas sin tocar Android Studio o Xcode. Expo te permite ejecutar proyectos creados por Create React Native App sin compilar ningún código nativo. Expo también te permitirá poner en marcha una aplicación casi sin configuración.

Cómo instalar Expo CLI

1

npm install -g expo-cli

Expo App

Una vez que tengas la CLI de Expo instalada en nuestra máquina de desarrollo, el siguiente requisito es instalar la aplicación Expo Go en un dispositivo IOS o Android para ejecutar tus aplicaciones. La aplicación Expo go te permite abrir aplicaciones que se sirven a través de Expo CLI. Puedes instalarlo desde los siguientes enlaces dependiendo de tu dispositivo.

• Android Play Store: Android Lollipop (5) y superior.
• App Store de iOS: iOS 11 y superior.

Para crear una nueva aplicación con Expo, ejecuta el siguiente comando

1

expo init my-app

Componentes nativos de React

Veamos los componentes de React Native y cómo los usarías normalmente en tu aplicación React Native.

El componente View

View es el bloque de construcción fundamental de cualquier interfaz de React Native. Se asigna directamente a la vista nativa de la aplicación.

1

<View>

2

</View>

El componente text

El texto es otro componente fundamental y se utiliza para mostrar texto en la aplicación.

1

<View>

2

  <Text>Hello World!</Text>

3

</View>

El componente TextInput

Los usuarios utilizan este componente para introducir texto en la aplicación a través del teclado. También viene con propiedades valiosas como autocorrección, capitalización automática y enfoque automático.

1

<TextInput

2

        onChangeText={onChangeNumber}

3

        value={number}

4

        placeholder="My text here"

5

        keyboardType="numeric"

6

      />

El componente ScrollView

ScrollView se utiliza para representar todo el contenido a la vez y mostrarlo cuando sea necesario. Por ejemplo, puedes utilizar un ScrollView para mostrar una lista muy larga de elementos.

1

<ScrollView >

2

        <Text 

3

        VERY LONG TEXT

4

        </Text>

5

      </ScrollView>

El componente FlatList

Una flatlist se utiliza para mostrar datos de accesorios. Supera el problema de la representación lenta para largas listas de componentes.

1

<FlatList

2

 data={ }

3

 renderItem={}

4

 />

El componente SectionList

Una SectionList es similar a una FlatList, excepto que los datos están organizados en secciones.

1

<SectionList

2

      sections={DATA}

3

      keyExtractor={(item, index) => item + index}

4

      renderItem={({ item }) => <Item title={item} />}

5

/>

El componente de imagen

Un componente de imagen se utiliza para mostrar una imagen

1

<Image source={require('./cat.png')} /> 

El componente ImageBackground

ImageBackground se utiliza para mostrar una imagen de fondo.

1

<ImageBackground source={uri:'https://unsplash.com/photos/06MHFfYv6YY'} style={{width: '100%', height: '100%'}}>  

2

    <Text>IMAGE TEXT</Text>  

3

  </ImageBackground>

4

5

El componente Button

Se utiliza un botón para mostrar los táctiles.

1

<Button  

2

    title="Press Me"  

3

/> 

El componente Switch

Un switch es un componente controlado que representa una entrada booleana.

1

<Switch  

2

    value={this.state.switchValue}  

3

    onValueChange ={(switchValue)=>this.setState({switchValue})}/>  

Otros componentes importantes incluyen:

• KeyBoardAvoidiingView
• ActivityIndicator
• Alert
• Dimensions
• Linking
• Modal
• PixelRatio
• RefreshControl
• StatusBar

Resumen

Expo CLI te permite andamiar y ponerse en marcha con una configuración mínima sin la necesidad de Xcode o Android Studio. Otras ventajas de expo incluyen:

• Capacidad para probar en tus propios dispositivos
• No lock-in
• Requiere poco tiempo para crear una aplicación

Conclusión

El desarrollo de React Native toma gran parte de lo que estás acostumbrado del desarrollo web y lo lleva al desarrollo nativo.

Al desarrollar aplicaciones nativas, es importante tener en cuenta algunas diferencias entre las aplicaciones de IOS y las aplicaciones de Android. Por ejemplo, mientras que Android usa Material Design, iOS usa Human Interface Design.

Por ejemplo, navegar entre pantallas es diferente en IOS y Android; Los dispositivos Android tienen una barra de navegación en la parte inferior de la pantalla, mientras que los dispositivos IOS tienen un botón Atrás.

Tendrás que tener en cuenta estas pequeñas diferencias en tu diseño si deseas que los usuarios vean que tu aplicación tiene una verdadera interfaz nativa.