React y Tailwind - Crea componentes reutilizables y evita repetir codigo

[@ricardodeossa979]

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

[@chusOP]

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

[@jonathantignino4559]

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!

[@YamilMedinaSafadi]

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

[@arianrodriguez8219]

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.

[@SantiagoValenciaDuque-dq7kk]

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

[@joelabdielmaycanche9045]

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

[@EloyMartinGimenez]

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

[@abelmurua6980]

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]

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

[@bigtronicas.a.s354]

@@FaztCode Muy bueno Fazt!

[@isaacmc09]

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

[@EduardoMeneses-mi1lr]

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

[@leoprone1]

Impresionante explicación! muchas gracias

[@tekunramirez]

Siempre compartiendo calidad, muchisimas gracias!

[@ariel18012]

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]

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

[@diegonacimiento8231]

Muy buen video y aporte Fazt 🙌🏽💪🏽

[@yelitzanieto1250]

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

[@aguilarchavezalexisdaniel6497]

Como siempre, excelente contenido Fazt

[@tomich20]

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

[@pegchan23]

Gracias Fazt , excelente contenido !

[@allanestrada8516]

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

[@Yasma527]

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

[@FaztCode]

Si es una buena idea :)

[@miltonrogrigoaguilarmachac9449]

Eres el mejor

[@carlosmbravoa]

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

[@hrivera4201]

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

[@FaztCode]

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

[@ConradoCarlosAlbertoGonzalez]

muy buen material, muchas gracias fazt code

[@GratCode]

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

[@yeky14]

Gracias hermano ❤

[@TheRubiosMusic]

Excelente! WOW!

[@joze.rios44]

Fazt siempre el mejor

[@gonzalofernandez8636]

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 ?

[@Karldev95]

Excelente video. Gracias.

[@renzosanchez9283]

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

[@danieltorres7634]

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]

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

[@BlueSouls]

Podrías crear un video sobre Reflex de python?

[@isroellitvack8048]

Q bien q explicas ❤

[@Luis333rules]

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

[@alexod3313]

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

[@FaztCode]

Esto se puede hacer con javascript sin problemas

[@kaneda1204]

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!!!

[@sebastianmedina5106]

buen video gracias

[@abcd4rio]

GRACIAS

[@56f5dbc3]

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?

[@danielbarraza927]

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

[@manularrere]

Muy bueno

[@felipetutech]

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

[@FaztCode]

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

[@thiago_almarazz]

🙌🏼🙌🏼

[@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]

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

[@maximolive]

crack

[@mis2michis726]

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é?

[@yamirmogollonosorio4027]

genial pero realmente valdria la pena ?

[@diego13999]

Su canal de Twitch lo borro?

[@yelitzanieto1250]

hola

[@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]

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]

@@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]

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]

Gracias FAZT excelente video genio!!!.