Introduccion a React Native

Que es React Native?

React Native es un framework de codigo abierto desarrollado por Meta (Facebook) que permite a los desarrolladores crear aplicaciones moviles para iOS y Android usando JavaScript y React. A diferencia de las apps hibridas que se ejecutan en un WebView, React Native renderiza usando componentes nativos reales.

Como Funciona React Native

// La Arquitectura de React Native
+-----------------------------------------------------+
|                   Hilo de JavaScript                 |
|  +------------------------------------------------+ |
|  |  Tus Componentes React y Logica de Negocio     | |
|  |  const App = () => <View><Text>Hola</Text></View>| |
|  +------------------------------------------------+ |
+-----------------------------------------------------+
                         |
                         | Bridge / JSI (Nueva Arquitectura)
                         v
+-----------------------------------------------------+
|                    Hilo Nativo                       |
|  +------------------------------------------------+ |
|  |  Componentes UI Nativos (UIKit / Android Views)| |
|  |  UIView, UILabel, android.widget.TextView      | |
|  +------------------------------------------------+ |
+-----------------------------------------------------+

React Native vs Otros Enfoques

Tu Primer Componente React Native

// App.js - Una app React Native simple
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';

export default function App() {
  const handlePress = () => {
    Alert.alert('Hola!', 'Bienvenido a React Native');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Bienvenido a React Native</Text>
      <Text style={styles.subtitle}>
        Construye apps nativas con JavaScript
      </Text>

      <TouchableOpacity style={styles.button} onPress={handlePress}>
        <Text style={styles.buttonText}>Comenzar</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 24,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});

Por Que Elegir React Native?