⚛️ ¿Qué es React?

📖 Definición

React es una biblioteca de JavaScript para construir interfaces de usuario desarrollada por Facebook (Meta). Utiliza arquitectura basada en componentes para UI reutilizable y Virtual DOM para actualizaciones eficientes de pantalla. La programación declarativa simplifica la gestión de UI complejas.

🎯 Analogía simple

Bloques LEGO

Componentes React = Bloques LEGO
├─ Combinar bloques pequeños
├─ Reutilizar los mismos bloques varias veces
├─ Construir estructuras complejas fácilmente
└─ Reemplazar bloques individuales según sea necesario

<House>
  <Roof />
  <Wall />
  <Door />
  <Window />
</House>

⚙️ Conceptos básicos

Estructura de componentes

// Componente funcional (enfoque moderno)
function Welcome({ name }) {
  return <h1>¡Hola, {name}!</h1>;
}

// Uso
<Welcome name="Juan" />

Gestión de estado

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Incrementar
      </button>
    </div>
  );
}

Hook useEffect

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);  // Ejecutar cuando userId cambia

  return <div>{user?.name}</div>;
}

💡 Ejemplos clave

Renderizado de listas

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Ejercicio', done: false },
    { id: 2, text: 'Estudiar', done: true }
  ]);

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

Manejo de formularios

function LoginForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Llamada API...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" onChange={handleChange} />
      <input name="password" type="password" onChange={handleChange} />
      <button type="submit">Iniciar sesión</button>
    </form>
  );
}

🤔 Preguntas frecuentes

Q1. ¿Por qué usar React?

// ❌ Vanilla JS (complejo)
const button = document.createElement('button');
button.addEventListener('click', () => {
  // Manipulación manual del DOM
});

// ✅ React (simple)
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Q2. ¿Qué es JSX?

R: Sintaxis JavaScript + XML para elementos React:

// JSX
const element = <h1 className="title">Hola</h1>;

// Convertido a
React.createElement('h1', { className: 'title' }, 'Hola');

Q3. ¿Qué son los Hooks?

R: Funciones que permiten usar estado y ciclo de vida en componentes funcionales:

useState    // Gestión de estado
useEffect   // Efectos secundarios (llamadas API)
useContext  // Acceso al contexto
useRef      // Acceso al DOM
useMemo     // Memoización
useCallback // Memoización de funciones

🎬 Resumen

• Componentes: Bloques de UI reutilizables
• Virtual DOM: Actualizaciones eficientes
• JSX: Sintaxis intuitiva
• Hooks: Componentes funcionales potentes

¡Construye aplicaciones interactivas con React! ⚛️