Publicado · en mejora
Framework · Desde 2015
React Native es un framework de código abierto para crear apps Android e iOS con React y JavaScript o TypeScript, con interfaz nativa desde un solo código.
React Native es un framework de código abierto que Meta publicó en 2015 y que permite crear apps para Android e iOS con el modelo de componentes de React. Las pantallas se dibujan con las vistas nativas de cada plataforma y no dentro de una vista web, por lo que las apps se ven y responden como cualquier otra app nativa. Hoy lo desarrollan Meta, la comunidad y varias empresas colaboradoras, y su New Architecture, activada por defecto, conecta JavaScript y el código nativo de forma más directa.
React Native destaca sobre todo en equipos que ya usan React en la web y quieren crear apps móviles con los mismos conocimientos y herramientas. Un solo código sirve para ambas plataformas, se puede recurrir a Kotlin o Swift cuando hace falta y Fast Refresh muestra los cambios en cuanto se guarda el archivo. Es muy común en apps con muchas pantallas y ciclos de publicación rápidos, como comercio, redes sociales o aplicaciones internas de empresa, y también puede usarse solo en algunas pantallas de una app nativa existente.
La forma más sencilla de empezar es crear un proyecto con Expo, como recomienda la documentación oficial. Instala Node.js, crea un proyecto con create-expo-app, instala Expo Go en tu teléfono y abre la app escaneando un código QR. Conviene aprender primero los fundamentos de React y luego seguir la guía de componentes básicos de la documentación oficial y el tutorial de Expo para crear una pequeña app propia.
Componentes como View, Text e Image se dibujan con las vistas nativas de cada plataforma, con su aspecto y comportamiento propios.
Usa los conceptos de React, como componentes, props, estado y hooks, junto con TypeScript y el ecosistema npm.
Fast Refresh aplica los cambios conservando el estado, y React Native DevTools se encarga de la depuración.
Los Turbo Native Modules y los componentes Fabric de la New Architecture conectan directamente con código Kotlin y Swift.
Las herramientas de React Native funcionan sobre Node.js. Instala la versión LTS desde nodejs.org y comprueba que muestra un número de versión. El emulador de Android requiere Android Studio y el simulador de iOS requiere macOS con Xcode.
node --versionCrea un proyecto nuevo con Expo, como recomienda la documentación oficial. La plantilla incluye TypeScript y enrutamiento basado en archivos (Expo Router) ya configurados.
npx create-expo-app@latest my-appInicia el servidor de desarrollo en la carpeta del proyecto y escanea el código QR con Expo Go o pulsa a (Android) o i (iOS) en la terminal.
cd my-app && npx expo startEn un proyecto creado con la plantilla blank-typescript, App.tsx es el componente raíz. View es un contenedor de diseño y Text muestra texto; todo texto debe ir dentro de un componente Text. Los estilos creados con StyleSheet.create usan Flexbox para centrar el contenido. Al editar y guardar el archivo, Fast Refresh actualiza al instante la app en ejecución.
App.tsx
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Text>Hello, world!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, alignItems: "center", justifyContent: "center" },
});
npx create-expo-app@latest hello --template blank-typescript && cd hello && npx expo startSeis capítulos que te llevan desde la instalación hasta las ideas clave de React Native.
Haz preguntas, comparte tu experiencia e intercambia opiniones sobre React Native.
Todavía no hay debates. Empieza el primero.
0 comentarios
Iniciar sesión · Inicia sesión para dejar un comentario.
Sé el primero en comentar.