Mis Bibliotecas favoritas de React en 2024
Vložit
- čas přidán 5. 09. 2024
- Cuando desarrollo proyectos web con React, usando Nextjs como framework por ejemplo, uso muchos paquetes de npm para manejar formularios, subir imagenes, autenticar usuarios, crear tablas y muchas otras tareas. Entre estos paquetes puedes encontrar a react-hook-form, zustsand, sonner, react tanstack table, next-auth, react-select, shadcn/ui, tailwindcss, tailwindui y muchas mas.
Curso Recomendados
Curso de React: • Curso de Reactjs desde...
Curso de Nextjs: • Curso de Nextjs desde ...
🛒 Fazt Web
Tienda Online: store.faztweb....
⭐ Cursos Recomendados
Curso de Nodejs ⮕ fazt.dev/nodejs
Curso de Python⮕ faztweb.com/py...
Curso de React ⮕ • Curso de Reactjs desde...
Curso de Javascript para React ⮕ • Javascript para Aprend...
🗣 Redes Sociales
Github ⮕ github.com/fazt
Twitter ⮕ / fazttech
Discord ⮕ faztweb.com/so...
Whatsapp ⮕ www.whatsapp.c...
🎒 Servicios Recomendados
DigitalOcean ⮕ m.do.co/c/8ef2...
Namecheap ⮕ namecheap.pxf....
Ledger ⮕ (Hardware Wallet) bit.ly/3ijsVNW
SiteGround ⮕ bit.ly/31u9ZEk
Cloudinary ⮕ bit.ly/3ohNlJ7
Notion ⮕ affiliate.noti...
Codecrafters ⮕ app.codecrafte...
Puedes encontrar la lista de tutoriales de React en:
faztweb.com/react
#reactjs #javascript #desarrolloweb #nextjs
Tailwind css
Clsx
Tailwind-merge
Tailwind ui
Shadcn
Material ui
Zustand
Storybook
React-select
React-hook-form
Zod
React-tanstack-table
React-dropzone
Next-auth
Sonner
Dnd kit
Para componentes y utilidades me gusta mucho mantine ui, tiene varios conponentes utiles y una gran variedad de hooks, también cuenta con su propio control y validación de formularios como react hooks forms que funciona bastante similar e igual muy sencillo de utilizar junto con zod.
Algun consejo para los que apenas estamos aprendiendo a usar React y sus librerias, la verdad a veces para implementar me toca usar ChatGPT para que me ayude a ajustar las cosas y mas o menos orientarme en donde van, pero claro, copio a mano para ir aprendiendo y no estar copiando y pegando que uno siente que no aprende nada
Nextui ya tiene el remplazo de react-select se llama autocomplete muy práctico y le podemos dar más estilo con tailwind para quienes ya lo tienen integrado en sus desarrollos. Excelentes recomendaciones me llevo algunas para mis futuros proyectos
Como siempre gran video, Fazt! Quería consultarte si tienes pensado traer algo de C# o Azure, sería interesante y complementario a tu amplio repertorio de tutoriales. ¡Saludos, amigo! 👋👋
Si creo que vale la pena empezar a traer algo de ese Stack, voy a tratar de integrarlo pronto, gracias por la sugerencia @UskoKruM2010 :)
@@FaztCode Un placer, amigo 💪
No sabía de NextAuth sorry 😳
Gracias por el dato 👍
La API de Unsplash, para obtener imágenes de stock, útil para cuando quieres mostrar un proyecto con imanes rápidamente.
Estaria genial si desarrollas una aplicación usando todas estas bibliotecas
Si duda, sería súper cool ver una app más “real para producción” aunque lleve varios videos.
No estaba seguro de Sonner pero ahora si lo usaré :)
La biblioteca de Mantine tiene integrada muchas de las biblios. que mencionaste en este video.
Para tablas utilizo material datagrid.
Esto es oro puro, muchas gracias.
gracias Fazt, ya que podemos pedir, pues un tutorial para storybook, react-select o table creo que no los vimos, en espera ;)
De react select y tanstack table ya he creado pero el de storybook si está pendiente :)
@@FaztCode de react-table si esta muy bueno no mas que no profundisaste o almenos eso me gustaría mucho ya que me complico con el tema de definir anchos a las columnas, resize etc 😅😬
por eso no me gusta mucho react, depende de bibliotecas externas que no precisamente estaran actualizadas siempre.
Toda esta información es súper útil, espero poder utilizar alguna de estas librerías para nuevos proyectos
Para mi, estas son muy buenas librerias, sin embargo, ya depende de lo que requiera el proyecto.
-React-leaflet: Para mapas como google map pero gratuito.
-Swipper: Para sliders.
También esas son excelentes 👏
Muy buenas, utilizo casi las mismas y estos videos nos sirven para ir comparando y reforzando nuestros stack. Siguiendo la linea de los videos que has subido, ¿Tienes algo pensado respecto a comunicación y organización con Backend? Ejemplo: React Query, TRPC, REST, Graphql, Monorepos. También nos sería util un video con el stack y técnicas de testing que utilizas en el día a día unit, functional y e2e. Saludos!!
gRacias krak muy interesante , ademas que usando todas estas librerias nos dedicamos mas tiempo a la logica e implementaciones de mejores funciones, un golazo !!!
Me cayó como anillo al dedo, justo todo lo que necesitaba. Gracias!!
Muchas gracias Fazt, es increíble el apoete que le das a la comunidad y lo esclarecedor en tantos temas. Sigue asi. Dios te bendiga
Gracias por el apoyo Nicolás :)
Hi, how are you fazt? How ever yours tuto are excellent. But I would like to know when you will post a tuto about zustand integration rest api express. Thanks!
gracias por compartir Fazt .... a algunos de nosotros nos viene muy bien esa info..
Maestro,debería hacer un proyecto fullscatck donde implemente todas estas librerías.
Es una buena idea para un proyecto largo, voy a ir creando un ejemplo pronto
Hola Fazt el contenido que compartes es Genial , excelente , podrías hacer un tutorial sobre el Framework Remix
Creo que es una excelente idea, voy a crear un minicurso del tema pronto
Te rezo Fazt!! 🙌🙌 Muchas gracias por compartir recursos tan útiles.
Podrías de favor considerar un tutorial de Next.js 14 para cargar múltiples imagenes de forma simultanea con react dropzone hacia S3 mostrando el progreso de cada archivo por favor?
De antemano gracias!
Excelente Fazt!! Ando volviendo al desarrollo de React y probaré tus recomendaciones 😎
¡Muchas gracias por compartir, maestro!
Muy buen video fazt me gustaría uno para cosas de backend.
Es una buena idea, voy a elaborar uno pronto :)
framer motion tambien lo uso :D
react-select me fue complicado de cambiar los estilos, y mas con tailwind.
Sería bueno un tutorial de Storybook!
super todas las recomendaciones que mencionas ya están anotadas , aunque yo reemplazaría react select por un Autocomplete de Material Ui y el TanStack por una DataGrid también de Material Ui , que me parece que material tiene esos componentes en un nivel impresionante y la documentación es excelente yo recomendaría esas dos mucho mas
Gracias por el video, desde ya esperando el de Auth.js con Express
Despacio franchute esto es oro!!! 😅☺
jajaj
Tailwind es lo mejor ❤
Super. Referente a next auth, me suerge la duda en next autenticas en front y el servidor desconoce o como lo implementad tu normalmente? Grácias
Gracias por las sugerencias siempre me ayudas mucho con las mismas! Como consulta... si creo un proyecto de Reacr con Vite, puedo utilizar nextAuth? Saludos y gracias por el contenido
Me gustaría saber que biblioteca usas para manejar fechas y localizaciones. Incluso que ui para seleccionar fechas o calendarios.
Gracias por el video 😊
Hola fazt, gracias por el video!. Sabes una biblioteca para editar una prenda de ropa para una tienda?
todo esto es oro muchas gracias
excelente, muchas gracias
super util el video 😁😁
Puedes hacer un video de como usar Nextjs 14 en Cloudflare Pages?
También utilizo react-dnd pero al utilizarlo en Nextjs se traba por así decirlo 😢
redux creo mejor que sustand debido a la escalabilidad que tiene el problema esque es vieja y te vas a topar con mucho codigo e implementaciones antiguas a la nueva de redux/toolkit
Muchas Gracias Fazt Code
fast, una consulta si tengo un proyecto que fue creado con el comando npx y luego quiero usar ese mismo proyecto pero usando o convertirlo en vite es posible de antemano gracias
Vale la pena seguir usando framer-motion o pesa demasiado?
Maestro de maestros.
genial
Te amo faztcode
Muy buenas recomendaciones. Quizas React Router Dom, Wouter o TanStack Router pueden ser buenas tambien para apps Client side preferentemente
Son muy buenas recomendaciones:)
@@FaztCode de estas cual la usas y porque?
faltó Radix-UI 👌
Seria bueno hacer lo mismo pero con Vue
Sería bueno mencionar bibliotecas para componentes WYSIWYG
Es un excelente idea, siempre hay nuevas y cada una varia mucho, voy a crear algo pronto
Muchas gracias
. Ya mismo me pongo a testear el hook forms estaba haciendo todo a mano.. siy muy noob 😁
Aqui te dejo un tutorial del tema :)
czcams.com/video/1MxevPIZgVc/video.html
Muchísimas gracias por tu contenido!
Nextauth es solo para react Next o puedo usarla para react Vite también?
fazt habla mas de storybook porfa parece bueno
Tqm Fazt
Zod sirve para un formulario de react hook form hecho con javascript?
Si claro, también puedes usar zod si solo usas JavaScript, ya sea en el frontend o en el backend
Que te parece Formik? Creo que es competencia de React Hook Form
Es otra opcion que usaba anteriormente, pero react-hook-form es mucho mas veloz y es menos verboso, es decir hace lo mismo con menos lineas de codigo
en un proyecto puedo usar Material UI y Tailwind??
Si claro, puedes usarlo conjuntamente, aunque tambien quizas puedes considerar este otro proyecto que permite usar ambos en un mismo paquete:
www.material-tailwind.com/
Qué opinas de react-hot-toast?
Estos días más sonner que hoy-toast, me parece que tienes más funcionalidades
@@FaztCode Perfect lo investigaré
Pregunta que hago consideras que nextjs este capacitado para llevar todo un backend y frontend al mismo tiempo ya que comentaste que los separabas cuando se hacia muy grande pero siento que de esa manera next pierde el potencial que tiene dejanos tu opinión de porque lo haces
Esta interesante tu pregunta para un video, dejame que lo grabe hoy, y lo publico mañana :)
Gracias por la pregunta @nikolaydiazromero4466
@@FaztCodeuna duda que tengo yo es por ejemplo si tengo una app con next y la autenticacion esta hecha con supabase, pero en el caso necesite una API aparte con algun tipo de logica, y que esta se llame desde el front, como se podria resolver el tema de autorizacion? anteriormente era facil validando el jwt cuando la autenticacion se hacia desde la misma api, pero hoy dia no me queda claro como seria en este caso
en todos mis proyectos acabo usando redux
Master ¿me recomiendas más React que Angular?.
Eso siempre es algo que dependa de tu oferta laboral, siempre es bueno investigar primero en sitios como linkedin los perfiles de empresas que te interesen y si solicitan mucho Angular, puedes aprenderlo
en lo personal como soy freelance el usar React con Next y Node me ahorra mucho tiempo.
Fazt consulta, porque no manejas estado en Next? Como lo reemplazas/manejas a esto en Next? Gracias
Normalmente en next los estados los manejas el la URL ya que al ser un framework de backend puedes acceder y detectar cuando cambia no soy un experto pero es lo que puedo aportar.
Gracias por el comentario! Me paso en un proyecto que teniamos que mantener datos (pero sin persistirlos ej: localStorage) en un estado a traves de multiples rutas y componentes, y usamos Context que terminó siendo un state management global. Por eso me surgía la duda.
gente es recomendable empezar a usar estas librerías si recién estoy aprendiendo a usar react?
Después de aprender las bases ya podrias empezar a usarlas. También puedes elaborarlas desde cero pero la idea es que puedas ahorrar tiempo y usar algo que está probado y simplifique el desarrollo
una para el backkkk
Es buena idea voy a crear uno para el backend tambien pronto :)
React se invento para complicar más el front end lol
Muchas gracias fazt :D
Por qué parece que hablas siempre deprimido?
yo creo por lo general hablo con sueño :)