Cómo estructurar un componente

3/28
Recursos

Aportes 46

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

👉 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

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

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.

Para este reto yo tendría los siguientes componentes: logo, tag, MenuButton, navBar, dropdown, actionButton, Input, iconButton, searchInput.

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>

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.

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.

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.

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

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.

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!

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

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

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.

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

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.

¿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.