Transformación de Páginas Web a Componentes Reutilizables
Contenido del curso
:ab: Atomic Design es una metodología de diseño (y una forma de modelar nuestro pensamiento) para trabajar con componentes: ¿Por qué usar Atomic Design? .
Que buen artículo y muy buenas referencias
Excelente representación gráfica de la metodología. Super intuitivo.
Si quedaron con dudas sobre los componentes Diego de Granda tiene un curso de componentes web que es muy bueno y donde enseña a generarlos con JavaScript Vanilla, ademas explica la diferencia de hacerlos con frameworks y librerias Ve al curso aqui
Cualquier curso de Diego de Granda es oro...es muy buen profesor
3.-¿Cómo estructurar un componente?
Podemos identificar componentes que tienen un mismo objetivo, entonces podemos hacer composición de componentes, en el caso del ejemplo visto en clase sería:
Hechos estos componentes podemos llegar a lo que es el menú que es otro componente que está formado por el conjunto de todo el resto de componentes que acabamos de ver. Menú cambia, es diferente dependiendo del usuario, si es nuevo le mostramos los botones de login o suscripciones, pero si ya es un estudiante entonces debemos mostrarle los puntos, notificaciones y todo lo demás.
Al igual que con el menú los componentes internos puedan variar dependiendo de lo que necesitemos, para esto nos ayuda tratarlos como funciones a las cuales les pediremos lo que necesitamos en especial.
Podemos darle atributos a un componente usando otros componentes.
NOTA: Si se tienen muchos tipos de un solo componente es señal de desorden, hay que estandarizar las cantidades de componentes.
👉 Esto hace parte de la documentación de ⚛️ React y nos explica como debemos pensar al momento de crear componentes y de componerlos de la misma forma que nos explica el profe Juan David
No sé si es porque soy un poco noob pero yo la haría así:
Logo, Badge. Links, Menú tipo select, Botón y Search Bar
En mi mente lo dividí igual!
En mi caso solo agregaria una division entre la barra de arriba y la de abajo
YO LO DIVIDIRIA ASI: LOGO CURSOS BLOG FORO AGENDA TV CONTACTANOS INICIAR MI PLAN INICIAR SESION BARRA DE BUSQUEDA LUPA <3
es increíble la forma en que explica las cosas, hace que se vea todo mas facil
¿qué framework usan en platzi?
React
Hola! Parece ser que usan React & Redux!
Cual es la diferencia entre class y className; ya que al usar emmet dentro de JavaScript y escribir
.nombre-clase da como resultado className="nombre-clase"
en vez de poner el atributo class pone className
'class' es un atributo en un elemento html y una palabra reservada en js y jsx aca te dejo un ejemplo
var element = document.createElement('span'); element.className = 'conClase' // element es <span class='conClase'></span>
Por otro lado 'className' es una propiedad de js que es utilizada para obtener u asignar la clase de un elemento.
Espero que mi respuesta te haya ayudado!
si ya entendi, pero entonces si se crea un componente con JavaScript y se escribe un template de html se debe usar el atributo class proque en html el atributo className no existe cierto?
Dividiría el header en 5 componentes:
logo
lista de items del navbar
buscador
select de planes
login button
Muy largo el curso.
Pero si apenas es la tercera clase :weary:
Uno de los principales problemas que viene a resolver los componentes aparte de la reutilizacion es llevar nuestro código a los mas mínimo posible, me he encontrado en empresas con componentes que son enormes, esto debido a que no han sabido segmentar el componente.. saber dividir un componente te ahorrar dolores de cabeza tanto al desarrollado como a su equipo.
Convertir una página web o una app a componentes:
Estructuración un componente:
Llevar el componente al código: En el desarrollo normalmente iremos de la generar a lo especifico y crearemos componentes en el proceso.
A veces cuando queremos diviidr algunas paginas en componentes podemos ver que algunos elementos estan muy juntos, asi que podremos juntar estos y hacer un componente mas grande. Osea hacer composicion de componentes, hacer un componente apartir de otros. De esta forma podemos volver a hacer composicion de componentes y hacer todo un menu en base a todos los componentes juntos.
Hay que tener en cuenta que nuestro componente cambia dependiendo de que usuario vea la aplicacion. Entonces podemos tener un boton pequeno y otro grande, pues podemos asignarle un type para asi con clases o identificadores en CSS podemos modificarlos. Pero si tenemos muchos tipos de botones tal vez podriamos agrupar los botones mas parecidos y los que son distintos podriamos usarlos como otro componente.
Nota: Podemos darle atributos a un componentes usando otros componentes.
Como me quede con ganas de saber bien la sintaxis de utilizar Framework de JavaScript para armar componentes HTML
<header> <nav> <section> <section> <img src="logo-platzi.png"/> <img src="live.png"/> </section> <section> <ul> <li><a>Cursos</a></li> <li><a>Blog</a></li> <li><a>Foro</a></li> <li><a>Agenda</a></li> <li><a>TV</a></li> <li><a>Contáctanos</a></li> </ul> </section> </section> <section> <nav dropdown>Iniciar mi plan</nav> <button>Iniciar sesión</button> <div> <input type="text" placeholder="Buscar en Platzi"></input> <button><img src="search-icon.png"/></button> </div> </section> </nav> </header>
<header-platzi> <logo-plazti></logo-plazti> <enlaces-platzi></enlaces-platzi> <sesion-platzi></sesion-platzi> <busqueda-platzi></busqueda-plazti> </header-platzi>
Para este reto yo tendría los siguientes componentes: logo, tag, MenuButton, navBar, dropdown, actionButton, Input, iconButton, searchInput.
Es admirable el carisma de Juan David, es un joven que ama lo que hace y transmite su sentimiento en la forma que explica.... Gran profesor, un maestro en su conocimiento.
me alegra entender todo, en cerio hacer caso de tomar los cursos en orden fue lo mejor
YO LO DIVIDIRIA ASI: DENTRO DEL NAVBAR.
Personalmente pienso que los componentes es identica a la maquetacion en HTML, Cada etiqueta seria un componente, y las etiquetas contenedoras como 'Div', 'Nav', 'Section', entre otras, ayuda mas al identificar los componentes