Definiendo Componentes
El primer ejercicio es encontrar componentes en un interfaz. Y para ello, vamos a revisar una interfaz conocida para encontrar dichos componentes.
Usaremos la interfaz de Twitter como modelo. Vamos a empezar dividiendo esta interfaz en diferentes componentes.
Comencemos con esta área de texto. Podemos ver un componente que incluye el avatar del usuario y el área de escritura.
También dibujaremos un cuadro para todo el contenedor y luego para los iconos que actúan como la caja de herramientas y el botón de Tweet.
Moviéndonos a la derecha, podemos ver una columna que se compone al menos de dos componentes:
- La lista en el cuadro de búsqueda.
- El componente del Tweet real construido por otras piezas como el contenido del texto de la vista previa de la imagen y el avatar.
Nuevamente, Esto es particularmente interesante, ya que la avatar es un componente que se usa en toda la aplicación.
La pieza de la avatar aquí es en realidad el mismo componente en todas partes.
Lo que acabamos de ver es como dividir un interface en varios componente. Incluso montar nombres a cada uno de estos componentes para ayudarnos a crear el modelo mental de la interfaz usuario e identificar los componentes compartidos.
Aún más, la notación utilizada aquí para el nombre es como un elemento HTML.
Esto será útil más adelante cuando nos sumergimos en JSX.
Como resumen, necesitamos ver cualquier interfaz e identificar rápidamente los componentes que la construyen para comprender, asi, como interactúan dichos componentes y que se puede compartir.
Transcripción
El primer ejercicio es encontrar componentes en una interfaz y para ello vamos a revisar una interfaz conocida y encontrar dichos componentes. Aquí tenemos la interfaz de usuario de Twitter como modelo y vamos a empezar dividiéndola en diferentes componentes.
Comencemos con esta área de texto. Podemos ver un componente que incluye el avatar del usuario y el área de escritura. También dibujaremos un cuadro para todo el contenedor y luego para los iconos que actúan como la caja de herramientas y el botón de tweet.
Moviéndonos a la derecha podemos ver una columna que se compone al menos de dos componentes -- la lista en el cuadro de búsqueda, luego tenemos el componente del tweet real construido por otras piezas como el contenido del texto, la vista previa de la imagen, el avatar.
Nuevamente, esto es particularmente interesante, ya que el avatar es un componente que se usa en toda la aplicación. La pieza del avatar aquí es en realidad el mismo componente en todas partes.
Lo que acabamos de ver es cómo dividir una interfaz en varios componentes. Incluso podemos dar nombres a cada uno de estos componentes para ayudarnos a crear el modelo mental de la interfaz de usuario e identificar los componentes compartidos. Aún más, la notación utilizada aquí para el nombre es como un elemento HTML. Esto será útil más adelante cuando nos sumerjamos en JSX.
Como resumen, necesitamos ver cualquier interfaz e identificar rápidamente los componentes que la construyen para comprender, así como interactúan dichos componentes y qué se puede compartir.