Introducción a React

Juno

¡Bienvenida al manual de React! Soy Juno, y me alegra que estés aquí. React es una herramienta para construir interfaces de usuario, y lo importante que debes saber de entrada es que React es JavaScript de principio a fin. Si JavaScript todavía se siente inestable, es completamente normal, y vale la pena sentirte cómoda ahí primero.

Lo vamos a tomar de a una idea pequeña por vez: un pedazo de la página aquí, un poco de datos allá, y poco a poco verás cómo encajan. Aquí no hay nada tan básico que no valga la pena preguntar.

Si aún no hiciste el manual de JavaScript, empieza por ahí y vuelve. React tendrá mucho más sentido cuando lo hagas.

Juno

Bienvenida al manual de React. Soy Ace, y me gusta mantener las cosas prácticas. React es cómo organizas una interfaz de usuario alrededor de componentes: piezas pequeñas y autónomas que construyes una vez y reutilizas, cada una con su propio trozo de datos.

Nos mantenemos prácticos todo el camino: lee la idea, construye un componente con ella, conecta algo de estado, mira cómo reacciona a un clic. React es una librería que aprendes usándola, así que así es como la aprenderemos.

Juno

Bienvenida al manual de React. Soy Sol, y te guiaré a través del modelo mental y los detalles complicados. Aquí está lo esencial: describes cómo se ve la UI para un conjunto dado de datos, y React se re-renderiza cuando esos datos cambian. Si entiendes bien ese modelo, la mayor parte de React se deduce de él.

Parte de la habilidad es saber cuándo React vale la pena. Te compra mucho una vez que una UI tiene estado real que gestionar, y te cuesta complejidad que no siempre necesitas. Espera el modelo de renderizado, las reglas de hooks, y los lugares donde la abstracción se filtra. Lee con cuidado y cuestiona todo, incluyéndome a mí.

El momento en que una página se vuelve interactiva, surge un problema. En JavaScript vanilla llegas a la página, encuentras el elemento que quieres y lo actualizas manualmente cada vez que tus datos cambian, manteniendo la pantalla y los datos sincronizados tú mismo. Eso funciona para un botón o dos. Se vuelve frágil rápidamente conforme la página crece, porque cada pieza de estado tiene su propio conjunto de actualizaciones manuales que recordar. React invierte esto: describes cómo se ve la UI para tus datos actuales, y React maneja las actualizaciones cuando esos datos cambian.

React es una librería de JavaScript para construir interfaces de usuario a partir de componentes, y compones esas piezas en pantallas completas.

¿Qué es un componente?

Un componente es una función que devuelve un pedazo de tu UI. Las pantallas más grandes se construyen componiendo muchos de ellos juntos. Componentes cubre cómo escribirlos y combinarlos.

Si pasaste por el manual de JavaScript, ya hiciste la versión difícil de esto manualmente. El capítulo sobre el DOM es donde aprendiste a leer y cambiar elementos en la página, y el capítulo sobre eventos es donde hiciste que la página responda a un clic o una pulsación de tecla. React está construido exactamente sobre esas ideas. Te da una forma más limpia de expresarlas conforme tu app crece.

Algo en lo que hay que ser firme: React es JavaScript, de punta a punta. Los componentes son funciones, las props son argumentos, el estado son variables, y la lógica dentro de un componente es el mismo lenguaje que escribes en todas partes. No hay atajo alrededor de eso. Si no has trabajado el manual de JavaScript, empieza ahí, porque el tiempo que inviertas en reforzar los fundamentos se traduce directamente aquí. También vale la pena leer qué es un framework para ver la imagen más amplia de dónde se posiciona una librería como React y qué hace por ti.

Aquí está el alcance, para que sepas qué cubre este manual. Empieza con qué es React, de dónde vino, y cómo poner un proyecto en marcha con Vite en tu propia máquina. De ahí en adelante: construir y componer componentes, escribir markup con JSX, darles estilo, pasar datos hacia abajo con props, renderizar listas con keys, mantener datos que cambian en estado, responder a eventos, renderizar condicionalmente, manejar formularios, compartir estado entre componentes, ejecutar efectos secundarios con useEffect, traer datos de un servidor, alcanzar el DOM con refs, y el conjunto más amplio de hooks. Cierra con pensar en React, hacer una interfaz accesible, y un mapa de lo que viene después. Ese es el núcleo que necesitas en casi toda app de React. El ecosistema más amplio, enrutamiento, Next.js, y despliegue, se señaliza en el capítulo final en lugar de enseñarse aquí. Consolida estos fundamentos sólidos y el resto es un ascenso mucho más corto.

JunoReact sigue siendo JavaScript Aquí hay algo reconfortante sobre React: no hay un lenguaje React separado que aprender. Un componente es una función de JavaScript, las props son sus argumentos, y el estado es un valor que almacenas. Cada vez que React se siente confuso, normalmente ayuda preguntarse qué está haciendo el JavaScript vanilla debajo, porque eso es todo lo que hay.

JunoReact sigue siendo JavaScript Ten esto en mente conforme avanzas: React añade un pequeño número de ideas nuevas —componentes, JSX, props, estado, hooks— sobre el JavaScript que ya escribes. El resto son funciones, arrays, objetos, y eventos haciendo sus trabajos habituales. Cuando un componente se comporta mal, leerlo como JavaScript ordinario primero te sacará del apuro más a menudo que buscar una respuesta específica de React.

JunoReact sigue siendo JavaScript La abstracción es delgada a propósito. Un componente es una función de sus props y estado que devuelve una descripción de la UI; el trabajo de React es reconciliar esa descripción con el DOM eficientemente. Casi cada trampa —closures obsoletos, re-renders innecesarios, efectos que se activan cuando no esperabas— viene de olvidar que la función se ejecuta de nuevo en cada render. Mantén el modelo de ejecución de JavaScript en tu cabeza y el comportamiento de React deja de ser sorprendente.

Conoce a tus guías

Este manual está alojado por tres guías, y tú eliges cuál te acompaña. El material es el mismo para todos; tu guía establece la voz con la que se cuenta, y en las páginas que se adaptan, qué tan profundo va cada sección.

• Juno enseña el nivel principiante: cálida y paciente, analogías claras, nada asumido.
• Ace enseña el nivel intermedio: práctico y construyendo primero, directo a lo que realmente haces.
• Sol enseña el Deep Dive: el mecanismo, los compromisos, y los detalles de producción que todos los demás omiten.

Cambia de guía en cualquier momento desde el selector en la parte superior de cualquier página, o abre Preferencias en la esquina inferior derecha para cambiar tu guía, idioma, o tamaño de fuente.

Cuando estés listo, el manual comienza en serio. El próximo capítulo, ¿Qué es React?, cubre qué es React realmente, el problema para el que fue construido, y cómo se ajusta junto con el JavaScript que ya conoces.

Toma el curso de React en ScrimbaConstruye seis proyectos de React en tu navegador, gratis, con Bob Ziroll.→