Definiendo la interfaz

Cuando contruimos interfaces de usuario en React, lo primero que hacer es:

Dividir la intefaz en pequeñas fracciones; las denominamos componentes.
Describir y comprender los distintos estados para cada uno de esos componentes.
Conectar y gestionar el flujo de información que van a tener los componentes, y posteriormente, nuestra aplicación.

Empezar por el “mockup”

Supongamos que ya tenemos la response en formato JSON de una API y el mockup de nuestro designer.

La API nos devolvería algo así:

1
[
2
  {
3
    "id": 1,
4
    "category": "Remeras",
5
    "path": "/remeras",
6
    "products": [
7
      { "id": 154, "name": "Remera roja" },
8
      { "id": 232, "name": "Remera verde deportiva" }
9
    ]
10
  },
11
  {
12
    "id": 2,
13
    "category": "Camperas",
14
    "path": "/camperas",
15
    "products": [
16
      { "id": 134, "name": "Campera invierno" },
17
      { "id": 112, "name": "Campera deportiva" }
18
    ]
19
  }
20
]

Y el mockup sería así:

mockup

Con este esquema visual, ya tenemos todo lo necesario para empezar a construir componentes.