# Introducción a React
Semestre 01, 2026



## Problemática


### DOM manual

Imaginemos una tabla de productos con filtro y búsqueda

* El usuario escribe → actualizar el texto del input
* La tabla se filtra → re-renderizar las filas
* Se marca "solo en stock" → volver a filtrar

Con DOM puro: actualizaciones manuales, sincronización difícil, código frágil


### El problema en código

```js
const input = document.getElementById('busqueda');
const filas = document.querySelectorAll('#tabla tr');

input.addEventListener('input', () => {
  const valor = input.value.toLowerCase();

  filas.forEach(fila => {
    const visible = fila.textContent.toLowerCase().includes(valor);
    fila.style.display = visible ? '' : 'none';
  });
});
```

Con más filtros el código crece, se duplica y se rompe fácilmente

Cada cambio en el DOM hay que pedirlo manualmente


### Componentes reactivos

* Describe cómo debe verse la UI según el estado
* React se encarga de actualizar el DOM automáticamente
* Un solo lugar para manejar cada dato


React hace que el estado de la UI sea predecible.


### Definición

* Biblioteca JavaScript para construir interfaces de usuario
* Creada por Meta (Facebook) en 2013
* Basada en componentes reutilizables
* Reactiva: la UI se actualiza cuando cambian los datos
* No es un framework completo — solo la capa de vista



## Programación Orientada a Componentes


### Componentes

Un componente es una pieza reutilizable de UI

* Tiene su propia lógica
* Tiene su propia apariencia
* Se puede combinar con otros componentes

Pensémoslo como una función: recibe datos → devuelve HTML


### Comparación con POO

| Concepto POO | Concepto React |
|---|---|
| Clase | Componente |
| Instancia | Elemento renderizado |
| Atributos | Props |
| Estado interno | State |
| Método | Función dentro del componente |


### Árbol de componentes

Toda aplicación React es un árbol

```
App
├── Header
│   └── NavBar
├── ProductList
│   ├── SearchBar
│   └── ProductTable
│       ├── ProductRow
│       └── ProductRow
└── Footer
```

* Los componentes padres pasan datos a los hijos
* Los hijos notifican a los padres mediante funciones


### Un componente básico

```jsx
function Saludo() {
  return <h1>Hola, estudiante</h1>;
}
```

* Es una función JavaScript normal
* Devuelve JSX (HTML dentro de JS)
* El nombre siempre empieza con mayúscula


### JSX

JSX = JavaScript + XML

```jsx
const nombre = "Ana";

function Saludo() {
  return (
    <div>
      <h1>Hola, {nombre}</h1>
      <p>Bienvenida al curso</p>
    </div>
  );
}
```


* Las expresiones JS van entre `{ }`
* Se compila a `React.createElement(...)` internamente
* Obliga a tener un solo elemento raíz



## Props


### Definición

Propiedades que el padre pasa al hijo

```jsx
function Saludo({ nombre }) {
  return <h1>Hola, {nombre}</h1>;
}

// Uso:
<Saludo nombre="María" />
<Saludo nombre="Carlos" />
```

* Son de solo lectura — el hijo no las modifica
* Permiten que el mismo componente tenga distintos datos


### Flujo de datos: una sola dirección

```
App  →  ProductList  →  ProductRow
     props               props
```

* Los datos fluyen hacia abajo (parent → child)
* Un hijo nunca modifica las props del padre
* Esto hace el flujo predecible y fácil de depurar


### Props con distintos tipos

```jsx
function Tarjeta({ titulo, precio, disponible }) {
  return (
    <div>
      <h2>{titulo}</h2>
      <p>Q{precio}</p>
      {disponible && <span>En stock</span>}
    </div>
  );
}

// Uso:
<Tarjeta
  titulo="Laptop"
  precio={3500}
  disponible={true}
/>
```


### Error común: modificar props

```jsx
// ❌ MAL — nunca hagas esto
function Componente({ nombre }) {
  nombre = "otro valor"; // Error: props son de solo lectura
  return <p>{nombre}</p>;
}

// ✅ BIEN — usa state si necesitas modificar datos
function Componente({ nombreInicial }) {
  const [nombre, setNombre] = useState(nombreInicial);
  return <p>{nombre}</p>;
}
```



## Eventos


### Manejo de eventos

Los eventos en React son similares a los del DOM, con dos diferencias:

* Los nombres usan camelCase: `onClick`, `onChange`, `onSubmit`
* Se pasa una función, no un string

```jsx
// HTML puro
<button onclick="manejarClic()">Clic</button>

// React
<button onClick={manejarClic}>Clic</button>
```


### Definir un manejador de evento

```jsx
function Boton() {
  function handleClick() {
    alert('¡Botón presionado!');
  }

  return (
    <button onClick={handleClick}>
      Presionarme
    </button>
  );
}
```

* El manejador se define dentro del componente
* Se pasa como referencia — `handleClick`, no `handleClick()`


### Eventos comunes

| Evento | Cuándo se dispara |
|---|---|
| `onClick` | Clic en cualquier elemento |
| `onChange` | Cambio en un input, select o checkbox |
| `onSubmit` | Envío de un formulario |
| `onKeyDown` | Tecla presionada |
| `onMouseEnter` | El cursor entra al elemento |


### El objeto de evento

```jsx
function Input() {
  return (
    <input
      onChange={(e) => {
        console.log(e.target.value); // texto ingresado
        console.log(e.target.type);  // "text", "checkbox"...
      }}
    />
  );
}
```

* `e` (o `event`) es el evento del navegador
* `e.target` es el elemento que disparó el evento
* En formularios: `e.preventDefault()` evita el reload de la página



## State


### Definición

Datos que cambian con el tiempo

```jsx
import { useState } from 'react';

function Contador() {
  const [conteo, setConteo] = useState(0);

  return (
    <div>
      <p>Conteo: {conteo}</p>
      <button onClick={() => setConteo(conteo + 1)}>
        Incrementar
      </button>
    </div>
  );
}
```


* `useState` devuelve `[valor, función para cambiar el valor]`
* Cuando el state cambia, React re-renderiza el componente


### Props vs State

| | Props | State |
|---|---|---|
| ¿Quién lo define? | El componente padre | El propio componente |
| ¿Se puede cambiar? | No (solo lectura) | Sí, con la función setter |
| ¿Para qué sirve? | Recibir datos | Guardar datos que cambian |
| Ejemplo | `nombre="Ana"` | `const [activo, setActivo]` |


### Cuándo usar state

Hagámonos estas preguntas:

1. ¿El dato cambia con el tiempo o la interacción del usuario?
2. ¿No puede calcularse desde props u otro state?
3. ¿El padre no lo controla?

Si la respuesta es sí a todas → es state


### State y eventos juntos

```jsx
function InputControlado() {
  const [texto, setTexto] = useState('');

  return (
    <div>
      <input
        value={texto}
        onChange={(e) => setTexto(e.target.value)}
      />
      <p>Escribiste: {texto}</p>
    </div>
  );
}
```

* El input es controlado — su valor viene del state
* `onChange` actualiza el state → React re-renderiza → el input muestra el valor nuevo
* React siempre sabe qué hay en el input



## Tipos de componentes


### Funcionales vs Clase

Existen dos formas de escribir componentes en React


```jsx
// Funcional — estándar actual
function Saludo({ nombre }) {
  return <h1>Hola, {nombre}</h1>;
}
```


```jsx
// Clase — forma antigua (pre-2019)
class Saludo extends React.Component {
  render() {
    return <h1>Hola, {this.props.nombre}</h1>;
  }
}
```


* Los funcionales son más simples y son el estándar hoy
* Los de clase siguen existiendo en código legacy — es importante reconocerlos


### State en componentes de clase


```jsx
class Contador extends React.Component {
  constructor(props) {
    super(props);
    this.state = { conteo: 0 };
  }

  render() {
    return (
      <div>
        <p>Conteo: {this.state.conteo}</p>
        <button onClick={() => this.setState({ conteo: this.state.conteo + 1 })}>
          Incrementar
        </button>
      </div>
    );
  }
}
```


* Se usa `this.state` para leer y `this.setState()` para actualizar
* Es más verboso — por eso se prefieren los funcionales con `useState`


### Presentacionales vs Contenedor

Una separación útil para organizar el código:

| Tipo | Responsabilidad |
|---|---|
| Presentacional | Solo renderiza UI — recibe props, devuelve JSX |
| Contenedor | Maneja lógica y estado — pasa datos a los presentacionales |

No es una regla estricta, pero ayuda a mantener los componentes pequeños y enfocados


### Componente presentacional

```jsx
// Solo se encarga de mostrar — no sabe de dónde vienen los datos
function TarjetaUsuario({ nombre, email, avatarUrl }) {
  return (
    <div className="tarjeta">
      <img src={avatarUrl} alt={nombre} />
      <h2>{nombre}</h2>
      <p>{email}</p>
    </div>
  );
}
```

* No tiene state propio
* Fácil de reutilizar y testear
* Solo depende de sus props


### Componente contenedor

```jsx
// Se encarga de obtener y manejar los datos
function PerfilUsuario({ userId }) {
  const [usuario, setUsuario] = useState(null);

  // lógica para cargar el usuario...

  if (!usuario) return <p>Cargando...</p>;

  return <TarjetaUsuario
    nombre={usuario.nombre}
    email={usuario.email}
    avatarUrl={usuario.avatar}
  />;
}
```

* Maneja state y lógica
* Delega la presentación a `TarjetaUsuario`
* Si cambia el diseño, solo se toca el presentacional



## Principios clave


* Divide la UI en componentes pequeños y reutilizables
* Los datos fluyen en una sola dirección
* No almacenes state que puede calcularse
* El state vive en el ancestor común de quienes lo necesitan