Guía Paso a Paso para Entender React Native (antes del Tutorial)

 1. 📱 ¿Qué es React Native?

React Native es un framework para crear aplicaciones móviles nativas usando JavaScript y React. A diferencia de las apps web, genera componentes nativos reales (no WebViews).

Comparación con React Web:

React Web	React Native
<div>	<View>
<span>, <p>	<Text>
<input>	<TextInput>
onClick	onPress
CSS	StyleSheet (JavaScript)

---

2. 🎯 Prerrequisitos Básicos

A) Conocimientos previos necesarios:

• ✅ JavaScript ES6+ (funciones flecha, destructuración, spread operator)

• ✅ Conceptos básicos de React (si ya sabes React web, ¡estás al 90%!)

  • Componentes

  • Props (propiedades)

• ✅ Hooks (useState, useEffect)

B) Si NO sabes React, necesitas esto primero:

javascript

// 1. Componente funcional
function MiComponente() {
  return <View>Hola Mundo</View>;
}

// 2. Props (propiedades que recibe un componente)
function Saludo(props) {
  return <Text>Hola {props.nombre}</Text>;
}
// Uso: <Saludo nombre="Juan" />

// 3. Estado con useState
function Contador() {
  const [numero, setNumero] = useState(0);
  // numero = valor actual
  // setNumero = función para cambiarlo
  
  return (
    <View>
      <Text>{numero}</Text>
      <Button onPress={() => setNumero(numero + 1)} />
    </View>
  );
}

---

3. 📚 Conceptos Clave del Tutorial

A) Componentes Core de React Native (IMPORTANTE)

javascript

import { 
  View,      // Contenedor (como div)
  Text,      // Para mostrar texto
  TextInput, // Input de texto
  Button,    // Botón básico
  TouchableOpacity, // Botón personalizable
  FlatList,  // Para listas largas
  StyleSheet // Para estilos
} from 'react-native';

B) StyleSheet (CSS en React Native)

javascript

const styles = StyleSheet.create({
  contenedor: {
    flex: 1,                  // Ocupa todo el espacio disponible
    padding: 20,              // Padding como CSS
    marginTop: 10,            // Margin
    backgroundColor: '#fff',  // Fondo
    borderRadius: 8,          // Bordes redondeados
    flexDirection: 'row',     // Dirección: 'row' (horizontal) o 'column' (vertical)
    justifyContent: 'center', // Alineación horizontal
    alignItems: 'center'      // Alineación vertical
  }
});

C) Eventos (diferentes al web)

javascript

// En React Web:
<button onClick={funcion} />

// En React Native:
<Button onPress={funcion} />
<TouchableOpacity onPress={funcion}>
  <Text>Presionar</Text>
</TouchableOpacity>

---

4. 🧩 Explicación Paso a Paso del Tutorial

Paso 1: Importaciones Necesarias

javascript

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

• React: Siempre necesario para componentes

• Componentes nativos: Lo que usarás para construir la UI

Paso 2: Crear un Componente

javascript

function App() {
  return (
    <View style={styles.container}>
      <Text>Mi App</Text>
    </View>
  );
}

Paso 3: Estado (useState)

javascript

// En App.js del tutorial:
const [tasks, setTasks] = useState([]);

• tasks: Array vacío inicial []

• setTasks: Función para actualizar el array

• Cuando se actualiza, el componente se re-renderiza

Paso 4: Pasar Props entre Componentes

javascript

// App.js envía función a TaskForm:
<TaskForm onAddTask={addTask} />

// TaskForm.js recibe y usa:
function TaskForm({ onAddTask }) {
  // ...
  onAddTask(taskText); // Ejecuta la función del padre
}

Paso 5: FlatList para Listas

javascript

<FlatList
  data={tasks}                    // Array de datos
  keyExtractor={(item) => item.id.toString()} // Key única
  renderItem={({ item }) => (     // Renderiza cada item
    <Text>{item.text}</Text>
  )}
/>

---

5. 🔄 Flujo de Datos COMPLETO

Ejemplo Visual:

text

1. Usuario escribe: "Comprar leche"
   ↓
2. TaskForm guarda en taskText = "Comprar leche"
   ↓
3. Usuario presiona "Agregar"
   ↓
4. TaskForm ejecuta: onAddTask("Comprar leche")
   ↓
5. App.js recibe: addTask("Comprar leche")
   ↓
6. Crea objeto: {id: 123, text: "Comprar leche", completed: false}
   ↓
7. Actualiza estado: setTasks([...tasks, nuevoObjeto])
   ↓
8. TaskList recibe nuevo array y se re-renderiza

---

6. 💡 Tips para Entender Mejor

A) Similitudes con React Web que YA sabes:

javascript

// Estado - IGUAL
const [estado, setEstado] = useState(valor);

// Props - IGUAL
function Componente(props) { ... }

// Retorno JSX - MUY SIMILAR
return (
  <View> {/* En vez de <div> */}
    <Text>{variable}</Text> {/* En vez de <p> o <span> */}
  </View>
);

B) Diferencias Clave:

javascript

// 1. NO hay etiquetas HTML
// MAL: <div>, <p>, <span>, <input>
// BIEN: <View>, <Text>, <TextInput>

// 2. Estilos en JavaScript
// Web: className="mi-clase"
// React Native: style={styles.miEstilo}

// 3. Eventos diferentes
// Web: onClick, onChange, onSubmit
// RN: onPress, onChangeText

C) Estructura típica de un componente:

javascript

// 1. Importaciones
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

// 2. Componente funcional
function MiComponente() {
  // 3. Lógica (estado, efectos, funciones)
  
  // 4. Retorno JSX
  return (
    <View style={styles.container}>
      <Text>Contenido</Text>
    </View>
  );
}

// 5. Estilos
const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

// 6. Exportación
export default MiComponente;

---

7. 🚀 Ejercicios Previos Recomendados

Ejercicio 1: Componente Básico

javascript

// Crea un componente que muestre tu nombre y edad
function Presentacion() {
  const nombre = "Tu Nombre";
  const edad = 25;
  
  return (
    <View>
      <Text>Hola, me llamo {nombre}</Text>
      <Text>Tengo {edad} años</Text>
    </View>
  );
}

Ejercicio 2: Estado Simple

javascript

// Crea un contador con botón de incrementar
function Contador() {
  const [contador, setContador] = useState(0);
  
  return (
    <View>
      <Text>Contador: {contador}</Text>
      <Button 
        title="+1" 
        onPress={() => setContador(contador + 1)}
      />
    </View>
  );
}

Ejercicio 3: Props

javascript

// Componente Saludo que recibe nombre por props
function Saludo(props) {
  return <Text>¡Hola {props.nombre}!</Text>;
}

// Uso: <Saludo nombre="Ana" />

---

8. 📖 Glosario Rápido

Término	Significado
Componente	Función que retorna elementos UI
Props	Datos que pasas a un componente (read-only)
Estado	Datos que pueden cambiar dentro del componente
useState	Hook para crear estado
View	Contenedor (similar a div)
Text	Para mostrar texto (obligatorio para texto)
StyleSheet	Sistema de estilos (objeto JavaScript)
onPress	Evento al presionar (similar a onClick)
Flexbox	Sistema de layout (activado por defecto)

---

9. ✅ Checklist antes de Empezar el Tutorial

• Entiendo funciones de JavaScript ES6

• Sé qué son los componentes de React

• Comprendo qué son props y estado

• Entiendo cómo usar useState

• Sé que React Native usa componentes diferentes a HTML

• Comprendo que los estilos son objetos JavaScript

---

10. 🆘 Si te Atascas en el Tutorial

Problema común 1: "No entiendo la comunicación entre componentes"

javascript

// App.js (Padre)
function App() {
  const addTask = (texto) => { /* lógica */ };
  return <TaskForm onAddTask={addTask} />;
}

// TaskForm.js (Hijo)
function TaskForm(props) {
  // props.onAddTask es la función addTask del padre
  props.onAddTask("texto del input");
}

Problema común 2: "No sé qué hace useState"

javascript

// useState devuelve un array con dos elementos:
const [valor, setValor] = useState(inicial);

// Ejemplo concreto:
const [contador, setContador] = useState(0);
// contador = 0 (valor actual)
// setContador(5) -> cambia contador a 5
// setContador(contador + 1) -> incrementa en 1

Problema común 3: "No entiendo flexbox"

javascript

// Por defecto en React Native:
// - flexDirection: 'column' (vertical)
// - Todo es display: flex

// Para fila horizontal:
<View style={{flexDirection: 'row'}}>
  <Text>Izquierda</Text>
  <Text>Derecha</Text>
</View>

---

🎯 Conclusión

Para entender el tutorial, necesitas:

1. ✅ JavaScript básico (variables, funciones, arrays)

2. ✅ Conceptos básicos de React (componentes, props, estado)

3. ✅ Saber que React Native usa componentes propios (View, Text, etc.)

4. ✅ Entender que los estilos son objetos JS

Si tienes esto, ¡estás listo! El tutorial te guiará paso a paso con:

• Código completo

• Explicaciones detalladas

• Ejemplos prácticos

¿Listo para empezar? ¡Ve al tutorial y sigue cada paso! 🚀

¿Hay algo específico de esta explicación que necesites aclarar más?