React
Explica cómo iniciar un proyecto React y seguir el flujo desde el HTML y createRoot hasta el componente raíz, los providers y el primer renderizado.
Un proyecto React para la web necesita dos grupos de piezas: React para describir la interfaz y herramientas externas para transformar, servir y empaquetar el código.
React no trae un bundler, un servidor de desarrollo ni una estructura obligatoria de proyecto. Para trabajar con módulos, JSX, TypeScript, CSS y assets normalmente utilizas:
source code
↓
transformación y bundling
↓
archivos que entiende el navegador
↓
React monta la interfaz en un rootUna herramienta común para aprender React sin introducir todavía un framework es Vite:
npm create vite@latest react-learning -- --template react-ts
cd react-learning
npm install
npm run devVite no forma parte de React. Proporciona el entorno de desarrollo y el build.
En una aplicación web normalmente instalas versiones compatibles de ambos paquetes:
{
"dependencies": {
"react": "^19.2.0",
"react-dom": "^19.2.0"
}
}Mantén react y react-dom alineados dentro de la misma línea compatible. Una combinación incorrecta puede producir errores difíciles de diagnosticar.
La documentación oficial vigente corresponde a React 19.2. Las ideas centrales de componentes, estado, pureza e identidad son durables; las APIs recientes se documentan aparte para que el notebook no dependa por completo de una versión concreta.
Un proyecto cliente necesita un nodo en el que React pueda administrar la interfaz:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Learning</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>El div no es la aplicación. Es el contenedor del root que React DOM utilizará.
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
import "./styles/global.css";
const container = document.getElementById("root");
if (!container) {
throw new Error("The #root element is missing from index.html");
}
const root = createRoot(container);
root.render(
<StrictMode>
<App />
</StrictMode>,
);createRoot: crea un root cliente asociado a un nodo del DOM.root.render: solicita que React muestre un árbol dentro de ese root.StrictMode: activa comprobaciones adicionales de desarrollo; no agrega un elemento visible al DOM.App: es una convención para el componente principal, no un nombre reservado.Una página puede tener más de un root, por ejemplo cuando React se integra gradualmente en una aplicación existente. En una SPA común suele existir uno.
No son exactamente lo mismo:
<div id="root">
↑
createRoot(container)
↑
root.render(<App />)
↑
árbol de componentessrc/
├── main.tsx
├── App.tsx
├── components/
│ ├── ProductCard.tsx
│ └── SearchField.tsx
├── features/
│ └── products/
├── lib/
├── styles/
│ └── global.css
└── assets/No existe una estructura universal. Para un proyecto pequeño, demasiadas carpetas crean ruido. Para una aplicación que crece, agrupar por feature puede mantener juntas las piezas que cambian por la misma razón.
El código dentro de src no es necesariamente lo que recibe el navegador:
El build final suele producir una carpeta como dist:
npm run buildEse comando genera archivos optimizados. No crea automáticamente una API, una base de datos ni un servidor backend.
El entorno de desarrollo prioriza:
El build de producción prioriza:
No midas rendimiento final únicamente con el servidor de desarrollo.
Fast Refresh intenta actualizar módulos durante el desarrollo preservando estado cuando es seguro hacerlo. No es una garantía semántica de React y no debe utilizarse para razonar sobre el comportamiento en producción.
Un cambio que altera la identidad de un componente puede reiniciar su estado. Recargar manualmente sigue siendo útil para comprobar el montaje real de la aplicación.
Create React App fue deprecado para proyectos nuevos. Para aprender React desde cero puedes utilizar una herramienta de build como Vite. Para productos que necesitan routing, data fetching, rendering de servidor o integración full-stack, la documentación oficial recomienda evaluar frameworks que proporcionen esas decisiones.
Esto no significa que debas aprender Next.js antes de entender React. Los fundamentos de componentes, rendering, estado y effects deben permanecer independientes del framework.
Permite inspeccionar:
eslint-plugin-react-hooks ayuda a detectar:
TypeScript comprueba contratos estáticos, pero no valida automáticamente datos de una API ni modifica el comportamiento de React.
Un framework puede aportar:
Esas capacidades pertenecen a la arquitectura del framework. React proporciona los fundamentos sobre los que se construyen.
document.getElementById("root")! sin verificar que el nodo existe.App.tsx.createRoot crea la relación con un contenedor; render muestra el árbol.react y react-dom?npm run build no crea un backend?createRoot?Componentes funcionales y pureza presenta la unidad principal con la que React representa una interfaz.