Tutorial de React para Principiantes

 

Tutorial de React para Principiantes

📚 ¿Qué es React?

React es una biblioteca de JavaScript para construir interfaces de usuario. Piensa en ella como una herramienta que te ayuda a crear páginas web dinámicas de manera organizada.

🧩 Conceptos Básicos de React

1. Componentes

Los componentes son como bloques de construcción de tu aplicación. Cada parte de tu página web puede ser un componente:

javascript
// Un componente básico
function Saludo() {
  return <h1>¡Hola Mundo!</h1>;
}

2. JSX

Es una extensión de JavaScript que parece HTML pero se escribe dentro de JavaScript:

javascript
// Esto es JSX
const elemento = <h1>Hola, mundo!</h1>;

3. Props (Propiedades)

Son como parámetros que le pasas a un componente:

javascript
function Saludo(props) {
  return <h1>Hola, {props.nombre}!</h1>;
}

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

4. Estado (State)

Es la memoria de tu componente. Guarda datos que pueden cambiar:

javascript
import { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);
  
  return (
    <div>
      <p>Contador: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>
        Incrementar
      </button>
    </div>
  );
}

🔄 Ciclo de Vida y Hooks

¿Qué son los Hooks?

Son funciones especiales que te permiten "enganchar" características de React a tus componentes.

Hook useState

Guarda datos que pueden cambiar:

javascript
// Sintaxis básica
const [valor, setValor] = useState(valorInicial);

// Ejemplo concreto
const [nombre, setNombre] = useState('Juan');
// nombre = 'Juan' (valor actual)
// setNombre('Ana') (función para cambiarlo a 'Ana')

Hook useEffect

Ejecuta código después de que el componente se renderiza:

javascript
useEffect(() => {
  // Este código se ejecuta después del primer render
  // y cuando las dependencias cambien
}, [dependencias]);

📝 Explicación Paso a Paso del Tutorial Anterior

Paso 1: Imports (Lo que traemos de React)

javascript
import React, { useState, useEffect } from 'react';
import MovieService from '../services/movie.service';

Traducción:
"Oye React, necesito usar useState y useEffect. También necesito mi servicio de películas."

Paso 2: Estado para películas

javascript
const [movies, setMovies] = useState([]);

Traducción:

  • movies: Variable que guarda la lista de películas (empieza vacía [])

  • setMovies: Función para actualizar la lista

  • Es como decir: "Tengo una caja llamada 'movies' que por ahora está vacía, y tengo una función para poner cosas en esa caja"

Paso 3: useEffect - El "al cargar la página"

javascript
useEffect(() => {
  fetchMovies();
}, []);

Traducción:
"Cuando esta página se cargue por primera vez, ejecuta la función fetchMovies(). El [] vacío significa: hazlo solo una vez al inicio."

Paso 4: Función para obtener películas

javascript
const fetchMovies = async () => {
  try {
    const response = await MovieService.getAll();
    setMovies(response.data);
  } catch (error) {
    console.error('Ocurrió un error:', error);
  }
};

Traducción paso a paso:

  1. "Voy a buscar las películas (esto puede tardar)"

  2. "Intento (try) llamar a mi servicio de películas"

  3. "Cuando responda, guardo las películas en mi estado con setMovies"

  4. "Si algo sale mal (catch), muestro el error"

Paso 5: Renderizar la tabla

javascript
{movies && movies.map((movie, index) => (
  <tr key={index}>
    <td>{movie.id}</td>
    <td>{movie.title}</td>
    <td>{movie.year}</td>
  </tr>
))}

Traducción:

  1. movies &&: "Si existe movies (no es null o undefined)"

  2. .map: "Para cada película en la lista"

  3. (movie, index): "Toma la película actual y su posición"

  4. <tr key={index}>: "Crea una fila con un identificador único"

  5. {movie.title}: "Muestra el título de esta película"

🎯 Ejemplo Práctico: Lista de Compras Sencilla

Vamos a hacer un ejemplo similar pero más simple:

javascript
import React, { useState, useEffect } from 'react';

function ListaCompras() {
  // 1. Estado para los productos
  const [productos, setProductos] = useState([]);
  
  // 2. Efecto que se ejecuta al cargar
  useEffect(() => {
    // Datos de ejemplo (en lugar de llamar a una API)
    const productosEjemplo = [
      { id: 1, nombre: 'Manzanas', cantidad: 5 },
      { id: 2, nombre: 'Leche', cantidad: 2 },
      { id: 3, nombre: 'Pan', cantidad: 1 }
    ];
    setProductos(productosEjemplo);
  }, []);
  
  return (
    <div>
      <h2>Mi Lista de Compras</h2>
      <table border="1">
        <thead>
          <tr>
            <th>ID</th>
            <th>Producto</th>
            <th>Cantidad</th>
          </tr>
        </thead>
        <tbody>
          {productos.map((producto) => (
            <tr key={producto.id}>
              <td>{producto.id}</td>
              <td>{producto.nombre}</td>
              <td>{producto.cantidad}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default ListaCompras;

🔍 Desglose Visual del Tutorial Original

Estructura del Componente MovieList:

text
MovieList Component
├── Estado (useState)
│   ├── movies: [] (arreglo vacío inicial)
│   └── setMovies: función para actualizar
│
├── Efecto (useEffect)
│   └── Ejecuta fetchMovies() al inicio
│
├── Funciones
│   ├── fetchMovies(): obtiene datos de la API
│   └── refreshList(): vuelve a cargar los datos
│
└── JSX (lo que se ve)
    ├── Div principal con clase "row"
    │   ├── Columna izquierda (6/12)
    │   │   ├── Título "Películas"
    │   │   └── Tabla con datos
    │   └── Columna derecha (6/12)
    │       └── Espacio para detalles

🛠️ Configuración Inicial para Practicar

1. Instalar Create React App

bash
npx create-react-app mi-primera-app
cd mi-primera-app
npm start

2. Estructura básica de archivos:

text
mi-primera-app/
├── public/
│   └── index.html
├── src/
│   ├── App.js          # Componente principal
│   └── index.js        # Punto de entrada
└── package.json

3. Crea un archivo MovieList.js:

javascript
// Copia el ejemplo de ListaCompras arriba
// y modifícalo gradualmente

❓ Preguntas Frecuentes de Principiantes

¿Por qué usamos key en el map?

React necesita una forma única de identificar cada elemento en una lista para actualizarlos eficientemente.

¿Qué significa async/await?

  • async: "Esta función es asíncrona (puede tomar tiempo)"

  • await: "Espera a que esto termine antes de continuar"

¿Para qué sirve el arreglo [] en useEffect?

Le dice a React: "Ejecuta esto solo una vez al inicio". Si no lo pones, se ejecutaría en cada render.

📈 Flujo de Datos en Nuestro Componente

text
1. Componente se monta
   ↓
2. useEffect se ejecuta
   ↓
3. fetchMovies() llama a la API
   ↓
4. API responde con datos
   ↓
5. setMovies() actualiza el estado
   ↓
6. React re-renderiza con nuevos datos
   ↓
7. Tabla muestra las películas

🎮 Ejercicios para Practicar

Ejercicio 1: Lista de Estudiantes

Crea un componente que muestre una lista de estudiantes con:

  • Nombre

  • Edad

  • Curso

Ejercicio 2: Contador con Botones

Crea un contador que:

  • Muestre un número

  • Tenga botones para aumentar y disminuir

  • Tenga un botón para reiniciar a cero

Ejercicio 3: Lista Interactiva

Crea una lista de tareas donde puedas:

  • Agregar nuevas tareas

  • Marcar tareas como completadas

  • Eliminar tareas

💡 Consejos para Aprender React

  1. Empieza simple: No intentes entender todo de una vez

  2. Practica modificando ejemplos: Cambia datos, añade columnas, etc.

  3. Usa la consola del navegador: Presiona F12 y ve a "Console" para ver errores

  4. Divide y vencerás: Separa tu código en componentes pequeños

  5. Aprende haciendo: Escribe código, no solo leas tutoriales

🔗 Recursos Adicionales

¿Listo para intentarlo? Comienza con el ejemplo de Lista de Compras, modifícalo hasta que te sientas cómodo, y luego regresa al tutorial de películas. ¡Tú puedes! 🚀

Comentarios

Publicar un comentario

Entradas más populares de este blog

Axios para Principiantes - Guía Paso a Paso

  Axios para Principiantes - Guía Paso a Paso 📚  ¿Qué es Axios? Axios  es como un  "mensajero"  entre tu aplicación web y un servidor. Imagina que tu app necesita pedir información (como una lista de películas) a un servidor en internet - Axios se encarga de enviar esa "carta" y traer la "respuesta". 🎯  ¿Por qué usar Axios? (Para principiantes) Sin Axios: text Tu App → "Oye servidor, dame películas" ❌ (no sabe cómo comunicarse) Con Axios: text Tu App → Axios → "GET /películas" → Servidor → ✓ Películas recibidas ✅ Ventajas: Más fácil que el método nativo de JavaScript (fetch) Mejor manejo de errores Funciona en todos los navegadores Soporte para promesas (async/await) 🚀  PASO 1: INSTALACIÓN (La Parte Fácil) ¿Qué es NPM? NPM es como una  "tienda de aplicaciones"  para programadores. En lugar de ir a una tienda, escribes comandos en la terminal. Pasos concretos: Abre la terminal  (Command Prompt, Terminal, o la terminal de VS ...
Leer más

15-Tutorial: Crear Película en React con useState

  Introducción ¡Excelente! Ya tienes todos los métodos configurados para conectar tu aplicación React con el backend. Ahora vamos a implementar la funcionalidad para crear películas, lo que nos permitirá tener una lista inicial de películas al regresar al home. Paso 1: Importaciones necesarias Vamos al componente  AddMovie.js  y realizamos las importaciones: jsx import React , { useState } from 'react' ; import MovieService from '../services/movieService' ; Paso 2: Estado inicial de la película Dentro del componente funcional, antes del return, definimos el estado inicial: jsx const AddMovie = ( ) => { // Estado inicial de la película const initialMovieState = { title : '' , director : '' , genre : '' , synopsis : '' , year : 0 , rating : 0 } ; // Estado para manejar la película actual const [ movie , setMovie ] = useState ( initialMovieState ) ; // Estado par...
Leer más