React y Tailwind - Crea componentes reutilizables y evita repetir codigo

Поділитися
Вставка
  • Опубліковано 4 січ 2025

КОМЕНТАРІ • 68

  • @arianrodriguez8219
    @arianrodriguez8219 9 місяців тому +1

    Necesitaba unos calcetines negros con un Pokémon de color fucsia dibujado, al pagarlo en la tienda, había un cartel que decía: Fazt ya lo compro!!!. Que grande eres!, cdo pienso en que necesito aprender algo, ya tienes un video y por lo general actualizado.

  • @chusOP
    @chusOP Рік тому +8

    grande fazt! me alegra que estes muy activo ultimamente!!

  • @ricardodeossa979
    @ricardodeossa979 Рік тому +9

    Excelente contenido como siempre Fazt, llevo desarrollando 1 año aplicaciones bastante complejas con react y estos pequeños detalles me motivan a mejorar mi código. Sin duda alguna lo aplicaré en un proyecto actual. 🙌

  • @joelabdielmaycanche9045
    @joelabdielmaycanche9045 10 місяців тому

    Aporte de calidad ⭐⭐⭐⭐⭐
    Este contenido es de mucha utilidad para reforzar esos conocimientos en React. A reventar ese botón de likes. Saludos

  • @YamilMedinaSafadi
    @YamilMedinaSafadi 3 місяці тому

    fazt muchas gracias, este contenido realmente no se encuentra en cualquier lado y me consta, con tus demostraciones me das muchas luces ^^.

  • @SantiagoValenciaDuque-dq7kk
    @SantiagoValenciaDuque-dq7kk 7 місяців тому

    Que grande sos, no dejes de compartir conocimientos, nos has ayudado a MILLONES de personas

  • @jonathantignino4559
    @jonathantignino4559 7 місяців тому

    Espectacular explicación. Comencé un proyecto con NextJS 14 desde una plantilla de NextUI que viene con Typescript y con tu video ahora pude entender algunas cosas. Gracias!

  • @EloyMartinGimenez
    @EloyMartinGimenez Рік тому +1

    justo lo estaba practicando de la forma mas horrible que encontré jajaja. Esta linea es genial ({...props})

  • @diegonacimiento8231
    @diegonacimiento8231 Рік тому +1

    Muy buen video y aporte Fazt 🙌🏽💪🏽

  • @tekunramirez
    @tekunramirez 8 місяців тому

    Siempre compartiendo calidad, muchisimas gracias!

  • @leoprone1
    @leoprone1 4 місяці тому

    Impresionante explicación! muchas gracias

  • @aguilarchavezalexisdaniel6497
    @aguilarchavezalexisdaniel6497 Рік тому +1

    Como siempre, excelente contenido Fazt

  • @EduardoMeneses-mi1lr
    @EduardoMeneses-mi1lr Рік тому +2

    Gracias Fazt, estaria genial terminar haciendo un shadcn, me refiero a que explicaras como usan ctx, etc. para el tema de las clases de tailwind y las variantes. Saludos

  • @Adsn
    @Adsn Місяць тому

    ha sido de gran ayuda , muchas gracias

  • @pegchan23
    @pegchan23 Рік тому +1

    Gracias Fazt , excelente contenido !

  • @isaacmc09
    @isaacmc09 Рік тому +3

    Gracias por el video fazt, podrías hacer tutoriales de este mismo tema pero usando solo javascript y webcomponents (para los más puristas como yo).
    Saludos y éxitos

  • @ariel18012
    @ariel18012 Рік тому +1

    Excelente contenido Fazt como siempre, de lo mejor de YT, sigue asi profundizando estos temas.
    Conoces la librería propelauth, algún tutorial, se ve que tiene potencial para un login o app B2B.

    • @FaztCode
      @FaztCode  Рік тому +2

      No lo he utilizado, pero suena muy interesante, voy a probarlo para crear un video del tema :)

  • @abelmurua6980
    @abelmurua6980 Рік тому +14

    Excelente!!! algun video de estructura de carpetas? para ser mas ordenado con la estrucctura , tal cual como el ejemplo de el UI con su index.ts y tyepscript para los que usamos mas javascripts?

    • @FaztCode
      @FaztCode  Рік тому +27

      Es una buena idea de tutorial, voy a crear algo pronto

    • @bigtronicas.a.s354
      @bigtronicas.a.s354 Рік тому

      @@FaztCode Muy bueno Fazt!

  • @ConradoCarlosAlbertoGonzalez
    @ConradoCarlosAlbertoGonzalez 5 місяців тому

    muy buen material, muchas gracias fazt code

  • @yeky14
    @yeky14 Рік тому +1

    Gracias hermano ❤

  • @renzosanchez9283
    @renzosanchez9283 Рік тому

    Me encantan tus vídeos loco, sigue así 👏🏽

  • @yelitzanieto1250
    @yelitzanieto1250 Рік тому +4

    muy buen video
    puedes hacer uno desarrollando un landing page con form con react,mongodb,nodejs y mas algo completo

  • @miltonrogrigoaguilarmachac9449

    Eres el mejor

  • @Karldev95
    @Karldev95 4 місяці тому

    Excelente video. Gracias.

  • @isroellitvack8048
    @isroellitvack8048 10 місяців тому

    Q bien q explicas ❤

  • @joze.rios44
    @joze.rios44 9 місяців тому

    Fazt siempre el mejor

  • @TheRubiosMusic
    @TheRubiosMusic Рік тому +1

    Excelente! WOW!

  • @Luis333rules
    @Luis333rules Рік тому +1

    Hay manera de obtener el autocompletado si mi proyecto no usa TS ?

  • @allanestrada8516
    @allanestrada8516 Рік тому +4

    Yo hago algo parecido pero en lugar de separar todo el componente para luego reutilizarlo, solo lo hago con la clases.

  • @tomich20
    @tomich20 Рік тому +2

    Gracias, hubiera estado bueno ver un objeto de Botón con sus variantes (warning, info, danger, etc..)

  • @gonzalofernandez8636
    @gonzalofernandez8636 Рік тому +1

    Que tal Fazt, excelente video, también se podría copiar las props de la misma forma que lo haces en el vídeo pero, usando React ?

  • @danielbarraza927
    @danielbarraza927 7 місяців тому

    Pregunta, no se usa mas NPM create-next-app?

  • @GratCode
    @GratCode Рік тому +1

    Que idea genial, pero una pregunta: al momento de utilizar los props, como se haría la misma funcionalidad en js?

  • @sebastianmedina5106
    @sebastianmedina5106 4 місяці тому

    buen video gracias

  • @abcd4rio
    @abcd4rio 5 місяців тому

    GRACIAS

  • @carlosmbravoa
    @carlosmbravoa Рік тому

    ¿Cómo haces para saber tanto? Eres mi Meta, quiero saber casi tanto como tú!

  • @Yasma527
    @Yasma527 Рік тому +1

    Gracias Fazt... Pudieras hacer un video hablando sobre Lit Element?? Saludos

    • @FaztCode
      @FaztCode  Рік тому +2

      Si es una buena idea :)

  • @hrivera4201
    @hrivera4201 Рік тому

    Fazt espero que pronto nos puedas hablar de de styleX al parecer se puede venir con fuerza.

    • @FaztCode
      @FaztCode  Рік тому

      Es buena idea, voy a preparar un video del tema, gracias por la idea :)

  • @56f5dbc3
    @56f5dbc3 9 місяців тому

    Excelente video. Una consulta, como hago si quiero dar una personalización extra en estilo del componente. Por ejemplo con tailwind tengo el estilo del componente Input y este lo implemento con name, lastname, password. Pero por ejemplo quiero que solo en password tenga otro color el hover. Cómo hago? Puedo reutilizar el componente Input?

  • @manularrere
    @manularrere 11 місяців тому

    Muy bueno

  • @danieltorres7634
    @danieltorres7634 Рік тому +4

    Tengo lo mismo para varios proyectos, puedes enseñar subirlo como paquete de npm.
    asi cuando actualice uno, y decida actualizar los demás solo haga una actualización de mi paquete, por fas

    • @FaztCode
      @FaztCode  Рік тому +5

      Esa es una buena idea para un tutorial, voy a crear algo pronto

  • @kaneda1204
    @kaneda1204 9 місяців тому

    Hola, excelente video. Muy claro y preciso!
    Tengo una duda, estoy arrancando con tailwind y vi que sacaste un componente de la pagina pero cuando ingreso me dice que son pagos. Como puedo sacar componentes de esa pagina? O hay otras?
    Gracias de antemano!!!

  • @tomyloko100
    @tomyloko100 Рік тому

    Hay alguna diferencia en utilizar un nombre de className y usar directamente el @apply en el archivo CSS? Yo lo hice así, pero no estoy seguro de si es la mejor forma de meter CSS porque tener muchas clases en un Div de HTML se me hace difícil de leer.

  • @xelaju3d
    @xelaju3d 3 місяці тому

    Hay alguna desventaja o situación que no deje hacer Tailwind UI en su versión gratis? Veía que tiene una versión pagada

  • @alexod3313
    @alexod3313 Рік тому +1

    Gran video fazt, una pregunta solamente, solo funciona con TypeScript? O también existe su equivalencia en JavaScript?

    • @FaztCode
      @FaztCode  Рік тому +2

      Esto se puede hacer con javascript sin problemas

  • @mis2michis726
    @mis2michis726 9 місяців тому

    Gracias por los consejos profe. Yo intenté hacer un botón reutilizable en el que tenía un color por defecto pero también podía recibir uno props si ek botón lo requería. Lo hice usando las clases de tailwind pero por alguna razón no me actualizaba el color. Lo mismo me sucedió con un spinner, no me agarraba el color o el tamaño pasado por props 😢. Alguien sabrá por qué?

  • @BlueSouls
    @BlueSouls Рік тому +1

    Podrías crear un video sobre Reflex de python?

  • @felipetutech
    @felipetutech 4 місяці тому

    En caso de que usemos react js en mejor usar proptypes en vez de usar Interfaces de TypeScript?

    • @FaztCode
      @FaztCode  4 місяці тому +1

      Si claro, si no usas Typescript, puedes usar prop-types para comprobar los props

  • @thiago_almarazz
    @thiago_almarazz Рік тому +1

    🙌🏼🙌🏼

  • @maximolive
    @maximolive Рік тому +1

    crack

  • @diego13999
    @diego13999 Рік тому

    Su canal de Twitch lo borro?

  • @yamirmogollonosorio4027
    @yamirmogollonosorio4027 2 місяці тому

    genial pero realmente valdria la pena ?

  • @DaviiddCc
    @DaviiddCc Місяць тому

    y con javascript? sin tipar ? :0

  • @yelitzanieto1250
    @yelitzanieto1250 Рік тому +2

    hola

  • @code1866
    @code1866 Рік тому

    Que feo se ve el html con tanta utilidad... donde este css nativo y una buena metodología css que se quiten estas herramientas.
    Debe ser horrible mantener un proyecto de tailwind y ya ni te cuento el actualizar componentes a una versión superior que tenga breaking changes.

    • @ManuelRico1098
      @ManuelRico1098 Рік тому

      Realmente mantenerlo puede ser relativamente más fácil. Cuando quieres modificar el estilo vas directamente al componente que tiene ese in-line style. Con css nativo tendrías que ir al archivo css (pueden ser varios) y esperar que los archivos de más alto nivel no afecten a como vas a modificar ese componente en específico

    • @code1866
      @code1866 Рік тому

      @@ManuelRico1098 todo depende de lo atómico que tengas tu css. Sin una buena metodología puede pasar. Pero esa es la diferencia entre un júnior y un senior.

    • @jeffwoodyart3255
      @jeffwoodyart3255 Рік тому

      tengo entendido que tailwind te ayuda en mas cosas como en css que no se usa, digamos que tienes un css de un botón que tiene un hover pero nunca haces hover en ese boton, al final cientos de lineas de css no usadas esperando, al ser tailwind de utilidad es posible que otro componente este usando hover y si se esta usando y solo se esta exportando una vez para todooodo el proyecto.

  • @danielbarraza927
    @danielbarraza927 7 місяців тому

    Gracias FAZT excelente video genio!!!.