20-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 WebReact Native
<div><View>
<span>, <p><Text>
<input><TextInput>
onClickonPress
CSSStyleSheet (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érminoSignificado
ComponenteFunción que retorna elementos UI
PropsDatos que pasas a un componente (read-only)
EstadoDatos que pueden cambiar dentro del componente
useStateHook para crear estado
ViewContenedor (similar a div)
TextPara mostrar texto (obligatorio para texto)
StyleSheetSistema de estilos (objeto JavaScript)
onPressEvento al presionar (similar a onClick)
FlexboxSistema 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?

Comentarios

Publicar un comentario

Entradas más populares de este blog

0-Sistema de Tareas

Guía de CRUD en Laravel para Principiantes: Sistema de Gestión de Tareas Comandos para crear un proyecto de lista de tareas en Laravel Aquí tienes los comandos necesarios para crear tu proyecto de lista de tareas en Laravel: 1. Crear el proyecto Laravel bash composer create-project laravel/laravel gestor-tareas cd gestor-tareas 2. Crear el modelo (aunque en este caso usamos un array, es buena práctica crear el modelo) bash php artisan make:model Tarea -m El flag  -m  crea automáticamente una migración para el modelo. 3. Crear la migración (si no se creó con el modelo) bash php artisan make:migration create_tareas_table 4. Ejecutar las migraciones bash php artisan migrate 5. Crear el controlador bash php artisan make:controller TareaController 6. Crear las vistas (manual) Necesitarás crear manualmente las carpetas y archivos de vistas: resources/views/layouts/app.blade.php resources/views/tareas/index.blade.php resources/views/tareas/crear.blade.php resources/views/tareas/mos...
Leer más

13-CRUD en Laravel para Web y API con Rutas Normales (No Resource)

  Tutorial Actualizado: CRUD en Laravel para Web y API con Rutas Normales (No Resource) Te mostraré la implementación  completa y detallada  con rutas normales (no resource), perfecto para principiantes. Estructura del Proyecto text gestor-tareas/ ├── app/ │ ├── Http/ │ │ ├── Controllers/ │ │ │ ├── Api/ │ │ │ │ └── TareaController.php │ │ │ └── Web/ │ │ │ └── TareaController.php ├── routes/ │ ├── api.php │ └── web.php └── resources/views/tareas/ ├── index.blade.php ├── create.blade.php ├── show.blade.php └── edit.blade.php Paso a Paso Detallado 1. Crear el Proyecto bash composer create-project laravel/laravel gestor-tareas cd gestor-tareas 2. Configurar Base de Datos Editar el archivo  .env : env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=gestor_tareas DB_USERNAME=root DB_PASSWORD= 3. Crear Modelo y Migración bash php artisan make:model Tarea -m 4. Configurar la Migración Editar  datab...
Leer más

10-Introducción a Blade en Laravel con un Ejemplo Práctico

    Introducción a Blade en Laravel con un Ejemplo Práctico Blade es el motor de plantillas de Laravel que permite crear vistas de manera elegante y eficiente. A continuación te mostraré un ejemplo completo de cómo usar Blade para crear una aplicación simple de gestión de tareas. Estructura del Proyecto Vamos a crear: Una plantilla base (layout) Una página de índice para ver todas las tareas Una página para agregar nueva tarea Una página para ver los detalles de una tarea Un menú de navegación Funcionalidad para salir (logout) 1. Plantilla Base (resources/views/layouts/app.blade.php) html <! DOCTYPE html > < html lang = " es " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > @yield('title') - Gestor de Tareas </ title > < link href = " https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/d...
Leer más