Pensar en React

React puede cambiar cómo piensas sobre los diseños que observas y las aplicaciones que construyes. Cuando construyes una interfaz de usuario con React, primero la descompondrás en piezas llamadascomponentes. Luego, describirás los diferentes estados visuales para cada uno de tus componentes. Finalmente, conectarás tus componentes entre sí para que los datos fluyan a través de ellos. En este tutorial, te guiaremos a través del proceso de pensamiento para construir una tabla de datos de productos con búsqueda usando React.

Comienza con el mockup

Imagina que ya tienes una API JSON y un mockup de un diseñador.

La API JSON devuelve algunos datos que se ven así:

El mockup se ve así:

Para implementar una UI en React, generalmente seguirás los mismos cinco pasos.

Paso 1: Descompón la UI en una jerarquía de componentes

Comienza dibujando cuadros alrededor de cada componente y subcomponente en el mockup y dándoles nombres. Si trabajas con un diseñador, es posible que ya haya nombrado estos componentes en su herramienta de diseño. ¡Pregúntale!

Dependiendo de tu experiencia, puedes pensar en dividir un diseño en componentes de diferentes maneras:

• Programación—usa las mismas técnicas para decidir si debes crear una nueva función u objeto. Una de esas técnicas es laseparación de responsabilidades, es decir, idealmente un componente solo debería ocuparse de una cosa. Si termina creciendo, debería descomponerse en subcomponentes más pequeños.
• CSS—considera para qué crearías selectores de clase. (Sin embargo, los componentes son un poco menos granulares).
• Diseño—considera cómo organizarías las capas del diseño.

Si tu JSON está bien estructurado, a menudo encontrarás que se mapea naturalmente a la estructura de componentes de tu UI. Esto se debe a que los modelos de UI y de datos a menudo tienen la misma arquitectura de información, es decir, la misma forma. Separa tu UI en componentes, donde cada componente coincida con una parte de tu modelo de datos.

Hay cinco componentes en esta pantalla:

1. FilterableProductTable(gris) contiene toda la aplicación.
2. SearchBar(azul) recibe la entrada del usuario.
3. ProductTable(lavanda) muestra y filtra la lista según la entrada del usuario.
4. ProductCategoryRow(verde) muestra un encabezado para cada categoría.
5. ProductRow(amarillo) muestra una fila para cada producto.

Si observasProductTable(lavanda), verás que el encabezado de la tabla (que contiene las etiquetas "Nombre" y "Precio") no es un componente propio. Esto es una cuestión de preferencia, y podrías hacerlo de cualquier manera. Para este ejemplo, es parte deProductTableporque aparece dentro de la lista deProductTable. Sin embargo, si este encabezado se vuelve complejo (por ejemplo, si agregas ordenación), puedes moverlo a su propio componenteProductTableHeader.

Ahora que has identificado los componentes en el mockup, organízalos en una jerarquía. Los componentes que aparecen dentro de otro componente en el mockup deben aparecer como hijos en la jerarquía:

• FilterableProductTable
  • SearchBar
  • ProductTable
    • ProductCategoryRow
    • ProductRow

Paso 2: Construye una versión estática en React

Ahora que tienes tu jerarquía de componentes, es hora de implementar tu aplicación. El enfoque más directo es construir una versión que renderice la UI a partir de tu modelo de datos sin agregar interactividad... ¡por ahora! A menudo es más fácil construir primero la versión estática y luego agregar interactividad. Construir una versión estática requiere mucho escribir y poco pensar, pero agregar interactividad requiere mucho pensar y poco escribir.

Para construir una versión estática de tu aplicación que renderice tu modelo de datos, querrás construircomponentesque reutilicen otros componentes y pasen datos usandoprops.Las props son una forma de pasar datos de padre a hijo. (Si estás familiarizado con el concepto deestado, no uses estado en absoluto para construir esta versión estática. El estado está reservado solo para interactividad, es decir, datos que cambian con el tiempo. Como esta es una versión estática de la aplicación, no lo necesitas).

Puedes construir "de arriba hacia abajo" comenzando con los componentes más altos en la jerarquía (comoFilterableProductTable) o "de abajo hacia arriba" trabajando desde componentes más bajos (comoProductRow). En ejemplos más simples, generalmente es más fácil ir de arriba hacia abajo, y en proyectos más grandes, es más fácil ir de abajo hacia arriba.

(Si este código te parece intimidante, primero revisa laGuía Rápida!)

Después de construir tus componentes, tendrás una biblioteca de componentes reutilizables que renderizan tu modelo de datos. Como esta es una aplicación estática, los componentes solo devolverán JSX. El componente en la parte superior de la jerarquía (FilterableProductTable) tomará tu modelo de datos como una prop. Esto se llamaflujo de datos unidireccionalporque los datos fluyen desde el componente de nivel superior hacia los que están en la parte inferior del árbol.

Paso 3: Encuentra la representación mínima pero completa del estado de la UI

Para hacer la UI interactiva, necesitas permitir que los usuarios cambien tu modelo de datos subyacente. Usarásestadopara esto.

Piensa en el estado como el conjunto mínimo de datos cambiantes que tu aplicación necesita recordar. El principio más importante para estructurar el estado es mantenerloDRY (No te repitas).Descubre la representación absoluta mínima del estado que tu aplicación necesita y calcula todo lo demás bajo demanda. Por ejemplo, si estás construyendo una lista de compras, puedes almacenar los elementos como un array en el estado. Si también quieres mostrar el número de elementos en la lista, no almacenes el número de elementos como otro valor de estado; en su lugar, lee la longitud de tu array.

Ahora piensa en todas las piezas de datos en esta aplicación de ejemplo:

1. La lista original de productos
2. El texto de búsqueda que el usuario ha ingresado
3. El valor de la casilla de verificación
4. La lista filtrada de productos

¿Cuáles de estos son estado? Identifica los que no lo son:

• ¿Permanece sin cambioscon el tiempo? Si es así, no es estado.
• ¿Sepasa desde un padrea través de props? Si es así, no es estado.
• ¿Puedes calcularlobasándote en el estado o props existentes en tu componente? Si es así,definitivamente¡no es estado!

Lo que queda probablemente sea estado.

Repasémoslos uno por uno de nuevo:

1. La lista original de productosse pasa como props, por lo que no es estado.
2. El texto de búsqueda parece ser estado ya que cambia con el tiempo y no puede calcularse a partir de nada.
3. El valor de la casilla de verificación parece ser estado ya que cambia con el tiempo y no puede calcularse a partir de nada.
4. La lista filtrada de productosno es estado porque puede calcularsetomando la lista original de productos y filtrándola según el texto de búsqueda y el valor de la casilla de verificación.

¡Esto significa que solo el texto de búsqueda y el valor de la casilla de verificación son estado! ¡Bien hecho!

Paso 4: Identifica dónde debe vivir tu estado

Después de identificar los datos de estado mínimos de tu aplicación, necesitas identificar qué componente es responsable de cambiar este estado, oposeeel estado. Recuerda: React utiliza un flujo de datos unidireccional, pasando datos hacia abajo en la jerarquía de componentes, del componente padre al hijo. Puede que no sea inmediatamente claro qué componente debería poseer qué estado. Esto puede ser un desafío si eres nuevo en este concepto, ¡pero puedes resolverlo siguiendo estos pasos!

Para cada pieza de estado en tu aplicación:

1. Identificatodoslos componentes que renderizan algo basado en ese estado.
2. Encuentra su componente padre común más cercano: un componente por encima de todos ellos en la jerarquía.
3. Decide dónde debe vivir el estado:
   1. A menudo, puedes colocar el estado directamente en su padre común.
   2. También puedes colocar el estado en algún componente por encima de su padre común.
   3. Si no puedes encontrar un componente donde tenga sentido poseer el estado, crea un nuevo componente únicamente para mantener el estado y agrégalo en algún lugar de la jerarquía por encima del componente padre común.

En el paso anterior, encontraste dos piezas de estado en esta aplicación: el texto de entrada de búsqueda y el valor de la casilla de verificación. En este ejemplo, siempre aparecen juntos, por lo que tiene sentido ponerlos en el mismo lugar.

Ahora apliquemos nuestra estrategia para ellos:

1. Identifica componentes que usan el estado:
   • ProductTablenecesita filtrar la lista de productos basándose en ese estado (texto de búsqueda y valor de la casilla).
   • SearchBarnecesita mostrar ese estado (texto de búsqueda y valor de la casilla).
2. Encuentra su padre común:El primer componente padre que ambos componentes comparten esFilterableProductTable.
3. Decide dónde vive el estado: Mantendremos los valores del texto de filtro y el estado de la casilla enFilterableProductTable.

Entonces, los valores del estado vivirán enFilterableProductTable.

Agrega estado al componente con elHook useState().Los Hooks son funciones especiales que te permiten "engancharte" a React. Agrega dos variables de estado en la parte superior deFilterableProductTabley especifica su estado inicial:

Luego, pasafilterText e inStockOnly a ProductTable y SearchBarcomo props:

Puedes empezar a ver cómo se comportará tu aplicación. Edita el valor inicial defilterText de useState('') a useState('fruit')en el código del sandbox a continuación. Verás que tanto el texto de entrada de búsqueda como la tabla se actualizan:

Observa que editar el formulario aún no funciona. Hay un error en la consola en el sandbox de arriba que explica por qué:

En el sandbox de arriba,ProductTable y SearchBarleen las propsfilterText y inStockOnlypara renderizar la tabla, el input y la casilla de verificación. Por ejemplo, así es comoSearchBarestablece el valor del input:

Sin embargo, aún no has añadido ningún código para responder a las acciones del usuario, como escribir. Este será tu paso final.

Paso 5: Añadir flujo de datos inverso

Actualmente tu aplicación se renderiza correctamente con props y estado fluyendo hacia abajo en la jerarquía. Pero para cambiar el estado según la entrada del usuario, necesitarás soportar que los datos fluyan en la dirección opuesta: los componentes de formulario profundos en la jerarquía necesitan actualizar el estado enFilterableProductTable.

React hace explícito este flujo de datos, pero requiere escribir un poco más que el enlace de datos bidireccional. Si intentas escribir o marcar la casilla en el ejemplo de arriba, verás que React ignora tu entrada. Esto es intencional. Al escribir<input value={filterText} />, has establecido que la propvalue del inputsea siempre igual al estadofilterTextpasado desdeFilterableProductTable. Dado que el estadofilterTextnunca se establece, el input nunca cambia.

Quieres hacer que cada vez que el usuario cambie las entradas del formulario, el estado se actualice para reflejar esos cambios. El estado es propiedad deFilterableProductTable, por lo que solo él puede llamar asetFilterText y setInStockOnly. Para permitir queSearchBaractualice el estado deFilterableProductTable, necesitas pasar estas funciones hacia abajo aSearchBar:

Dentro deSearchBar, añadirás los manejadores de eventosonChangey establecerás el estado padre desde ellos:

¡Ahora la aplicación funciona completamente!

Puedes aprender todo sobre el manejo de eventos y la actualización del estado en lasección Agregar interactividad.

¿Qué sigue ahora?

Esta fue una introducción muy breve sobre cómo pensar en la construcción de componentes y aplicaciones con React. Puedesiniciar un proyecto de Reactahora mismo oprofundizar en toda la sintaxisutilizada en este tutorial.