Introducción a React

Juno

¡Bienvenido al manual de React! Soy Juno, y me alegra que estés acá. React es una herramienta para construir interfaces de usuario, y lo primero que hay que saber es que React es JavaScript de principio a fin. Si el JavaScript todavía se siente inestable, es completamente normal, y vale la pena sentirte cómodo con eso antes de seguir.

Vamos a avanzar de a una idea pequeña por vez: un pedazo de la página por acá, un poco de datos por allá, y de a poco vas a ver cómo encajan entre sí. Ninguna pregunta acá es demasiado básica.

Si todavía no hiciste el manual de JavaScript, empezá por ahí y después volvé. React te va a hacer mucho más sentido una vez que lo hagas.

Juno

Bienvenido al manual de React. Soy Ace, y me gusta ir directo al grano. React es una forma de organizar una interfaz de usuario alrededor de componentes: piezas pequeñas y autocontenidas que construyes una vez y reutilizas, cada una con su propia porción de datos.

Vamos a mantenernos prácticos todo el tiempo: leer la idea, construir un componente con ella, conectarle algo de estado, verlo reaccionar a un clic. React es una librería que se aprende usándola, así que así la vamos a aprender.

Juno

Bienvenido al manual de React. Soy Sol, y te voy a guiar a través del modelo mental y de los puntos más delicados. Esto es lo esencial: describes cómo debería verse la UI para un conjunto de datos dado, y React vuelve a renderizar cuando esos datos cambian. Si entiendes bien ese modelo, la mayor parte de React se desprende de ahí.

Parte de la habilidad está en saber cuándo React realmente vale la pena. Te da mucho cuando una UI tiene estado real que administrar, y te cuesta una complejidad que no siempre necesitas. Espera encontrarte con el modelo de renderizado, las reglas de los hooks y los lugares donde la abstracción se resquebraja. Lee con atención y cuestiona todo, incluido lo que yo te diga.

En el momento en que una página se vuelve interactiva, aparece un problema. En JavaScript puro, tienes que meterte en la página, buscar el elemento que quieres y actualizarlo a mano cada vez que tus datos cambian, manteniendo tú mismo la pantalla y los datos sincronizados. Eso funciona para uno o dos botones. Pero se vuelve frágil rápidamente a medida que la página crece, porque cada pieza de estado tiene su propio conjunto de actualizaciones manuales que hay que recordar. React invierte esta lógica: tú describes cómo debería verse la UI para tus datos actuales, y React se encarga de las actualizaciones cuando esos datos cambian.

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

¿Qué es un componente?

Un componente es una función que devuelve una parte de tu interfaz. Las pantallas más grandes se construyen combinando muchos componentes entre sí. Componentes explica cómo escribirlos y combinarlos.

Si ya pasaste por el manual de JavaScript, ya hiciste a mano la versión difícil de todo esto. El capítulo de DOM es donde aprendiste a leer y modificar elementos de la página, y el capítulo de eventos es donde lograste que la página respondiera a un clic o a una tecla presionada. React está construido justamente sobre esas ideas. Te da una forma más limpia de expresarlas a medida que tu aplicación crece.

Algo que conviene tener muy claro: 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 cualquier otro lado. No hay atajo posible. Si todavía no trabajaste el manual de JavaScript, empieza por ahí, porque el tiempo invertido en afianzar los fundamentos rinde frutos directamente acá. También vale la pena leer qué es un framework para tener el panorama más amplio de dónde encaja una librería como React y qué hace por ti.

Este es el alcance del manual, para que sepas qué vas a encontrar. Empieza explicando qué es React, de dónde viene y cómo poner a andar un proyecto con Vite en tu propia máquina. A partir de ahí: construir y combinar componentes, escribir markup con JSX, darles estilo, pasar datos hacia abajo con props, renderizar listas con keys, guardar datos que cambian en el estado, responder a eventos, renderizar condicionalmente, manejar formularios, compartir estado entre componentes, ejecutar efectos secundarios con useEffect, obtener datos de un servidor, acceder al DOM con refs, y el conjunto más amplio de hooks. Cierra con cómo pensar en React, cómo hacer una interfaz accesible, y un mapa de lo que viene después. Eso es el núcleo al que recurres en casi cualquier aplicación de React. Si dejas estos fundamentos sólidos, el resto es una subida mucho más corta.

Un segundo conjunto de capítulos retoma justo donde termina el anterior, para cuando los necesites: patrones reutilizables de componentes basados en children, contexto y hooks personalizados; enrutamiento con React Router, desde layouts anidados hasta parámetros de URL y rutas protegidas; cómo renderiza React y qué implica eso para el rendimiento; y autenticación y TypeScript. Siguen las mismas tres guías y el mismo selector de nivel, y acompañan al curso Advanced React de Scrimba de la misma forma en que estos capítulos acompañan al curso gratuito. Más allá de lo básico es el mapa que te lleva hasta ahí.

JunoReact sigue siendo JavaScript Acá va algo reconfortante sobre React: no existe un lenguaje separado de React que tengas que aprender. Un componente es una función de JavaScript, las props son sus argumentos, y el estado es un valor que guardas.

Cada vez que React te resulte confuso, generalmente ayuda preguntarte qué está haciendo el JavaScript puro por debajo, porque eso es todo lo que hay en realidad.

JunoReact sigue siendo JavaScript Ten esto presente a medida que avanzas: React suma 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 su trabajo de siempre.

Cuando un componente se comporta mal, leerlo primero como JavaScript común te va a sacar del apuro más veces 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 su estado que devuelve una descripción de la UI; el trabajo de React es reconciliar esa descripción con el DOM de forma eficiente.

Casi todos los problemas típicos —closures obsoletas, re-renderizados innecesarios, efectos que se disparan cuando no lo esperabas— vienen de olvidar que la función se vuelve a ejecutar en cada renderizado. Si mantienes el modelo de ejecución de JavaScript presente, el comportamiento de React deja de sorprenderte.

Conoce a tus guías

Este manual está presentado por tres guías, y tú eliges cuál te va a acompañar. El material es el mismo para todos; tu guía define el tono en que se cuenta y, en las páginas que se adaptan, qué tan a fondo se explora cada sección.

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

Cuando estés listo, el manual arranca en serio. El próximo capítulo, Qué es React, cubre qué es React realmente, el problema que fue creado para resolver, y cómo encaja junto al JavaScript que ya conoces.

Take the React course on ScrimbaBuild six React projects in your browser, free, with Bob Ziroll.→