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 importante que tenés que saber desde el principio es que React es JavaScript de principio a fin. Si el JavaScript todavía te resulta un poco incierto, es completamente normal, y vale la pena sentirte cómodo ahí primero.

Vamos a ir paso a paso: un pedacito de la página acá, un poco de datos allá, y poco a poco vas a ver cómo encajan. Nada de lo que cubramos es demasiado básico como para preguntar.

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

Juno

Bienvenido al manual de React. Soy Ace, y me gusta ir al grano. React es cómo organizas una interfaz de usuario alrededor de componentes: piezas pequeñas y autosuficientes que construís una sola vez y reutilizás, cada una con su propio pedazo de datos.

Nos mantenemos prácticos todo el tiempo: leés la idea, construís un componente con ella, enchufás un poco de estado, ves cómo reacciona a un click. React es una librería que aprendés usándola, así que así es cómo vamos a aprenderla.

Juno

Bienvenido al manual de React. Soy Sol, y te voy a guiar a través del modelo mental y los detalles que pueden complicarte la vida. El corazón del asunto es este: describís cómo debería verse la UI para un conjunto de datos dado, y React re-renderiza cuando esos datos cambian. Si entendés bien ese modelo, el resto de React se deriva de ahí.

Parte de la habilidad es saber cuándo React vale la pena. Te compra mucho cuando una UI tiene estado real que manejar, y te cuesta complejidad que no siempre necesitás. Esperá encontrarte con el modelo de renderizado, las reglas de hooks, y los lugares donde la abstracción se filtra. Leé atento y cuestionalo todo, incluyéndome a mí.

En el momento en que una página se vuelve interactiva, aparece un problema. En JavaScript puro, buscás el elemento que querés en la página, y lo actualizás a mano cada vez que tus datos cambian, manteniendo sincronizados la pantalla y los datos 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 para recordar. React invierte esto: describís cómo debería verse 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 componés 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 completaste el manual de JavaScript, ya hiciste la versión difícil de esto a mano. El capítulo DOM es donde aprendiste a leer y cambiar elementos en la página, y el capítulo eventos es donde hiciste que la página respondiera a un click 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.

Una cosa en la 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 escribís en cualquier lado. No hay atajo. Si no trabajaste a través del manual de JavaScript, empezá por ahí, porque el tiempo que dediques a reforzar los fundamentos rinde dividendos acá directamente. También vale la pena leer qué es un framework para tener el panorama más grande de dónde se sitúa una librería como React y qué hace por vos.

Acá está el alcance, para que sepas qué cubre este manual. Abre con qué es React, de dónde vino, y cómo poner un proyecto corriendo con Vite en tu máquina. De ahí en adelante: construir y componer componentes, escribir markup con JSX, darles estilo, pasar datos con props, renderizar listas con keys, mantener datos que cambian en estado, responder a eventos, renderizar condicionalmente, manejar formularios, compartir estado entre componentes, ejecutar side effects con useEffect, traer datos de un servidor, acceder al DOM con refs, y el conjunto más amplio de hooks. Cierra con pensar en React, hacer una interfaz accesible, y un mapa de qué viene después. Ese es el núcleo que usás en casi toda app de React. Consolida estos fundamentos y el resto es un trepo mucho más corto.

Un segundo conjunto de capítulos retoma de dónde esos dejaron, para cuando los quieras: patrones de componentes reutilizables construidos sobre children, context, y custom hooks; routing con React Router, desde layouts anidados a través de params en la URL a rutas protegidas; cómo renderiza React y qué significa eso para el performance; y autenticación y TypeScript. Siguen los mismos tres guides y el mismo selector de nivel, y acompañan el curso Advanced React de Scrimba de la misma forma que estos capítulos acompañan el gratuito. Beyond the basics es el mapa que te entrega.

JunoReact sigue siendo JavaScript Acá hay algo reconfortante de React: no hay un lenguaje de React separado para aprender. Un componente es una función de JavaScript, las props son sus argumentos, y el estado es un valor que guardás.

Cada vez que React te parezca confuso, normalmente ayuda preguntarte qué es lo que está haciendo el JavaScript puro debajo, porque eso es todo lo que es.

JunoReact sigue siendo JavaScript Tené esto presente conforme avanzás: React agrega un pequeño número de ideas nuevas, componentes, JSX, props, estado, hooks, sobre el JavaScript que ya escribís. El resto son funciones, arrays, objetos, y eventos haciendo sus trabajos habituales.

Cuando un componente se comporta mal, leerlo como JavaScript ordinario primero te va a sacar del apuro más seguido 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 de forma eficiente.

Casi toda trampa, closures obsoletos, re-renderizados innecesarios, effects que se disparan cuando no esperabas, viene de olvidar que la función se ejecuta de nuevo en cada renderizado. Mantené el modelo de ejecución de JavaScript en tu cabeza y el comportamiento de React deja de ser sorprendente.

Conocé a tus guías

Este manual está animado por tres guías, y vos elegís cuál te muestra los alrededores. El material es el mismo para todos; tu guía define la voz con la que se cuenta, y en las páginas que se adaptan, qué tan profundo es cada sección.

Cambiá de guía en cualquier momento con el selector en la parte superior de cualquier página, o abrí 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 realmente React, el problema para el que fue construido, y cómo encaja al lado del JavaScript que ya conocés.

Hacé el curso de React en ScrimbaConstruí seis proyectos de React en tu navegador, gratis, con Bob Ziroll.→