React Typescript: Librería de Componentes. Storybook - EP-3
Vložit
- čas přidán 9. 09. 2024
- Como Crear tu propia Libreria de Componentes Basada en Tailwind.
En este video estaremos aprendiendo a utilizar Storybook, crearemos nuestros 3 componentes finales que serán los que publicaremos a NPM y estaremos probandolos en una aplicación Next Js.
Además estaremos aprendiendo a crear Componentes Polimórficos los cuales nos van a permitir cambiar la estructura de un elemento HTML pasandolas por parametros
Repositorio proyecto terminado: github.com/anj...
Repositoria aplicación Next js para probar la librería: github.com/anj...
Paquete NPM Anjrot Components: www.npmjs.com/...
Aplicación Storybook: anjrot-compone...
Storybook Docs: storybook.js.o...
Documentación Genericos en Typescript: www.typescript...
Necesitas ayuda unete a mi comunidad: / discord
Te dejo una guía que escribí en mi blog por si necesitas una ruta para aprender a programar: anjrot.com/tut...
Si te gusta este tipo de tutoriales, dale like, comenta y comparte.
Saludos
Anjrot
Muchas gracias, la explicación fue bastante clara
Hola, gracias por tu comentario, me alegra que se haya entendido, saludos
Gracias! La verdad haces una buena labor con estos videos
Gracias por el comentario, me alegra que te estén ayudando mis videos, Saludos
@@anjrotdev Agradeceria tu ayuda
@@negrittohh Hola dime que necesitas para ayudarte, estoy en discord ahora por si te quieres llegar allá discord.gg/qjeMn6Cy
@@anjrotdev Hola ya lo solucione era vite que ingrese typescript con SWC :P y solo debi ingresar typescript
espero no tardes el proximo episodio! no se si sera el ultimo, pero seria bueno que comparterias el repositorio! Se que pido mucho, pero seria de mucha ayuda!
Hola @elgondo2914 de verdad muchas gracias por seguir la serie, esta semana mas tardar este fin, subo el ultimo video y allí actualizaré todos los videos con el repositorio, en el ultimo video verán la creación del repositorio en github y como realizar la automatización para publicar a NPM cuando hacemos un Push a master, Saludos.
Buenas podrías explicar cómo se podría aunque estemos utilizando tailwind ,poder también añadirles clases de ccs para el tema de animaciones que no se puedan hacer con tailwind .gracias muy buen trabajo un saludo
Gracias por tu comentario, eso sería un buen tema para un proximo video, saludos
que grande justo esta buscando la forma de poder controlar que elemento me renderiza el elemento de la librería, pero tengo una inquietud a veces en las librerías como en como chakra ui se le pasan elementos de react como parametro y obtienen los tipos de estos y se renderizan con los estilos de la libreria:
import { Link as ReactRouterLink } from 'react-router-dom'
import { Link as ChakraLink, LinkProps } from '@chakra-ui/react'
;
Home
como se podría hacer esto?
Hola @lempsoftsocial9234 gracias por tu comentario, me alegra que te haya servido, lo que comentas acerca como funciona el "as" en chakra-ui para recibir un componente como valor del "as", es completamente posible hacerlo con la implementación del componente polimórfico que explico en el video, en este caso nosotros no le pusimos muchos estilos al componente Text, pero si le colocas los estilos que quieras y luego le pasas por el ejemplo el Link de react-router-dom en el "as", debería funcionarte agarrando tus estilos de la misma manera, al final todos ellos en sus propiedades extienden a React.ElementType, lo que lo hace completamente valido para pasarselo al "as" de nuestro componente texto. Por lo que con lo que estas viendo en el video vas a poder reutilizar componentes de otras bibliotecas. Espero que esto te sea muy útil. Saludos