Exploración de Expo Snack

Por qué empezamos sin instalar nada

Instalar el entorno de React Native es la parte más frustrante del curso y la que menos enseña: Node, el CLI de Expo, el SDK de Android, un emulador que pesa varios gigas. Eso viene la semana que entra.

Hoy la meta es otra y es más importante: que veas tu código corriendo en tu propio teléfono el primer día. Expo Snack lo hace posible — es un editor de React Native que vive en el navegador, con un simulador al lado y un código QR para tu dispositivo real.

Snack tiene límites reales: no sirve para librerías nativas, ni para builds de producción, ni para nada que toque el sistema de archivos. Es un patio de juegos. Para lo de hoy, sobra.

Los tres bloques de un componente

Antes de escribir una línea, aprende a leer el archivo que ya está ahí. Todo componente de React Native tiene la misma anatomía:

javascript
Copiar
1import { StyleSheet, Text, View } from "react-native";   // 1. de dónde vienen las piezas
2
3export default function App() {                          // 2. el componente
4  return (
5    <View style={styles.container}>
6      <Text>Open up App.js to start working on your app!</Text>
7    </View>
8  );
9}
10
11const styles = StyleSheet.create({                       // 3. los estilos, como objeto JS
12  container: { flex: 1, alignItems: "center", justifyContent: "center" },
13});

• Los imports vienen de react-native, no del DOM. Esa línea es la frontera entre los dos mundos. No existe un <View> global como existe un <div> en HTML: cada componente se trae explícitamente.
• El componente es React del que ya conoces. Misma función, mismo return, mismo JSX.
• Los estilos son un objeto de JavaScript. No hay archivo .css, no hay clases, no hay cascada. StyleSheet.create recibe un objeto y devuelve estilos que se pasan por la prop style.

Texto y estilos

En React Native todo texto vive dentro de un <Text>. No es una recomendación: texto suelto dentro de un <View> hace que la app truene.

javascript
Copiar
1<View style={styles.container}>
2  <Text style={styles.titulo}>Hola, soy Nombre</Text>
3  <Text style={styles.sub}>Mi primera app móvil</Text>
4</View>

javascript
Copiar
1titulo: { fontSize: 28, fontWeight: "bold", marginBottom: 8 },
2sub: { fontSize: 16, color: "#666" },

Fíjate en fontSize: 28. No es "28px". Las unidades con sufijo no existen en React Native: los tamaños son números sin unidad, y equivalen a puntos independientes de densidad (el sistema los escala según la pantalla). Los porcentajes sí van como string (width: "80%"), y esa inconsistencia es una fuente clásica de confusión.

No hay jerarquía tipográfica heredada: no existe un <h1> que ya venga grande. Si quieres que algo parezca un título, lo dices con estilos.

Interacción: onPress, no onClick

javascript
Copiar
1const [conteo, setConteo] = useState(0);
2
3<Pressable style={styles.boton} onPress={() => setConteo(conteo + 1)}>
4  <Text style={styles.textoBoton}>Presióname ({conteo})</Text>
5</Pressable>

Tres cosas que cambian respecto a la web:

• onPress, no onClick. No hay mouse. Los eventos son táctiles.
• El texto del botón va dentro de un <Text>. <Pressable> es un contenedor que responde al tacto, no un botón con etiqueta.
• useState es exactamente el mismo hook que ya conoces. Lo que cambia es el componente que lo rodea, nunca la lógica ni el estado.

Existe también <Button>, más simple pero casi imposible de estilar y con apariencia distinta en iOS y Android. En cuanto quieras control visual vas a usar Pressable.

Verlo en tu teléfono

1. Instala Expo Go desde la App Store o Google Play.
2. En Snack, abre la pestaña My Device: aparece un código QR.
3. Escanéalo — con la cámara en iOS, con la propia app de Expo Go en Android.
4. Tu teléfono y tu computadora deben estar en la misma red.

A partir de ahí, cada cambio que guardes en Snack se refleja solo en el teléfono. Si el QR no conecta, casi siempre es que el teléfono está en datos móviles y no en el WiFi.

Errores típicos del primer día

El último es el importante. Los tres primeros gritan; el cuarto no dice nada y te deja mirando una pantalla en la que "no pasó nada". Ese contraste entre fallar ruidosamente y fallar en silencio es algo a lo que vas a volver todo el semestre.