React Native

React Native es un marco de software de interfaz de usuario de código abierto desarrollado por Meta Platforms (anteriormente Facebook Inc.). ^{[ 3 ]} Se utiliza para desarrollar aplicaciones para Android , ^{[ 4 ] : §Capítulo 1 [ 5 ] [ 6 ]} Android TV , ^{[ 7 ]} iOS , ^{[ 4 ] : §Capítulo 1 [ 6 ]} macOS , ^{[ 8 ]} tvOS , ^{[ 9 ]} Vega OS , ^{[ 10 ] [ 11 ]} Web , ^{[ 12 ]} Windows ^{[ 8 ]} y UWP ^{[ 13 ]} al permitir a los desarrolladores usar el marco React junto con las capacidades de la plataforma nativa. ^{[ 14 ]} Se utiliza para desarrollar aplicaciones de Android e iOS en Facebook , Microsoft y Shopify . ^{[ 15 ]} También se está utilizando para desarrollar aplicaciones de realidad virtual en Oculus . ^{[ 16 ]}

En 2012, Mark Zuckerberg comentó: «El mayor error que cometimos como empresa fue apostar demasiado por HTML5 en lugar de por el desarrollo nativo». ^{[ 17 ] [ 18 ]} El uso de HTML5 para la versión móvil de Facebook resultó en una aplicación inestable que recuperaba datos lentamente. ^{[ 19 ]} Prometió que Facebook pronto ofrecería una mejor experiencia móvil.

Dentro de Facebook, Jordan Walke desarrolló un software que generaba elementos de interfaz de usuario para iOS a partir de un hilo de JavaScript en segundo plano , que se convirtió en la base del framework web React . Decidieron organizar un hackathon interno para perfeccionar este prototipo y así poder crear aplicaciones nativas con esta tecnología. ^{[ 20 ]}

En 2015, después de meses de desarrollo, Facebook lanzó la primera versión de la configuración de JavaScript de React . Durante una charla técnica, ^{[ 21 ]} Christopher Chedeau explicó que Facebook ya estaba utilizando React Native en producción para su aplicación de grupos y su aplicación de administrador de anuncios. ^{[ 22 ]}

En octubre de 2025, Meta anunció que donaría React, React Native y JSX ( JavaScript XML ) a una nueva React Foundation, parte de la Linux Foundation . ^{[ 23 ]}

Los principios de funcionamiento de React Native son prácticamente idénticos a los de React, excepto que React Native no manipula el DOM a través del DOM virtual . ^{[ 4 ] : §Capítulo 2} Se ejecuta en un proceso en segundo plano (que interpreta el JavaScript escrito por los desarrolladores) directamente en el dispositivo final y se comunica con la plataforma nativa ^{[ 4 ] : §Capítulo 2} mediante datos serializados a través de un puente asíncrono y por lotes . ^{[ 24 ]}

Los componentes de React envuelven el código nativo existente e interactúan con las API nativas a través del paradigma de interfaz de usuario declarativa de React y JavaScript . ^{[ 25 ]} TypeScript se usa a menudo en lugar de JavaScript en las aplicaciones modernas de React Native debido a su mayor seguridad de tipos . ^{[ 26 ]}

Aunque el estilo de React Native tiene una sintaxis similar a la de CSS , no utiliza HTML ni CSS . ^{[ 4 ] : §Capítulo 5 [ 27 ]} En su lugar, se utilizan mensajes del hilo de JavaScript para manipular las vistas nativas. Mediante complementos, Tailwind también puede utilizarse con React Native.

React Native también está disponible para Windows y macOS , y actualmente su mantenimiento corre a cargo de Microsoft .

Un programa "¡Hola, mundo!" en React Native se ve así:

import { AppRegistry , Text , View , Button } from 'react-native' ;import React from 'react' ;const HelloWorldApp = () => {const [ count , setCount ] = React . useState ( 0 );const incrementCount = () => {setCount (( prevCount ) => prevCount + 1 );};devolver (< Ver ><Texto> ¡ Hola mundo ! </Texto>​< Texto > { count } < /Texto>< Button onPress = { incrementCount } title = "Incrementar contador" /></Ver>​);};exportar por defecto HelloWorldApp ;AppRegistry.registerComponent ( 'HelloWorld' , ( ) = > HelloWorldApp );

En TypeScript, un componente de contador tiene este aspecto:

import { Button , Text , View } from "react-native" ;import React from "react" ;Interfaz CounterProps {título : cadena ; // Propiedad requeridabaseNumber? : número ; // Propiedad opcional}const Counter : React.FC < CounterProps > = ({ title , baseNumber }) => {const [ count , setCount ] = React . useState < number > ( baseNumber || 0 );const incrementCount = () : void => setCount (( prevCount ) => prevCount + 1 );devolver (< Ver >< Texto > { count } < /Texto>< Button onPress = { incrementCount } title = { title } >< /Button></Ver>​);};

• React (biblioteca de JavaScript)
• NativeScript
• Xamarin
• SDK de Titanium
• Apache Cordova
• Flutter (software)
• Qt (software)
• Nombre en clave uno
• Jetpack Compose

• Eisenman, Bonnie (2016). Aprendiendo React Native . O'Reilly . ISBN 978-1-491-92900-1.