React: componentes a apps

Aprende React moderno con hooks, routing, Context API y optimización de rendimiento. Incluye proyecto dashboard completo.

ReactfrontendhooksContext APIrendimiento

Requisitos previos

JavaScript: cero a avanzadoPrincipiante

Lo que aprenderás

Crear componentes funcionales con props y children
Usar hooks: useState, useEffect, useMemo, useCallback
Implementar routing con React Router
Gestionar estado global con Context API
Optimizar rendimiento con memoización

Introducción a React

React es una biblioteca de JavaScript desarrollada por Meta para construir interfaces de usuario. Su modelo se basa en componentes reutilizables y un flujo de datos unidireccional. La versión 18 introdujo concurrencia, y React 19 trae hooks de servidor y acciones.

# Crear un proyecto con Vite (recomendado)
npm create vite@latest mi-app -- --template react-ts
cd mi-app
npm install
npm run dev

# O con Next.js (full-stack)
npx create-next-app@latest mi-app --typescript --tailwind

JSX

JSX es azúcar sintáctico sobre React.createElement. Permite escribir HTML dentro de JavaScript de forma expresiva.

// JSX se compila a React.createElement(...)
function Saludo({ nombre }: { nombre: string }) {
  const esAdmin = nombre === "admin";
  return (
    <div className="saludo">
      <h1>Hola, {nombre}</h1>
      {esAdmin && <span className="badge">Admin</span>}
      <p>Hora: {new Date().toLocaleTimeString()}</p>
    </div>
  );
}

// Equivalente sin JSX (no uses esto directamente)
React.createElement("div", { className: "saludo" },
  React.createElement("h1", null, "Hola, ", nombre)
)