Clase 15 — Taller: React + Git para la Actividad Grupal

Resumen Ejecutivo

Sesión práctica (taller, 1h 24m) de introducción a React y Git orientada a la actividad grupal. Se crea un proyecto React con Vite, se explican los conceptos fundamentales (componentes funcionales, JSX, props, estado, fragmentos), y se repasa el flujo básico de Git para trabajar en equipo. La sesión es eminentemente práctica con demostración en directo.

---

Conceptos Clave

• Vite: herramienta de construcción que soporta React, Vue, Svelte, etc. Más rápida que Create React App. Comando: npm create vite@latest
• Componente funcional: función JavaScript que retorna JSX. Unidad básica de construcción en React.
• JSX: sintaxis similar a HTML compilada a JavaScript. Más estricta que HTML: hay que cerrar todas las etiquetas, usar className en vez de class.
• Único elemento raíz: cada componente debe retornar un único elemento raíz. Usar <div> o fragmento <>...</> para envolver varios elementos.
• Expresiones en JSX: cualquier JavaScript debe ir entre llaves {}.
• Props: parámetros que se pasan a un componente como atributos. Son inmutables en el componente hijo.
• Estado (useState): valor que puede cambiar y que al hacerlo re-renderiza el componente.
• Git workflow básico: init → add → commit → branch → merge/rebase.

---

Desarrollo del Temario

1. Crear un proyecto React con Vite

npm create vite@latest demo-react
# Seleccionar: React → JavaScript
cd demo-react
npm install
npm run dev

Estructura generada:

demo-react/
  src/
    App.jsx        ← componente raíz
    main.jsx       ← punto de entrada
  index.html
  vite.config.js
  package.json

2. Componentes funcionales y JSX

Un componente es una función que retorna JSX:

// Componente simple
function MyButton() {
  return <button>Haz clic</button>;
}

// Componente que incluye otro componente
function App() {
  return (
    <div>
      <h1>Mi aplicación</h1>
      <MyButton />     {/* componente propio → etiqueta personalizada */}
    </div>
  );
}

3. Reglas de JSX

Regla	Detalle
Elemento raíz único	Todo el JSX retornado debe estar dentro de un único nodo
Fragmento	<>...</> si no queremos un <div> extra en el DOM
className	En JSX, los atributos CSS usan className en vez de class
Etiquetas cerradas	<br />, <input /> — siempre con / de cierre
Expresiones	JavaScript dentro de JSX va entre {}: {variable}, {fn()}

function Avatar({ user }) {
  return (
    <img
      className="avatar"
      src={user.imageUrl}     {/* variable entre llaves */}
      alt={user.name}
    />
  );
}

4. Props y estado

// Props: datos que pasan del padre al hijo (inmutables en el hijo)
function Greeting({ name }) {
  return <h1>Hola, {name}</h1>;
}

// Uso: <Greeting name="Pablo" />

// Estado: datos propios del componente que cambian con el tiempo
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);   // [valor, setter]
  return (
    <>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

Regla clave: al llamar al setter (setCount), React re-renderiza el componente automáticamente.

5. Git — flujo básico de trabajo en equipo

# Inicializar repositorio
git init
git add .
git commit -m "Initial commit"

# Crear rama de feature
git checkout -b feature/mi-componente

# Trabajar, añadir cambios
git add src/components/MiComponente.jsx
git commit -m "Add MiComponente"

# Integrar en main
git checkout main
git merge feature/mi-componente

# Subir al remoto (GitHub/GitLab)
git remote add origin <url>
git push -u origin main

Recomendación: una rama por feature/alumno, merge mediante Pull Request para revisión.

6. Actividad Grupal — React + Cypress

• El repositorio base usa Vite + React.
• Cypress se integra para pruebas E2E: npm install cypress --save-dev.
• Cada equipo debe implementar al menos una feature con su test Cypress correspondiente.
• Recursos recomendados: Quick Start de React (react.dev) y la guía sencilla de Git.

---

Preguntas Tipo Examen

1. ¿Qué es un componente funcional en React?
2. ¿Cuál es la diferencia entre class y className en JSX?
3. ¿Por qué cada componente React debe retornar un único elemento raíz? ¿Cómo se resuelve sin añadir un <div>?
4. ¿Qué son las props en React y cómo se diferencian del estado (useState)?
5. ¿Para qué sirve Vite en un proyecto React?
6. Describe los pasos básicos para crear una rama de feature en Git y fusionarla con main.