Publicado · en mejora
Framework · Desde 2013
React es una biblioteca de JavaScript para crear interfaces con componentes: describes cómo debe verse la UI y React actualiza solo lo que cambia.
React es una biblioteca de interfaces de usuario creada en Meta (entonces Facebook) y publicada como código abierto en 2013. La pantalla se divide en pequeños componentes de función, y cada uno describe con JSX cómo debe verse según las props que recibe y el estado que guarda. Cuando los datos cambian, React compara el nuevo resultado con el anterior y aplica al DOM solo las diferencias reales.
React destaca en pantallas muy interactivas, llenas de botones, formularios y listas. Se usa en aplicaciones de una sola página, paneles de control, herramientas de administración y sistemas de diseño, y el mismo modelo mental sirve para crear sitios con renderizado en servidor usando frameworks como Next.js o apps móviles con React Native. Su amplio ecosistema de enrutadores, bibliotecas de obtención de datos y herramientas de pruebas permite elegir y combinar las piezas necesarias.
Si estás empezando, sigue el Quick Start y el tutorial del Tres en raya en react.dev. La documentación oficial recomienda un framework como Next.js para productos nuevos, pero para aprender es más fácil entender un proyecto sencillo creado con Vite. Dominar antes el JavaScript moderno, como los métodos de arrays, la desestructuración y los módulos, hace que JSX y los hooks resulten mucho más claros.
Divide la interfaz en componentes de función independientes, pasa datos con props y combina piezas pequeñas para formar pantallas completas.
En lugar de modificar el DOM a mano, describes en JSX el resultado para el estado actual y React actualiza solo lo que cambió.
Hooks como useState, useEffect, useRef y useContext gestionan estado, efectos secundarios, referencias al DOM y datos compartidos dentro de funciones normales.
Con Next.js, React Router, TanStack Query, React Native y otras herramientas probadas puedes trabajar igual desde la web hasta el móvil.
Las herramientas de React funcionan sobre Node.js. Instala la versión LTS desde nodejs.org y comprueba que node y npm muestran su versión.
node --version && npm --versionUsa la plantilla react-ts de Vite para crear un proyecto de React con TypeScript. Para JavaScript sin tipos, usa la plantilla react.
npm create vite@latest my-app -- --template react-tsEntra en la carpeta del proyecto, instala las dependencias e inicia el servidor de desarrollo. Abre en el navegador la dirección que aparece en la terminal (por defecto http://localhost:5173).
cd my-app && npm install && npm run devLa función App de src/App.tsx es un componente que devuelve JSX con lo que se va a mostrar. Crea un estado count con el hook useState, y al pulsar el botón setCount cambia su valor. Cuando el estado cambia, React vuelve a llamar a App y actualiza solo el número en pantalla. Mientras el servidor de desarrollo está activo, el navegador se actualiza al instante cada vez que guardas un archivo.
src/App.tsx
import { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
return (
<main>
<h1>Hello, React!</h1>
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
</main>
);
}
npm create vite@latest my-app -- --template react-ts && cd my-app && npm install && npm run devSeis capítulos que te llevan desde la instalación hasta las ideas clave de React.
Haz preguntas, comparte tu experiencia e intercambia opiniones sobre React.
Todavía no hay debates. Empieza el primero.
0 comentarios
Iniciar sesión · Inicia sesión para dejar un comentario.
Sé el primero en comentar.