Inicio > Cursos > React Native > ¿Qué es React Native?
React NativeIntroducción a React NativeLección 1 de 14

¿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,
  }
});
Consejo📱 En React Native NO usas div, p, button. Usas View (contenedor), Text (texto), TouchableOpacity (botón), Image, ScrollView, etc.
Componentes Fundamentales →

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