¿Qué es un componente? Analicemos nuestros diseños

https://www.youtube.com/watch?v=lA-4Hz9N7qA

Queremos StoryBooks en el curso!!!

StoryBooks, logra una documentación amigable y visual.
Se experimenta como tener una librería de nuestros componentes.
https://storybook.js.org/docs/basics/introduction/ documentación
https://www.youtube.com/watch?v=va-JzrmaiUM cómo isntalar StoryBook

Profesor enseñando Storybook Sacha:
STORYBOOK: LA MEJOR HERRAMIENTA PARA USAR
Storybook: Instalación y Primeros Pasos

Encontré este canal donde se habla mucho sobre StoryBooks. https://www.youtube.com/watch?v=lA-4Hz9N7qA

Les recomiendo que le echen un vistazo a bit

¿Sería una buena idea en seguir los principios de atómic design y dentro de la carpeta de componentes crear subcarpetas de átomos, moléculas, organismos, templates y páginas?
¿Alguien lo ha intentado asi?

Libreria StoryBook
https://storybook.js.org

Aquí les dejo información sobre Storybook por si quieren saber un poco mas sobre esa herramienta:
https://swapps.com/es/blog/empezando-con-storybook/
youtube.com/watch?v=lA-4Hz9N7qA

¿Qué es un componente?

• Elemento muy pequeño que puede ser reutilizado para crear otros componentes.
• Un componente es fácil de reconocer y es fácil ver donde se puede reutilizar.

¿Qué es un Storybook?

• Permiten tener documentación amigable y visual de los componentes.
• Es necesario instalarlo

Tome un descanso en este curso para practicar más sobre HTML y CSS ya que me estaba perdiendo un poco.
Después de hacer algunos cursos y proyectos vuelvo y no puedo dejar a un lado la emoción que tengo por ya aprender más sobre JS y en algún momento aprender a hacer componentes.
No me gusta estar copiando y pegando código igual jaja.

https://storybook.js.org/

Es algo completamente nuevo los Storybooks 😮

Es un problema a veces los vídeos que están en youtube, porque al menos a veces quiero continuar los cursos en mi hora de almuerzo en el trabajo y esta bloqueado en la oficina…

Storybook es una librería javascript que permite probar los componentes gráficos por medio de la separación de la lógica de negocio y del contexto de la aplicación.

Super buena aplicación del concepto de componentes!
La idea detrás de story books es también muy bien introducida!

Muy bien… trabajar diseñando por componentes te hace la vida más dulce.

Una clase interesante. Me emocinó ver el proyecto terminado.

Es primera vez que escucho de Storybooks y se ve muy interesante, Aqui les dejo el link https://storybook.js.org/

COMPONENTE
- Es un elemento muy pequeño que podemos utilizar despues para crear futuros componentes
- Se puede hacer por carpetas con todos los archivos html, css o js
- Se pueden usar Storybooks

Nos podrian indicar como avanzar con el Storybook con ejemplos? Muchas gracias

esta muy genial Storybooks

Una explicación del StoryBook que encontré en la web https://swapps.com/es/blog/empezando-con-storybook/

Aquí hay un poco más de información de los componentes.
https://developer.mozilla.org/es/docs/Web/Web_Components

Los componentes se asemejan a legos, elementos pequeños que ayudan a construir futuros componentes

Podríamos pensar en un componente como un objeto, es decir podemos reutilizarlo en cualquier parte del proyecto, podríamos tener acceso a sus estados y tambien hacer modificaciones. ?

Trabajar con componentes te facilita mucho la escalabilidad del proyecto y te ahorra mucho tiempo ya que evitas la duplicidad de código en muchas ocasiones.

Pues esta idea de componente re utilizables se ve factible en gran parte.

Genial el ejercicio de desglosar la página en componente y de identificar patrones para clasificarlos

He trabajado con componentes usando Vanilla Javascript sin ni siquiera saber que se llamaban así, ¡COMPONENTES!
Sin duda estoy aprendiendo con cada clase que avanzo. 💚

bueno ya casi vamos entonces a la practica, me gusta la teoria pero en la practiva me desenvuelvo mejor…

Les recomiendo mucho esta explicación de la filosofía detrás de HTML y CSS desde su concepción. Habla de la web como un sistema que propende por ser abierto, declarativo, accesible y compatible universalmente. De esto se derivan algunas características de HTML y de CSS que Estefany ha mencionado en las clases.

https://www.youtube.com/watch?v=aHUtMbJw8iA&t=269s&ab_channel=MozillaDeveloper

Si estás usando Wsl para aprovechar lo aprendido en el curso de Prework puedes hacer lo mismo que yo para dejar lista tu carpeta para afrontar este curso, estos son mis pasos:

1. Abrir terminal.
2. Navegar hasta mi root con el comando "cd "
3. Entrar en mi carpeta personalProjects con “cd projects”
4. Crear una carpeta para el curso de Front con el comando “mkdir front”
5. Entrar a la carpeta front con "cd front"
   6.Crear fichero buscador.html con el comando “touch buscador.html”
6. Descargar el icono usando el siguiente comando “wget https://i.ibb.co/x63CspZ/user-icon.png”.
   8.Descargar el logo usando el siguiente comando “wget https://i.ibb.co/McRBKWj/logo-platzi.png”

Y listo, recordad siempre usando los conocimientos que venimos aprendiendo. Puede que ser la ruta más difícil pero es la más gratificante.
Aún soy novato y estoy abierto a cualquier consejo, mejora…

Puedes tener una carpeta que se llame componentes. Y dentro de ellos carpetas con los nombres de cada componente.
Por ejemplo: El componente Carrusel. Dentro pondrías todos los archivos de CSS, JS y HTML
.
Otra opción es crear storybooks:
De esta forma podemos tener una documentación mucho más visual y amigable. Debemos correrla con el comando npm run storybook.
Luego de correr el comando se abrirá una ventana y se verá como una librería de nuestros componentes.

https://www.youtube.com/playlist?list=PLfWyZ8S-Xzeed53YOiAa1U5WUSA4cRxFQ

Dejo la lista ( ya que no es solo 1 video 😛 ) de storybooks de sasha…

Creo que desde que ví el curso definitivo y practico de HTML y CSS trato de ver las páginas que frecuento, para preguntarme cuales son sus componentes 😉

Donde consigo una remera de la escuela de JavaScript?

Buena clase!

love it Js a lo bien

Página de storybook: https://storybook.js.org/

Aprendiendo SASS esto es super importante, ya que te da una idea de mas o menos cuantos @imports podemos hacer para el código CSS que vamos a modularizar.

Quiero esa camisa de la escuela de JS 😦

Componentes

Los Componentes Web son un paquete de diferentes tecnologías que te permiten crear elementos personalizados reutilizables — con su funcionalidad encapsulada apartada del resto del código — y utilizarlos en las aplicaciones web.

Guía para Implementar Storybooks en nuestro proyecto

https://www.youtube.com/playlist?list=PLfWyZ8S-Xzeed53YOiAa1U5WUSA4cRxFQ

Componente es un elemento pequeño que se puede reutilizar en todo nuestro desarrollo de una pagina web.

aprendi a montar documentacion de el css o el front completamente ?

esto es super agradable, ya se para exigir a los chicos (a mi mismo) del front dicha arquitectura con documentacion y organizacion con respecto a ciertas buenas practicas y metodologias. ❤️

Los componentes son toda la estructura que se encuentra en HTML como sections , article , button title,img,incons.etc

Me gusto la clase sobre componentes y además el enlace me ayudo a refrescar las de flex y grid.

Un componente como pieza, un bloque como la estructura de tu web

Algun enlace de Storybook estaria genial. Excelente clase.

Muy buena definición del componente y muy interesante la forma como funcionan.

Es un elemento muy pequeño que podemos usar mas adelante para construir componentes.
Observar que objetos pueden llevar las mismas características de otro objeto.

Excelente clase!

Recuerda que reutilizar componentes es mas simple para llevar un codigo mantenible a lo largo del proyecto

Hola les comparto esta pequeña nota sobre esta clase, espero este bien y si algo esta mal no duden en corregidme

COMPONENTES

**Que es un componente:**un componente es un elemento muy pequeño, que se puede usar para construir componentes mas grandes y usarlos a futuro.

Como usar los componentes: Los componentes se pueden aplicar en el proyecto de las siguientes maneras.

1-Crear una carpeta ponerle un nombre preferiblemente "components" y dentro de ella crear folders con cada componente que se valla a utilizar ej. folder "buscador" (dentro tiene todos los elementos del buscador de tu proyecto)

2-Instalar Storybooks.

que es storybook ?: es una herramineta que permite tener una documentacion de todos los componentes de nuestro proyecto

mas informacion sobre story book: https://storybook.js.org

¿Qué es un Componente?
Un componente, tanto en diseño como desarrollo web, es un elemento muy pequeño que tiene la capacidad de ser reutilizado en diferentes partes de una aplicación.
Ejemplo:

• botones
• iconos
• cards, entre otras.
  
  

React Native Storybook

https://marketplace.visualstudio.com/items?itemName=Orta.vscode-react-native-storybooks

Identificar componentes para luego pasarlo a código

bootstrap seria una libreria de componentes ?

Aqui una pequenia guia de como inicia con storybook

https://swapps.com/es/blog/empezando-con-storybook/

OMG, instalando Storybook en 3, 2, 1…

Muy útil para proyectos grandes.

CHECK NOW STORYBOOK!!! Impresionante!! Gracias por el dato profe!!

storybooks ❤️

storybooks?? profe pero nunca has hablado de eso

Eso de Storybooks me recuerda a los Webcomponents de Polymer.

Intersante la herramienta storybook

Ahora a buscar un poco mas explicado lo de los storybooks

Si alguien llega a tener mi mismo error cuando quiere instalar StoryBook con el comando: npx -p @storybook/cli sb init

La solución es darle permiso de SU: sudo npx -p @storybook/cli sb init

¿Qué es un componente y cómo identificarlos dentro de la aplicación?
Es un elemento muy pequeño que lo podemos usar más adelante para construir futuros componentes.

despues de acabar este curso revisare lo de los storybooks, sin embargo aca les dejo el link del sitio oficial para uqe le den una miradita https://storybook.js.org/

Está muy cool lo de incluir storybook al proyecto

El componente es un elemento muy pequeño el cual puede ser nuevamente utilizado para crear más componentes, básicamente como las piezas de lego

A quien le pasó que viendo el video relacionado de @Rulotico se quedó picado con su curso?
Que buena vibra tiene ese profe además de ser claro.

Importante organizar todo nuestro trabajo, así será más fácil el utilizar cada componente.

Recomiendo darle un vistazo a las clases relacionadas ,en especial la del curso de Sistemas de Diseño 😉

Que hace exactamente: npm i storybook

Storybook, interesante!

https://storybook.js.org/tutorials/

Algo más bonito. Jeje.

A seguir!

a instalar https://storybook.js.org/

StoryBooks eso esta interesante

Que buena información!

Lo hace mas sencillo 😮

Excelente clase!

Identificar elementos de tu diseño antes de empezar a codificar.

Excelente clase, gracias!

Muy buena informacion, Muchas Gracias.

para ser mas claros un componente es la funcionalidad del elemento.

Un detalle a tomar en cuenta!

Super buena la clase 😃

Es como tener un mapeo de diferentes lenguajes

👍

Excelente tip. Me gustó mucho

Excelente!

Antes de empezar a desarrollar siempre hay que identificar nuestros componentes

Muy chevere storybooks