Como ya he mencionado varias veces,
React tiene que ver con componentes,
pero ahora aprendamos formalmente qué son los componentes de React
y por qué son tan importantes.
Entonces los componentes son el concepto más fundamental en React,
simplemente porque las aplicaciones React son, de hecho,
hecho enteramente de componentes.
Entonces, cuando miras cualquier aplicación React,
no hay nada que no sea un componente
o al menos no dentro de algún componente.
Por eso me gusta decir
que los componentes son los bloques de construcción
de cualquier interfaz de usuario en React.
De hecho, básicamente todo lo que hace React es tomar componentes
y dibujarlos en una página web,
así que en una interfaz de usuario, o UI para abreviar.
Eso suena simple,
pero en realidad es el trabajo principal de React.
En términos más técnicos,
React representa una vista para cada componente,
y todas estas vistas juntas forman la interfaz de usuario.
Entonces también podemos pensar en un componente.
como parte de la interfaz de usuario, ¿verdad?
Ahora, una propiedad clave de los componentes.
es que cada componente tiene sus propios datos,
Lógica y apariencia de JavaScript.
Básicamente, cada componente describe cómo funciona.
y cómo se ve, lo que los convierte en una excelente manera
de construir interfaces de usuario.
Y hablando de crear interfaces de usuario,
basado en lo que acabamos de aprender,
tiene sentido que en React
construimos interfaces de usuario complejas como esta
mediante la construcción de múltiples componentes,
y luego combinar estos componentes como piezas de Lego.
Entonces aquí podemos identificar los componentes.
como un reproductor de vídeo, un menú,
esta lista de preguntas, y también esta parte
donde podemos refinar las preguntas mostradas.
Entonces esos son como los grandes componentes,
pero podemos identificar muchos otros componentes más pequeños
en esta interfaz de usuario también,
como por ejemplo, estos filtros de aquí.
Y lo que puedes ver es que este filtro es
dentro del componente de preguntas refinadas, ¿verdad?
En realidad, una cosa que hacemos todo el tiempo es
para colocar componentes dentro de otros componentes,
o en otras palabras, anidamos componentes unos dentro de otros.
Entonces, anidar componentes es un aspecto clave del uso de componentes.
en React junto con la reutilización de componentes.
Ahora, observe cómo tenemos tres preguntas similares.
en la lista de preguntas,
y así podemos crear un componente de pregunta,
y luego reutilícelo tres veces aquí.
Ahora bien, por supuesto, los datos para cada uno de ellos son diferentes,
pero podemos pasar fácilmente datos diferentes
en diferentes componentes de la pregunta
usando algo llamado accesorios,
del que hablaremos más adelante.
Entonces, siempre que necesitemos alguna duplicación en nuestra interfaz de usuario,
creamos un nuevo componente,
y lo usamos tantas veces como sea necesario.
Como puedes ver, una habilidad crucial
que aprenderás a lo largo de este curso es
cómo dividir un diseño como este en sus componentes.
Ahora, una cosa que ayuda con eso.
y con analizar los componentes que creamos
es un árbol de componentes como este.
Entonces esto muestra la jerarquía.
que existe entre los componentes
que componen la interfaz de usuario,
y lo hace realmente fácil de entender
cómo todos estos componentes están anidados uno dentro del otro
y realmente cómo se relacionan entre sí.
También podemos ver claramente las relaciones entre componentes,
como las preguntas refinadas
siendo el componente principal de los filtros,
o al revés eso filtra
es un componente secundario de preguntas refinadas.
Y usamos estos términos, entonces componente padre e hijo,
todo el tiempo en React.
Por eso es importante entender lo que significan.
Y entonces, un árbol de componentes como este es perfecto para entender.
este tipo de relaciones entre componentes,
y creo que esto es todo lo que necesitas
saber acerca de los componentes por ahora.
Profundizaremos mucho en algunos conceptos importantes.
Me gusta la reutilización más adelante, pero por ahora,
comencemos a poner en práctica algunos de estos conceptos.