¿Qué es un componente?

Clase 8 de 37 • Curso de React.js 2019

Resumen

Los componentes en React son bloques de construcción.
Las aplicaciones hechas con React son como figuras de Lego. Junta varias piezas (componentes) y puedes construir un website tan pequeño o tan grande como quieras.
Los componentes serán barras de búsquedas, enlaces, encabezados, el header, etc.

”Componente” vs “elemento
Un elemento es a un objeto como un componente es a una clase. Si el elemento fuera una casa, el componente serían los planos para hacer esa casa.

Identificación de componentes
Para identificarlos debes hacerte las siguientes preguntas:

¿Qué elementos se repiten? Estos son los elementos en una lista o los que comparten aspecto visual y su funcionalidad
¿Qué elementos cumplen una función muy específica? Estos sirven para encapsular la lógica y permiten juntar muchos comportamientos y aspectos visuales en un solo lugar.

Identificar componentes es una habilidad esencial para poder desarrollar aplicaciones de React.

María José Ledesma

student•

Miguel Angel Escurra

student•

Excelente!

Bernardo Aguayo Ortega

student•

Gracias!

David Alejandro Mosquera Moreno

student•

¿En qué se diferencian los componentes de función de las clases? _

Enrique Devars

teacher•

Increíble aporte, el blog de Overreacted es muy bueno 👌

David Alejandro Mosquera Moreno

student•

Sí señor, es de lo mejor 👌

Jhurgen Maraza

student•

Los Componentes serian como Átomos, nuestra unidad básica ---> Bloques de construcción 'Componente' vs 'Elemento' ---> El elemento sale del componente

Identificación de Componentes Dos preguntas guías: *¿Que elementos se repiten? -Elementos en una lista -Elementos que comparten un aspecto visual o de funcionalidad *¿Que elementos cumplen una función muy específica? (Ej. Buscador) -Sirven para encapsular lógica -Permiten juntar muchos comportamientos y aspectos visuales en un solo lugar

'Identificar componentes es una habilidad esencial para poder desarrollar aplicaciones de React'

Eduardo Flores

student•

Buen Resumen

Bernardo Aguayo Ortega

student•

gracias bro!

Ivan Diaz

student•

un golpe es el COMPONENTE de una golpiza ...

Daniel Alberto Esquinazi

student•

Me parece que la comparación correcta seria:

Un elemento es a un componente como un objeto es a una clase

Rolando Mamani Salas

student•

Muy bien

Luis Angel

student•

En todo caso debería ser en este orden: Elemento (HTML) -- componente (React) Clase (HTML) -- Objeto (React)

Un elemento es a un componente como una clase es a un objeto.

Ejemplos: Elemento:

<div></div>

Elemento con clase:

<div class="main"></div>

David Colin

teacher•

Importante: No todos los componentes son clases. Sólo los componentes que van a tener acceso al state son clases (stateful), los demás son objetos (stateless). Más adelante se ve levantamiento del estado que es dejar el state en un sólo lugar, por lo mismo, es buena práctica que sólo el componente que va a contener el state sea stateful, los demás pueden ser stateless.

/** STATEFUL **/
class Header extends React.Component {
	render() {
		return <h1>Header</h1>
	}
}

/** STATELESS **/
const Header = () => <h1>Header</h1>

David Colin

teacher•

En la unidad de React Router se mencionan como componentes funcionales. Es lo mismo :)

Gustavo Quino Crispín

student•

Hasta el momento:

APUNTES: *si se trabaja con jsx es obligatorio importar 'React' jsx = es mucho mas legible, y es más expresivo Expresion = se va interpretar y se va evaluar Componentes = es una clase Elemento = es un objeto de la clase (elemento)

Mario Jesús Arango Cupe

student•

El componente es como un dibujo sin pintar y el elemento es el dibujo pintado, para cada tarea puedes pintar distinto 'las propiedades'. Componente es a clase Elemento es a objeto

Rolando Mamani Salas

student•

Gracias

Pamela Cinthya Torres Gutiérrez

student•

Me encanto la analogía del componente con los cubitos de lego. La verdad se escucha un poco difil poder identificar los componentes que se repiten y que tienen una función.

Pero espero que con la practica lo podamos realizar adecuadamente.

Frank Antonio Piñin Ato

student•

el Componente es el molde de los pasteles

Nicolas Esteban Prieto Sarmiento

student•

Nilson Amaya

student•

En realidad me gusta más: "Un elemento es a un componente como un objeto es a una clase" :)

Estefany Minerva Camarena Gordillo

student•

¿Qué es un componente? Los componentes en React son bloques de construcción. Las aplicaciones hechas con React son como figuras de Lego. Junta varias piezas (componentes) y puedes construir un website tan pequeño o tan grande como quieras. Los componentes serán barras de búsquedas, enlaces, encabezados, el header, etc.

”Componente” vs “elemento Un elemento es a un objeto como un componente es a una clase. Si el elemento fuera una casa, el componente serían los planos para hacer esa casa.

Identificación de componentes Para identificarlos debes hacerte las siguientes preguntas:

¿Qué elementos se repiten? Estos son los elementos en una lista o los que comparten aspecto visual y su funcionalidad ¿Qué elementos cumplen una función muy específica? Estos sirven para encapsular la lógica y permiten juntar muchos comportamientos y aspectos visuales en un solo lugar. Identificar componentes es una habilidad esencial para poder desarrollar aplicaciones de React.

Alfonso Alexander Briones Ventura

student•

Soy ux/ui designer y frontend a la vez, el diseño atómico es ideal para desarrollar a nivel de componentes, con un buen design system ya no hay dolores de cabeza ni copiar y pegar código, ahora mismo ando diseñando y al finalizar el curso pienso desarrollarlo con lo que aprenda de este curso.

Jose Daniel Molina

student•

Hasta ahora, veo que es "sencillo" trabajar con React y eso hace que sienta mucha curiosidad

Angel Enrique Barrios

student•

los componentes son funciones que que forman parte de un elemento.

un elemento es el contenedor donde los componentes habitan

Jorge Ossa

student•

Se pueden agregar componentes dentro de otro componente?

David Camacho

student•

Si, por ejemplo:

<Layout>
	<ChildrenOne props={props} />
	<ChildrenTwo props={props} />
</Layout>

Donde Layout puede ser un componente que contiene elementos esenciales, como header y footer.

Luis Andres Olmedo

student•

Daniel Hidalgo

student•

En React hay una unidad básica de desarrollo. Se llaman COMPONENTES

Ivan Mercado

student•

Excelente!! Todo muy bien explicado, gracias y saludos desde San Juan , Puerto Rico !

Isaias Chávez

student•

Un componente en palabras más simples: Es un trozo del sitio web que cumple un objetivo.

Casi todo puede llegar a ser un componente, siempre y cuando sea lógico su agrupamiento.

Diego Guillermo Yovera Coveñas

student•

Platzi es perfecto, pero siento que nunca calibran bien el sonido. siempre dps de clases, tengo que ajustar el volumen porque si no hago un ruido exagerado. Un ojo para el futuro, por favor!

¿Qué es un componente?

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión