Cómo estructurar un componente

🆎 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?
.

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

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:

• Logo: Esta construido por el logo de Platzi y el banner del logo (el que nos avisa si hay un live).
• Navbar: cada enlace es su propio componente y además juntos forman el navbar.
• Componente de autenticación: Engloba a los botones de iniciar plan e inicio de sesión.
• Componente de búsqueda: Compuesto por un input y un botón diseñados especialmente para estar juntos.

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.

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

👉 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

https://es.reactjs.org/docs/thinking-in-react.html

YO LO DIVIDIRIA ASI:
LOGO
CURSOS
BLOG
FORO
AGENDA
TV
CONTACTANOS
INICIAR MI PLAN
INICIAR SESION
BARRA DE BUSQUEDA
LUPA ❤️

es increíble la forma en que explica las cosas, hace que se vea todo mas facil

Dividiría el header en 5 componentes:

• logo

• lista de items del navbar

• buscador

• select de planes

• login button

Muy largo el curso.

Convertir una página web o una app a componentes:

• Convertir un elemento en componente.
• Composición de componentes

Estructuración un componente:

• Se debe partir de un modelo base.
• Estos cambiaran de acuerdo a los atributos y propiedades (argumentos y parámetros).
• Se debe estandarizar el diseño de botones para no tener tantos. Luego agrupar tipos de botones parecidos.

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.

• LOGO
• LOGO-SECCION
• BOTON (CURSOS)
• BOTON2
• BOTON3
• BOTON4
• BOTONX
  DENTRO DE BARRA DE HERRAMIENTAS:
• INICIAR MI PLAN (filtro)
• INICIAR SESION
• BARRA DE BUSQUEDA

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

Composición de componentes
Es unir varios elementos y otros componentes en un solo componente.

El curso de Figma en la parte de creación de componentes y buscar Free Figma UI Kits en la comunidad les ayudará a comprender mejor los componentes!

div y dentro de ese div otros 3 divs y cada div para cada cosa:

usando flexbox y flexgrid

platzi.ico ul li nav en el header
(es un header)

form de iniciar sesion y login y un form de busqueda. lupa.ico

haria un navbar, un home un body un search y cada link de cursos

Primero: crearía el componente del logo que puede ser cambiante según parámetros ya que a veces no tiene ese logo de LIVE.
Segundo: el componente del menú que también podría ser responsive.
Tercero: El componente de buscador
Cuarto: Crearía un componente de Inicio de sesión
Quinto: Agregaría un componente que permita ver los planes que existen en platzi.

Identifique 4 componentes (los enlaces en el navbar, el botón de iniciar sesión, la lista de iniciar plan y el buscador) en composición de componentes incluiría el navbar

Cuando vienes del back end, esto te explota la cabeza 🤯

1. Navbar
   Botones en cada página insertada
2. Logo reactivo
   Boton
3. Botón iniciar sesión
4. Toggle de opciones
5. Search bar

Es como la logica que tiene bem de bloques elemenetos modificaores, los bloques serian los componentes

logo + live

navbar

iniciar mi plan + iniciar sesión

buscador

El menu se divide por el header y luego el menu de busqueda/inicio sesion. Dentro del header, hay el logo, y los enlaces, cada uno un componente. En el menu, hay el buscador, el selector y el boton de iniciar sesion.

Los itema (Cursos, Blog, foro, etc) como grupo son un componentes en si.
Luego, cada item individual también es un componente.
El boton del logo de platzi más lo de live son otro componentes.
Iniciar mi plan, iniciar sesión y la barra de busqueda son un componentes solo y a su vez son componentes individuales.

Material Design: https://material.io/components?platform=web

Yo los separaría así

componentes:
.-logo
.-menú(opciones de menú)
.-opcion de busqueda
.- boton iniciar sesión
.-List iniciar mi plan

Yo haria primero la composicion del nav, basandome en los componentes de logo, y navegacion.
Despues haria un componente de button, un componente de input y otro componente de checkbox.

Usualmente veo los videos en velocidad 1.5 para optimizar tiempo…pero con Juan David., no es posible😅

Yo lo dividí así, no se que opinan?

Componentes Primaros :

• Botón (“iniciar sesión” y "la lupa de buscar " es el mismo componente )
• Logo (incluye el icono de Live )
• Iniciar mi plan

Componentes Padres :

• La barra de navegación (contiene el componente Logo )
• Sección búsqueda (contiene el component Botón )
• Contenido (contiene la Sección búsqueda )

Yo dividiria el banner en lo siguiente:

1. Logo
2. BrandName
3. items Menu
4. Selector
5. Button Login
6. Search Platzi

La división en componentes sería:

1. logotipo_platzi
2. badge_live_platzi
3. iniciar_plan_button
4. iniciar_session_button
5. search_component
   5.1 search_component_input
   5.2 search_component_button
   5.3 search_component_image
6. menu_component
   6.1 menu_component_button

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Platzi</title>
</head>
<header>
<body>
<hr>
<tr>
<td>
<button><a>Platzi</a></button>
<button><a>Cursos</a></button>
<button><a>Foro</a></button>
<button><a>Agenda</a></button>
<button><a>TV</a></button>
<button><a>Contáctanos</a></button>
</td>
</tr>
<hr>
<div>
<tr>
<td>
<select>
<option selected>Iniciar mi plan</option>
<option value=“1”>Item 1</option>
<option value=“2”>Item 2</option>
<option value=“3”>Item 3</option>
</select>
<button><a>Iniciar Sesión</a></button>
<input type=“text” placeholder=“Buscar en Platzi”></input>
<button><a>Buscar</a></button>
</td>
</tr>
</div>
<hr>
</body>
</header>
</html>

yo lo diseño con 15 componentes

Yo elegiría el Logo, con su estatus de Live, como componente, el menú desplegable de plan y el botón de inicio y la barra de búsqueda, y por último uno que usa otros componentes, ese header

Antes de la explicación

• Componente Header: con dos propiedades un icono y una lista de navegación.

• Componente barra de búsqueda.

• Componente custom-button.

Después de la explicación

• Logo (con una imagen y un banner)

• Componente lista de enlaces (subcompuesto por cada componente enlace).

• Auth component que a su vez tiene 2 botones.

• Componente de búsqueda.
  Todos ellos pueden conformar un componente menú.

Separaría los componentes en los siguientes puntos:

• Logo
• Navegacion(cursos, blogs…)
• Plan
• Boton de inicio de sesión
• barra de busqueda

Logo | NavBar
Sing in | Login | SearchBar |

Yo acostumbro a dividirlos entre
UI-Elements, que son cada pedazo de codigo que se unirá a otro bloque de codigo, por ejemplo un botón. un input
Widget: es la union de varios componentes, un navbar, un modal, un formulario

Yo lo dividiría:

• Barra de Navegación
• Barra de Búsqueda
• Botones para iniciar sesión o suscripción

Principalmete desde mi punto de vista hay 4 componentes el Search, el boton de inicio de sesíon y el de iniciar mi plan y por ultimo el nav bar

Maybe I will create 4 components:

1. The header is the first
2. Each element of the header will be a component
3. The search input is another component
4. And the button to search and login will be another component.

la barra de búsqueda , el botón de inicio de sesión, el desplegable de iniciar mi plan, el logo, el botín del LIVE y finalmente el menú superior que serían básicamente pequeños componentes.

divido en dos campos principales superior e inferior posteriormente:
1er componente logo e icono live, 2do componente menu horizontal.
1er componente INiciar plan, 2do componente boton iniciar seccion. 3re componente barra de busqueda

El curso es bueno, el unico detalle es que los videos son un poco largos, haciendo que el curso sea pesado.

“Ir de lo más general a lo más especifico” No sirve hacer todos los botones de tu APP si no vas a poder terminar el menú de inicio…

https://whip-soil-3b5.notion.site/C-mo-estructurar-un-componente-0224e01bddd14b2cae623e9311e59d2b

header:
Logo
Navbar:
(append):
- Link page component(Cursos)
- Link page component(Blog)
- Link page component(Foro)
- Link page component(Agenda)
- Link page component(Tv)
- Link page component(Contactanos)
body:
menu component(Iniciar mi plan)
button component(Componente para cambiar luego las caracteristicas del boton) - Iniciar sesion
form component:
append:
-input
-button component(El mismo que utilize arriba pero cambiando el textcontent)

muy buena clase juan

¿DonDe consigo esas plantas ?

c m hace o tiene un timbre del gallo Claudio
digo digo digo!!!

1. Logo
2. Botón
3. Nav Bar
4. Dropdown menu
5. Botón
6. Search-bar
   -input
   -botón

Yo usaría un componente para el header que dentro de el tiene el logo y el navBar, usaría otro componente para el select de iniciar mi plan, otro para iniciar sesión y otro para la barra de busqueda.

componentes navbar, lista desplegable, button login y buscador

El header es un componente, el botón es otro, el navBar es otro y la lista desplegable.