React Native utiliza el modelo de componentes de React y JSX — construyendo interfaces de usuario a partir de componentes reutilizables que devuelven JSX. Si conoces React para web, esto se transfiere directamente; la principal diferencia es usar componentes nativos en lugar de elementos HTML.
() {
(
);
}
() {
(
);
}
Los componentes son piezas de UI reutilizables (funciones que devuelven JSX); toman props (entradas) y se componen en árboles — exactamente como React para web, pero con componentes nativos.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // STATE (useState hook)
return (
<TouchableOpacity onPress={() => setCount(count + 1)}>
<Text>Count: {count}</Text> {/* re-renders when state changes */}
</TouchableOpacity>
);
}
Props pasan datos a los componentes; state (a través de useState) mantiene datos cambiantes que desencadenan re-renders — el mismo modelo de React que en la web.
✓ Components, JSX, props, state, HOOKS (useState, useEffect, etc.), composition, keys —
all the same as React for web
✓ The main difference: native components (View/Text) instead of HTML; styling differs
→ React developers can apply most of their knowledge directly to React Native.
Entender cómo funcionan los componentes y JSX en React Native es fundamental porque React Native se construye sobre el modelo de componentes de React, por lo que comprenderlo es esencial, y una ventaja importante es que el conocimiento de React se transfiere directamente.
Los componentes (piezas de UI reutilizables que devuelven JSX, toman props como entradas y se componen en árboles) y JSX (la sintaxis que describe la UI con expresiones incrustadas) son la base del desarrollo de React Native — lo mismo que React para web.
Entender props (pasar datos a los componentes) y state (a través del hook useState, manteniendo datos cambiantes que desencadenan re-renders) es esencial porque estos conceptos de React son la forma en que los componentes de React Native reciben datos y manejan cambios — idéntico a React para web.
La idea clave es que el conocimiento de React se transfiere: componentes, JSX, props, state, hooks (useState, useEffect, etc.), composición y keys funcionan exactamente igual que en React para web, siendo las principales diferencias el uso de componentes nativos (View, Text) en lugar de HTML y estilos diferentes.
Esta transferibilidad es una razón importante por la que React Native es atractivo — el gran conjunto de desarrolladores de React/web pueden aplicar la mayoría de su conocimiento existente directamente a la construcción de aplicaciones móviles nativas, con una curva de aprendizaje relativamente pequeña enfocada en los componentes nativos y especificidades de la plataforma.
Ya que React Native es fundamentalmente React (componentes, JSX, props, state, hooks) aplicado a UI nativa, y entender este modelo es esencial para construir aplicaciones de React Native mientras se reconoce que el conocimiento de React se transfiere directamente (una ventaja clave), entender componentes y JSX en React Native es conocimiento esencial y fundamental — el modelo de programación central de React Native, necesario para construir aplicaciones, y especialmente valioso al destacar cómo las habilidades de React/web se aplican directamente al desarrollo móvil de React Native.