¿Qué es React Native?
React Native fue creado por Facebook en 2015 para resolver un problema real: mantener apps iOS y Android separadas es muy costoso. Con React Native escribes JavaScript y React, y el código se convierte en componentes nativos reales de iOS (UIView, UILabel) y Android (ViewGroup, TextView).
No es una WebView mostrando una página web: es la interfaz nativa real del sistema operativo. Si ya sabes React para web, React Native reutiliza el 90% de ese conocimiento para crear apps móviles.
Expo transforma el desarrollo móvil de algo complicado (configurar Xcode, Android Studio, certificados, provisioning profiles) en algo simple: instalas Expo Go en tu teléfono, escaneas un código QR y ves tu app inmediatamente sin compilar nada. Expo también incluye decenas de APIs listas para usar que evitan configurar librerías nativas manualmente: expo-camera, expo-location, expo-notifications, expo-image-picker. Para producción, EAS Build compila los APK e IPA en la nube sin necesitar Mac para iOS.
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.titulo}>¡Hola React Native!</Text>
<Text style={styles.subtitulo}>Tu primera app móvil</Text>
<TouchableOpacity
style={styles.boton}
onPress={() => alert("¡Clic!")}
>
<Text style={styles.botonTexto}>Presioname</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#0A0F1E",
},
titulo: {
fontSize: 28,
fontWeight: "bold",
color: "#00E5A0",
marginBottom: 8,
},
subtitulo: {
fontSize: 16,
color: "#8892A4",
},
boton: {
marginTop: 24,
backgroundColor: "#00E5A0",
paddingHorizontal: 32,
paddingVertical: 12,
borderRadius: 8,
},
botonTexto: {
color: "#0A0F1E",
fontWeight: "bold",
fontSize: 16,
}
});
Practica esta lección
Resuelve los ejercicios del curso de React Native en la app, gratis y con corrección automática.
Empezar a practicar