UI Components y Container Components

Clase 32 de 37 • Curso de React.js 2019

Resumen

En la programación es bueno separar las tareas en diferentes funciones y en React sucede lo mismo. Cuando un componente hace demasiado, probablemente es mejor dividirlo en dos.

Esta técnica de componentes presentacionales y componentes container es común, útil y hace parte de las buenas prácticas.

Ivan Santiago

student•

Hablando de buenas prácticas de programación también se debe considerar el orden de tu código. Un ejemplo de ésto es en los imports, a mí me gusta dividirlos en: Dependencias, Componentes y Assets. Así lo llevo a cabo:

import React, {Component} from 'react'
import {Link} from 'react-router-dom'

import api from '../api'
import BadgeList from '../components/BadgeList'
import Loading from '../components/Loading'
import MiniLoading from '../components/MiniLoading'
import Error from '../components/Error'
import DeleteBadgeModal from '../components/DeleteBadgeModal'

import './styles/Badges.css'
import logo from '../res/badge-header.svg'

Facundo Nicolás García Martoni

teacher•

¡Qué interesante!

Antonio Madrid

student•

Grande!

David Behar

student•

Según Dan Abramov, desde la introducción de hooks este modelo de containers y presentational components ya no está vigente.

Actualización de 2019: escribí este artículo hace mucho tiempo y mis opiniones han evolucionado desde entonces. En particular, ya no sugiero dividir sus componentes de esta manera. Si lo encuentra natural en su código, este patrón puede ser útil. ... Los hooks me permiten hacer lo mismo sin una división arbitraria. Este texto se deja intacto por razones históricas, pero no lo tome demasiado en serio.

Nildiert Jimenez

student•

Excelente aporte, gracias!

Rodolfo Ugalde Ochoa

student•

Excelente aporte para tomarlo muy en cuenta. Gracias.

Mariana Valencia Gallego

student•

Pareciera muchísimo trabajo para una app sencilla, sin embargo esto se vuelve muy poderoso en equipos de desarrollo grandes.

Daniel Páez

student•

Existe un enfoque interesante de React: Ese donde hay dos tipos de componentes

Los primeros tontos, superficiales, solo se enfocan en el look and feel

Los segundos más inteligentes, racionales, solo se enfocan en la lógica

En la práctica:

Los componentes presentacionales casi nunca tienen estados y se hacen en base a funciones, importan los estilos y contienen las clases
Los componentes inteligentes contienen el estado y los metodos que dan logica a la App y lo transfieren a otros componentes a través de Props

Me parece recomendable contenedor el segundo tipo de componentes a través de un React.Fragment

Asi mismo el contenedor del primero dependera de lo que sea (div, section, figure, article, header, aside)

Jimmy Buriticá Londoño

student•

Bien dicho ...

jean pierre gabriel nieto acosta

student•

Este sistema lo vemos aplicado en frameworks como django o laravel con su MTV y MVC (model template view y model view controller), donde se separa la funcionalidad de la vista de lo que se mostrará en la interfáz

Julian Carelli

student•

Gracias a este post https://blog.bitsrc.io/implementing-the-container-pattern-using-react-hooks-f490a8492d05 de Sonny Recio en el cual habla de como trabajar este patrón con Hooks en React , lo lleve a cabo de esta manera.

La carpeta components trae todos los componentes que utilizo en mi proyecto.

La carpeta pages contiene las paginas con sus correspondientes componentes para renderizar y además algunas props que paso gracias a los archivos de la ultima carpeta (containers)

Y por ultimo la carpeta containers que contiene la lógica de cada pagina y ademas los archivos de la carpeta pages que me van a permitir poder renderizarlos.

Entiendo que este patrón se puede aprovechar muchísimo mejor cuando usamos clases y gracias al chat pude salir de la duda de usar hooks o clases a la hora de buscar un trabajo. Seguramente en un futuro creo una rama exclusiva para el uso de clases 😄

César Palma

student•

Una alternativa mas cercana a nomeclatura estandard es llamarlos: templates: componentes presentacionales components: componentes contenedores pages: páginas

Los plugins de visual studio les dan un icono especial de carpeta

Adrian Salgado

student•

Tengo una duda, esos archivos .jsx funcionan igual que los archivos js? se puede hacer lo mismo de importar componentes, crear clases, etc. Si es asi porque ponerlos como jsx embes de js.

Andres Gallardo

student•

A alguno mas le pasa que le parece horrible como trabaja react? Si venis del mundo de angular o de vue, me parece horrible como hace las mismas cosas que los otros dos hacen mucho mas simple

Fernanda Aragon

student•

Hola Andres, esto ya va en gustos, yo vengo de Angular a React.js y me ha parecido que con React.js son muy senicllas las cosas respecto a Angular, el manejo del VirtualDOM es muy sencillo, crear componentes, pasar propiedades, además que permite crear un proyecto a las necesidades que uno quiere, es mi perspectiva, tal vez tu tienes una diferente, de igual manera fíjate en las grandes empresas, qué tecnologías usan y por qué, tales como Pinterest, Twitter, Uber y hasta el mismo Platzi.

Alexander Valencia

student•

Yo vengo de Vue y todo lo que se hacer en vuejs me parece mucho mas completo y fácil de hacer en reactjs.

Gael Geovani Manzanares Quiñones

student•

Se podría decir que : UI Components es a una "Vista" y Container Components a un "Controlador" ?

Vane Sora

student•

No creo que sea lo mejor declararlo así ya que podrías recaer en un vicio de hacerlo siempre.

Es más una herramienta para segmentar los códigos largos, realizando componentes más pequeños y coherentes.

Enrique Ortuno

student•

No, esa division se corresponde a un patron de presentacion y no se aplica a la division que Richard menciona

Jayro Jesus Ku Salazar

student•

Buena practica dada por Richard y la comunidad, aquí otra forma de usar los componentes en funciones, sin tener que poner el export al final.

import React from 'react'
export default function BadgeDetails(props){
	return(
		<div>Hello I´m component</div>
	)
}

Willy David Da Conceicao Lozada

student•

claro lo exportas apenas declaras buena esa...

Sebastian Andres Barrero Sanchez

student•

queda muy poco para que se acabe este curso, he aprendido mucho!

Jhon Alexis Mendez Lara

student•

Muy chévere! principios SOLID aplicados a React

Jerson Morrow

student•

Excelente ejemplo para ilustrar las buenas practica de la programacion , algo clave en el desarrollo , mas cuando se trabaja en equipo, es tener un codigo limpio, legible y distribuido, y si eso implica hacer una division de componentes pues este es el mejor ejemplo para ilustrarlo .

Gracias Richard me ha encantado este curso!

Daniel Páez

student•

Me quedo con la cita que siento vital practicar en mi dia a dia: " tener un codigo limpio, legible y distribuido, "

Gracias por tu aporte :)

Alejandro Alberto Pachas Chavez

student•

amigos una pregunta, si quisiera hace una función que la exporto y consecuentemente la importo donde la necesito y quiero pasarle valores por parámetros para que sean operados donde está la lógica de la función, es decir, de donde fue importado.....cómo lo haría?

Francisco Ponce

student•

Hola Alejandro

No estoy seguro si esto responde tu duda, pero podrías crear un archivo utils que tenga estas funciones genéricas, y hacer la exportación de la siguiente manera:

export const generator = () => {

}

E importarla tipo:

import { generator } from './utils'

Jair Israel Avilés Eusebio

student•

Como te mencionan, parecer que tu quieres definir una funcion reutilizable. Una buena practica es definir esa funcion a ser usada en mas de un componente en una carpeta src/utils.

Wilson Fabian Pérez Sucuzhañay

student•

es decir sería como en Angular tienes los .ts donde tienes la lógica del componente y en otro archivo tienes el html

Platzi Team

student•

En realidad es como si fuese una jerarquía de componente padre e hijo, donde el padre es un smart component (también llamados containers en angular) que maneja toda la lógica de negocio y el componente hijo es un dumb component (en angular se llaman simplemente components) encargado solamente de la presentación de datos y emitir eventos.

César Palma

student•

Angular está hecho en función de muchos patrones ya de por si te da una estructura donde cada componente tiene un css, un ts, un html e incluso un ts para tests. De esta manera tienes a la mano todas las dependencias de un componentes para proyectos muy grandes es muy facil ordenarse. y si quieres haces solo lógica tienes los Services. Igual es solo la estructura que propone, tu la puedes adaptar a tu gusto

Luis Felipe Carrasco Galindo

student•

esto es lo denominado Smart component and dump component

Augusto Gonzalez

student•

3 años trabajando en React y nunca habia aplicado esto. Super buenisima esta clase!

Gonzalo A. Burgos Trincado

student•

Muy buena practica para tener mejor organizado el codigo.

Juan Castro

teacher•

También te puede gustar este tutorial; https://platzi.com/blog/estructura-organizacion-y-tipos-de-componentes-en-react/. :wink:

Edwin García

student•

Yo intenté usar este modelo para el desarrollo de una aplicación y la verdad complicó todo muchísimo. Cuando teníamos que hacer cambios a un componente teníamos que buscar dos componentes y hacer cambios en los dos. En una aplicación que tiene aproximadamente 100 componentes eso se pone complicado y se ve desordenado. Me parece más fácil manejarlo en un solo componente, igual uno ya tiene la costumbre de buscar la lógica en la parte superior y el renderizado al final del componente y uno ya sabe dónde está todo. Pues es mi opinión.

Miguel Angel Morales Larriega

student•

1000 componentes = Utilizar Redux.

solo se uza este metpdp para aplicaciones con 5 a 10 componentes maximo,

Edgar de Jesus Mendoza Ortegon

student•

pues yo también he trabajado con aplicaciones complejas tanto en react.js y react native use este patron de smart y dumps components más redux y nunca tuve problema a la hora de trabajar.

horacio garcia

student•

excelente clase, the best teacher so far

Jorge Gomez

student•

TypeError: Cannot read property 'firstName' of undefined

Esto sucedió al dividir el componente... antes funcionaba ok, ya lo vi varias veces al video y no soluciono el problema

Ezequiel Miguel Brandan

student•

tienes el codigo en un repositorio asi lo pueda chequear? una de esas te puedo ayudar..

Yazmin Pedraza Ortiz

student•

Tal vez en App.js no estás importando BadgeDetailsContainer

UI Components y Container Components

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