Misión 1 · Lección 1

Introducción a React

Objetivos

• Comprender qué es React y sus ventajas.
• Configurar un proyecto inicial con Vite.
• Explorar la estructura básica de un proyecto React.
• Crear y utilizar el primer componente.

¿Qué es React?

• Librería de JavaScript para construir interfaces de usuario.
• Basada en componentes reutilizables.
• Usa un flujo de datos unidireccional (padre → hijo).
• Declarativa: describes el qué, React gestiona el cómo.

Requisitos previos

• Node.js 18+ y npm o pnpm.
• Editor de código: VS Code recomendado.
• Navegador moderno: Chrome, Firefox o Edge.

Crear un proyecto con Vite

npm create vite@latest mi-app -- --template react
cd mi-app
npm install
npm run dev

Abre la URL que muestra la terminal para ver tu aplicación en el navegador 🚀.

Estructura básica

• index.html — punto de entrada del DOM.
• src/main.jsx — arranca React y monta el árbol de componentes.
• src/App.jsx — componente raíz de la aplicación.
• src/assets/ — recursos estáticos (imágenes, estilos, etc.).

Misión 1 · Lección 4

Componentes Funcionales y de Clase

Objetivos

• Comprender qué es un componente en React.
• Distinguir entre componentes funcionales y de clase.
• Aprender sobre jerarquía, estado y propiedades (props).
• Reconocer la importancia de la componentización y la reutilización.

¿Qué es un Componente?

Los componentes son la piedra angular de cualquier aplicación en React. Representan piezas independientes y reutilizables de la interfaz de usuario (UI), que se combinan para formar interfaces completas.

React se basa en la idea de descomponer la UI en pequeños bloques con su propia lógica y estructura.

Concepto de Componentización

• Proceso de dividir la interfaz en componentes reutilizables y modulares.
• Cada componente maneja su propia lógica, estado y estilo.
• Facilita el mantenimiento, la escalabilidad y las pruebas.

Ejemplo:

• <ProductCard /> — muestra información de un producto.
• <ShoppingCart /> — gestiona los artículos seleccionados.
• <UserProfile /> — muestra los datos del usuario.

Jerarquía de Componentes

En React, los componentes se organizan en un árbol jerárquico donde los padres contienen hijos.

• Los datos fluyen de los padres hacia los hijos a través de props.
• Un componente puede contener múltiples componentes hijos.

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

Tipos de Componentes en React

• Componentes Funcionales: basados en funciones de JavaScript.
• Componentes de Clase: basados en clases ES6, con ciclo de vida y estado interno.

Ambos pueden hacer lo mismo, pero los componentes funcionales son el estándar actual con Hooks.

Ejemplo de Componente Funcional

export default function Saludo() {
  return <h2>¡Hola desde un componente funcional!</h2>;
}

• Simple y fácil de escribir.
• Puede usar Hooks para manejar estado y efectos secundarios.
• Ideal para la mayoría de los casos en React moderno.

Ejemplo de Componente de Clase

import React, { Component } from "react";

class Saludo extends Component {
  render() {
    return <h2>¡Hola desde un componente de clase!</h2>;
  }
}

export default Saludo;

• Antes de los Hooks, eran necesarios para manejar el estado y el ciclo de vida.
• Aún se usan en proyectos antiguos o con ciertas bibliotecas.

Reutilización y Modularidad

Una de las grandes ventajas de React es la posibilidad de reutilizar componentes.

• Permite construir interfaces consistentes y uniformes.
• Reduce la duplicación de código.
• Promueve la modularidad del proyecto.

Ejemplo: un componente <BotonEnviar /> puede reutilizarse en varios formularios.

Props y Estado

• Props: datos que el componente padre pasa al hijo.
• Estado (State): datos internos del componente que pueden cambiar con el tiempo.

function Saludo({ nombre }) {
  return <h3>Hola, {nombre}!</h3>;
}

// Uso
<Saludo nombre="Ana" />

Las props son inmutables, mientras que el estado cambia con funciones como setState o useState.

Comparación de Tipos

Conclusión

• Los componentes son los bloques fundamentales de React.
• Permiten dividir la UI en partes pequeñas, reutilizables y fáciles de mantener.
• Los componentes funcionales son el enfoque moderno gracias a los Hooks.
• Comprender su estructura es esencial para crear aplicaciones escalables y organizadas.

Ejercicio Guiado 🛠️

1. Crea un componente funcional <Saludo /> que reciba una prop nombre.
2. Crea un componente de clase <Contador /> que tenga un estado con un número y un botón para incrementarlo.
3. Renderiza ambos componentes dentro de App.jsx.
4. Compara las diferencias entre el manejo del estado y las props.

Tu primer componente

// src/App.jsx
export default function App() {
  return <h1>¡Hola, React!</h1>;
}

// src/main.jsx
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <React.StrictMode><App /></React.StrictMode>
);

JSX básico

• JSX permite escribir HTML dentro de JavaScript.
• Usa className en lugar de class.
• Expresiones dinámicas entre { }.

const nombre = "Ana";
return <h2>Hola, {nombre}</h2>;

Props (propiedades)

function Saludo({ nombre }) {
  return <p>Hola, {nombre}!</p>;
}

export default function App() {
  return <Saludo nombre="Mundo" />;
}

Las props son datos que fluyen del padre al hijo y son de solo lectura.

Estado con useState

import { useState } from "react";

export default function Contador() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clics: {count}
    </button>
  );
}

El estado permite que la UI se actualice cuando cambian los datos.

Listas y condicionales

const frutas = ["🍎", "🍌", "🍊"];
return (
  <ul>{frutas.map((f, i) => <li key={i}>{f}</li>)}</ul>
);

{frutas.length === 0 
 ? <p>Sin datos</p> 
 : <p>Hay {frutas.length} frutas</p>}

Ejercicio guiado 🛠️

1. Crea un proyecto con Vite y arráncalo.
2. Edita App.jsx para mostrar un saludo con tu nombre.
3. Crea un componente <Contador /> usando useState.
4. Renderiza una lista de 3 tareas y muéstralas en pantalla.