React crea interfaces web con elementos HTML; React Native crea apps de iOS y Android con vistas nativas. Mira el equivalente nativo de cada elemento web y qué puedes compartir.
React es la librería; React Native la usa para crear apps de iOS y Android. Con React en la web renderizas elementos HTML como div y button en una página del navegador. React Native renderiza sus propios componentes, como View y Text, que se convierten en vistas reales de la plataforma. Componentes, props, estado y hooks funcionan igual en los dos.
Lado a lado
La forma más rápida de ver la diferencia es traducir un elemento web a su equivalente nativo. Busca en el mapa de abajo una etiqueta HTML, una prop o una costumbre de CSS, y cada fila te da el reemplazo en React Native con una nota breve sobre lo que se comporta distinto.
No. React es la librería de componentes; React Native es un framework que usa React para manejar vistas móviles nativas. Escribes los componentes igual, pero renderizas View, Text y otros componentes nativos en lugar de HTML, y no hay DOM del navegador.
No directamente. No hay elementos div ni span, ni archivos CSS. Los estilos son objetos JavaScript con nombres en camelCase que en su mayoría imitan a CSS, y el layout usa flexbox con algunos valores por defecto distintos.
Primero React, en la mayoría de los casos. La propia documentación de React Native enseña los componentes, JSX, props y estado de React como base, y practicarlos en la web te da respuestas más rápidas.
La lógica se puede compartir: tipos, clientes de API, validación y hooks que no tocan el DOM. Las pantallas y los componentes normalmente no, porque renderizan primitivas distintas.
Sí. La documentación de React Native explica que en tiempo de ejecución crea las vistas de Android e iOS correspondientes a sus componentes, así que un View se convierte en una vista nativa y no en una página web dentro de un contenedor.
La lógica del componente es idéntica: las mismas props, la misma llamada a useState, el mismo manejador. Solo cambian los elementos y los estilos.
Elementos HTML, una clase CSS y onClick. El navegador coloca el botón después del texto.
View, Text y Pressable de react-native, estilos de StyleSheet.create, y onPress en lugar de onClick.
FlatList solo renderiza lo que está cerca de la pantalla, lo que mantiene fluidas las listas largas. keyExtractor cumple el papel de la prop key.
Un contenedor con layout flexbox, estilos y gestión de toques. No hace scroll.
Todo el texto debe ir dentro de Text. Un Text anidado hereda estilos; no hay etiquetas de encabezado.
Las imágenes de red necesitan un width y un height explícitos. Los archivos locales usan require().
onChangeText pasa directamente la cadena nueva en lugar de un evento.
La prop multiline permite varias líneas de texto.
Oculta el texto escrito. No funciona junto con multiline.
Una entrada booleana controlada: actualiza value desde onValueChange.
Button recibe una prop title; Pressable envuelve los hijos que quieras hacer pulsables.
Pressable ofrece también onPressIn, onPressOut y onLongPress.
Renderiza todos sus hijos a la vez, así que resérvalo para contenido corto.
Renderiza listas largas de forma eficiente. Necesita data y renderItem; keyExtractor define cada key.
Abre la URL con una app instalada, como el navegador. Envuélvelo en un Pressable para tener un enlace pulsable.
Los estilos son objetos, normalmente definidos con StyleSheet.create. Pasa un array para combinarlos; gana el último.
Los nombres de estilo van en camelCase, como en la propia prop style de React en la web.
Cada View es un contenedor flex y apila a sus hijos en vertical salvo que se indique lo contrario.
Busca un elemento, una prop o una idea de CSS
img, onClick, class...
Mostrando {n} de {v} filas
No hay coincidencias. Prueba con el nombre de una etiqueta, como div o input.
Elementos web y sus equivalentes en React Native
React en la web
React Native
Qué cambia
Empieza gratis · Sin tarjeta de crédito