¿Qué es React Native?

El mercado de aplicaciones está en auge. Por eso, muchas empresas se preguntan si vale la pena invertir en el desarrollo de Apps. Para ello, se necesita principalmente un conocimiento avanzado de lenguajes de programación. En este post hablaremos sobre uno de ellos: React Native.

¿Qué es React Native?

También conocido como RN, React Native es un framework basado en JavaScript que posibilita la creación de aplicaciones móviles renderizadas para las dos plataformas de smartphones: iOS y Android. A través de él, es posible crear aplicaciones utilizando la misma base de código.

Lanzado en 2015 por Facebook (actual Meta) con una propuesta de código abierto, experimentó un crecimiento acelerado y en pocos años pasó a ser una de las principales soluciones de desarrollo, siendo utilizado por marcas como Tesla y Discord.

¿Cuál es la arquitectura de RN?

La arquitectura de React Native puede agruparse en 4 grupos:

1. Código React

Donde el desarrollador escribe el código de la aplicación.

2. JavaScript

React Native usa JavaScriptCore, un motor JavaScript de código abierto para WebKit.

3. The Bridge

Se trata de una forma de comunicar el código JavaScript con la parte nativa.

4. El lado nativo

Donde se desarrolla con Java/Kotlin en el caso de Android u Objective-C/Swift si es iOS.

Normalmente, la estructura de una App React Native se organiza de la siguiente forma:

• assets: Carpeta para almacenar todas las imágenes, fuentes, etc.;
• src: esta carpeta es el contenedor principal de todo el código dentro de tu aplicación, es decir, esto significa que esta carpeta guarda todo el código;
• components: Carpeta para almacenar cualquier componente común que uses en tu aplicación. Ejemplo: un botón, encabezado, card, etc.;
• constants: Carpeta para almacenar cualquier tipo de constante que tengas;
• routes.js: archivo para almacenar las rutas de las pantallas de la App;
• context: Esta carpeta contiene todos tus Context API. Es decir, sirve para autenticación, almacenamiento de datos de formularios, configuraciones de temas u otras funcionalidades. ¿No sabes cómo funciona? Echa un vistazo a qué son los Estados globales y las diferencias entre Redux y Context API;
• screens: Carpeta que contiene todas las pantallas/recursos de tu aplicación;
• services: Controlador de API o servicios externos. Para saber más sobre APIs, echa un vistazo a React Native: REST APIs con JSON server;
• utils: Carpeta para almacenar cualquier función común, como formateador de fechas, cálculo de tiempo;
• App.js: componente principal que inicia toda tu aplicación;
• index.js: Punto de entrada de tu aplicación de acuerdo con los estándares de React Native. En Expo este archivo no es necesario.

Esta estructura puede sufrir cambios y actualizaciones con el tiempo, pero esta es una estructura base, utilizada en muchos modelos de React. Es importante estar siempre atento a las buenas prácticas de cada lenguaje de programación, dejando tu código optimizado.

Principales Características

Uso de recursos nativos

A través de él es posible crear aplicaciones que funcionen en ambos sistemas operativos. También es posible utilizar los recursos nativos durante la fase de desarrollo, posibilitando la integración de herramientas de la programación nativa en el desarrollo híbrido de React.

Programación en componentes

La programación con React Native está casi enteramente basada en componentes. Esto facilita la modularización del código y la abstracción de funciones complejas. Además, también permite la reutilización de código en otras aplicaciones y funcionalidades.

Desarrollo Multiplataforma

Es la práctica de construir software compatible con más de una plataforma.

Así, una de las mayores ventajas del desarrollo con RN es que puedes construir una sola base de código para Android e iOS al mismo tiempo, haciendo que todo el proceso de producción y de actualización sea más ágil y rápido.

Esperamos que este post te haya ayudado a entender un poco más sobre este lenguaje de programación, React.

<