1. ¿Por qué React?

Imagina Facebook. Miles de comentarios, likes actualizándose, notificaciones... Si hiciéramos esto con JS normal (Vanilla), el código sería un espagueti imposible de mantener.

React (creada por Facebook en 2013) cambia el juego. En lugar de manipular el DOM manualmente ("busca el botón y cámbiale el color"), tú defines ESTADOS ("el botón está activo") y React se encarga de pintar la pantalla automáticamente.
Es Declarativo, no Imperativo.

2. Componentes: Legos de UI

En React, todo es un componente. Un botón es un componente. El menú es un componente. Son funciones de JS que retornan HTML (JSX).
Regla de Oro: Los componentes siempre empiezan con Mayúscula (ej. boton ❌, Boton ✅).

Evaluación 1: Filosofía

¿Cuál es la principal ventaja de los componentes?

Reutilización y aislamiento.
Hacen que la web sea más lenta.
Permiten usar menos CSS.

3. JSX: HTML en tu JS

React usa una sintaxis llamada **JSX**. Parece HTML, pero vive dentro de JavaScript. 

function Tarjeta() {
    const titulo = "Hola React";
    return (
        <div className="card">
            <h1>{titulo}</h1>
            <p>Esto es JSX</p>
        </div>
    );
}
Nota: Usamos `className`, no `class` (porque `class` es una palabra reservada en JS). Las llaves `{}` nos permiten inyectar lógica de JS directamente.

4. Props: Pasando datos

¿Cómo le paso información de un padre a un hijo? Con **Props** (Propiedades). 

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

// Uso
<Saludo nombre="Cristian" />
<Saludo nombre="Ana" />
Es como pasar argumentos a una función. El componente `Saludo` es el mismo, pero muestra datos diferentes.

5. State (Estado): El corazón de React

Las props son de solo lectura. Si quieres que algo CAMBIE (interactividad), necesitas **Estado**.
Usamos el hook `useState`. 

import { useState } from 'react';

function Contador() {
    // [valorActual, funcionParaCambiarlo]
    const [cuenta, setCuenta] = useState(0);

    return (
        <button onClick={() => setCuenta(cuenta + 1)}>
            Clicks: {cuenta}
        </button>
    );
}
Cuando llamas a `setCuenta`, React detecta el cambio y **re-renderiza** solo esa parte de la pantalla. Magia.

Evaluación 2: Estado

¿Puedo modificar una variable de estado directamente (ej: `cuenta = 5`)?

Sí, funciona igual.
¡No! Debes usar la función "setter" (setCuenta) para que React se entere y actualice la vista.

6. El Virtual DOM

El DOM real es lento. React crea una copia en memoria (Virtual DOM).
Cuando cambias algo, React compara la copia nueva con la vieja ("Diffing"), calcula lo mínimo necesario que debe cambiar, y actualiza el DOM real de golpe.
Es como editar un borrador y luego pasar a limpio solo los párrafos que cambiaste, en lugar de reescribir todo el libro.

7. useEffect: Efectos Secundarios

¿Necesitas pedir datos a una API cuando carga la página? 

import { useEffect } from 'react';

useEffect(() => {
    // Código que corre al montar el componente
    fetch('/api/datos').then(...);
}, []); // El array vacío [] significa "Solo una vez al inicio"
Es el reemplazo moderno de `componentDidMount`.

8. Listas y Keys

Para mostrar listas usamos `.map()`. 

const frutas = ['Manzana', 'Pera'];

return (
    <ul>
        {frutas.map((fruta, index) => (
            <li key={index}>{fruta}</li>
        ))}
    </ul>
);
La `key` es vital. Ayuda a React a identificar qué ítem cambió, se agregó o se eliminó para optimizar el renderizado.

Evaluación 3: Listas

¿Qué pasa si olvido poner la propiedad `key` en una lista?

La aplicación se rompe fatalmente.
Funciona, pero React lanza una advertencia en consola y el rendimiento puede bajar al reordenar elementos.

9. Inputs y Formularios

En HTML, el input guarda su propio valor. En React, queremos que el ESTADO sea la única fuente de la verdad (Controlled Components). 

const [texto, setTexto] = useState("");

<input 
    value={texto} 
    onChange={(e) => setTexto(e.target.value)} 
/>
Así, React controla exáctamente qué hay en el input en cada milisegundo.

10. Hooks Personalizados

¿Tienes lógica que repites mucho? (ej: conectar a un chat).
Puedes crear tus propios Hooks: `useChat()`, `useForm()`.
Esto es el nivel experto de encapsulación. Separas la lógica de la UI completamente.

11. El Futuro (Next.js)

React es una librería de UI. Para crear apps completas con SEO, rutas y backend, hoy en día usamos "Meta-Frameworks" como Next.js.
Next.js está construido sobre React, pero le añade superpoderes de producción.

¡Dominas el Frontend Moderno!

Entender el flujo de datos unidireccional (Props hacia abajo, Eventos hacia arriba) es la clave de React.

Con Node y React, eres un Full Stack Developer. Puedes crear Ubers, Airbnbs o Facebooks. El límite es tu imaginación (y el tiempo).