Loading
Fundamentos de React(14 Lecciones)
Ejercicio

Definiendo Componentes

React es una poderosa librería que nos da la posibilidad de crear aplicaciones dinámicas por medio del uso de su poderosa y simple API. Pero lo realmente revolucionario de React no es sólo la tecnología y la implementación detrás de todo, si no, que el concepto instalado desde sus inicios. Componentes y una nueva forma de pensar tus aplicaciones: Pensando en React.

¿Qué es un Componente?

Un componente es una unidad aislada de tu interfaz. Esta unidad es un conjunto de lógica, representación y diseño que puede funcionar de forma aislada sin necesidad de conocer otros componentes de la interfaz.

Un componente expone una API que le permite comunicarse con el mundo exterior, esta API se define por medio de las props, que no son más que atributos del componente que permite al desarrollador manipular el componente en si mismo.

React ofrece una API para crear un componente que permite trabajar de forma declarativa siendo la librería quien se hace cargo de comunicarse con la imperativa API del DOM. Esto es el VirtualDOM.

Pensando en React

Pensar en React es implementar un nuevo modelo mental que te permite rápidamente visualizar y definir componentes en una interfaz para así planificar la arquitectura de los mismos y ser capaz rápidamente de encontrar unidades lógicas que pueden ser reutilizadas y compartidas.

🐾 Primeros pasos

El directorio de esta lección está vació y esto es por que en esta lección solo revisaremos algunos conceptos usando ejemplos de código e interfaces de otros proyectos.

1. Definiendo componentes

Para esta primera lección revisaremos una interfaz conocida para encontrar los diferentes componentes que la definen.

🎯 Objetivos

  • Encontrar componentes en una interfaz
  • Desarrollar el modelo mental de pensar en componentes.

🏋️‍♂️ Ejercicio

Para hacer esto seleccionaremos una aplicación o interfaz y la dividiremos en los distintos componentes, podemos hacer esto de forma manual con lápiz y papel o utilizando alguna herramienta de dibujo.

Transcripción

Uno de los conceptos, y quizás el concepto central que React integró dentro del mundo del desarrollo web, es la idea de componentes, pequeñas piezas de interfaz de usuario y lógica que actúan como bloque de construcción para tu aplicación.

Poder ver los componentes de una interfaz de usuario es una habilidad importante, y para adquirir esta habilidad, puedes simplemente comenzar dibujando cajas en una maqueta o diseño o de alguna interfaz. Esto es lo que en la documentación aparece en la sección "Pensando en React" y es parte esencial y ha estado ahí desde siempre.

¿Qué es un componente? Para que así puedas diferenciarlo dentro de una interfaz. Un componente es una unidad aislada, un pequeño trozo de esta. Esta es una unidad o conjunto de lógica y normalmente está relacionado con la funcionalidad y el diseño de este trozo de la interfaz.

Un componente puede exponer una API que le permite comunicarse con el mundo exterior. React ofrece una API para crear componentes que te permite trabajar de forma declarativa.

Pensando en React es el concepto de tener un modelo mental que te permite visualizar y definir los componentes de una interfaz y así planificar la arquitectura.

En este ejercicio lo primero es simplemente encontrar los componentes de la interfaz para así comenzar a desarrollar ese modelo mental que se requiere para seguir más adelante.