React Dnd Kit - Drag and Drop en React

React Dnd Kit es una biblioteca que te permite tener crear funcionalidades de Drag and Drop dentro de tus componentes, basicamente lo que hace es crear un contexto y luego puedes decidir que componentes tengan interactividad como arrastrar, soltar o ser ordernados. En este ejemplo crearemos un proyecto sencillo usando Vitejs y aprenderemos a crear una lista ordenable.
Código del Ejemplo:
github.com/fazt/react-dnd-kit...
Tutorial Escrito:
faztweb.com/contenido/react-d...
⭐ Cursos Recomendados
Curso de Nodejs ⮕ fazt.dev/nodejs
Curso de React ⮕ • Curso de Reactjs desde...
Curso de Javascript para React ⮕ • Javascript para Aprend...
🗣 Redes Sociales
⮕ Twitter / fazttech
🎒 Servicios Recomendados
DigitalOcean ⮕ m.do.co/c/8ef261d77de5
Namecheap ⮕ namecheap.pxf.io/ErDe9
Ledger ⮕ (Hardware Wallet) bit.ly/3ijsVNW
SiteGround ⮕ bit.ly/31u9ZEk
Cloudinary ⮕ bit.ly/3ohNlJ7
🌎 Sitio Web
fazt.dev

[@isroellitvack8048]

Con los video de fazt primero un like, y luego lo miro!

[@joaquinbustelo7889]

Justo estoy haciendo una app como trello y me biene de lujo!, un gusto siempre encontrarte primero

[@castrogarciajs]

Gracias Fazt, estoy en un proyecto de drag and drop justo me preguntaba con qué biblioteca se implementaba en react 🎉❤

[@brandonlopez6328]

Que bárbaro, muchísimas gracias bro! Excelentemente explicado tu tutorial

[@jorgevalbuena4502]

Gracias Fazt......estoy con tu curso de react y este es un buen complemento....

[@cesarperez5576]

Graaacias Fazt!! Que buen contenido. Haz considerado realizar un video sobre Feature Flags y React? Sería genial, ya que casi no hay contenido sobre eso.

[@mathiasgarcia6757]

Gracias fazt!!!!justo estaba buscando un librería para poder hacer dnd en react !!!

[@NeoAres1]

¡Gracias! He seguido el tutorial al dedillo implementándolo en el proyecto de Task (el del curso React), y funciona genial. PD: Un dato importante añado, si el id de uno de los items es 0, el dnd kit no lo coge bien, los id hay que comenzarlos desde 1 en adelante.

[@Deus-lo-Vuilt]

Gracias por el tutorial fazt ❤

[@yeso1011]

Genial, ...esperando un practico de svelte-kit 🙃

[@eduardoromaguera9707]

Buen tutorial para un primer contacto con la librería :D

[@mannuele8714]

Buenos videos, siempre busco tus tutoriales como primera opción. Podrás hacer un video de cómo hacer con múltiples listas (kanban)

[@jotave4992]

Gracias hermano, saludos de Brasil

[@edgardopalacios42]

Excelente video 🎉 Me surge una duda, que terminal está usando, porque veo que le sugiere comandos al escribir.

[@cufando]

Loco tenes un video para todo ! Gracias!

[@FaztCode]

Esa es la idea :D

[@oncemil8279]

Gracias, excelente tutorial. Puedes hacer uno usando Nhost en la modalidad Self-Host. Authenticacion y roles?. Saludos y gracias.

[@richardmilian9959]

Genial muchas gracias fazt you are great

[@gposoft]

Excelente Maestro gracias !

[@marsdev6592]

Se puede aplicar mediante múltiples listas usando un context entre ellas?

[@jorgeserrato7186]

Hola fazt, podrias pasar las extensions que usar para el autocompletado?

[@jdario25]

Gracias Fazt

[@Epsaind]

Buenos tutoriales :D

[@miltonrogrigoaguilarmachac9449]

Muy buen video em encanto

[@raphauy]

Gracias!

[@fernandomoran3163]

Para cuando usando autenticacion con jwt en express

[@lifeasdev7480]

se puede hacer eso usando class react en vez de una funcion?

[@francovedia5584]

Genial gracias

[@eliuddyn]

Amazing 🔥🔥

[@weistrass]

Brutaaaaaaaal

[@user-iv2ju1oe2n]

21:06 Can you tell me, what is the Name of vscode autocomplete Extension? That is printed "const newPeoPle = [... people]".

[@stivenreina2267]

muy buen video, pero cuando situó los elementos horizontalmente se ve extraña la animación

[@snear6391]

Hola! alguien sabe por qué useSortable me devuelve transform y transition como null y undefined respectivamente?

[@maicolfg]

un dios

[@tuyoexcelypowerbi]

Eres espectacular

[@DilinyerCR]

Me funciono bien! solo que mis funciones dejaron de funcionar, tengo una funcion para eliminar tarea otra para marcar como completada, simplemente dejaron de funcionar.

[@alexmon689]

Me paso lo mismo

[@drezcovers1113]

Consulta, alguien sabe si funciona en mobile?

[@jonathancoder]

super

[@guadalupemontero9993]

Buenas, no me funciono a mi! Sera porque es una pwa ?

[@hosseinDev]

el primer elemento en la lista no lo puedo mover, alguien sabe por qué pasa eso?

[@hosseinDev]

hahahaah me da mucha risa porque no lleva ni un minuto mi comment y ya lo arreglé, había iniciado mis ids en cero, entonces no lo tomaba en cuenta el hook de useSortable()

[@vvalero44]

Ven lo que digo? Lee las mentes, sabe lo que necesitamos. Eso o nos escucha a través del móvil

[@josuemunozavila5038]

0:42 buen video, me podrías decir que es lo hace que se autocomplete el comando en la terminal?.

[@FaztCode]

Es por oh muy Posh kzbin.info/www/bejne/mmrcYZ9trr5nZpY

[@cristianaquileoserranourib7606]

Soy el único que nota algo raro en la voz de la intro?

[@Holri]

Master 💀

[@YosipmikeColin]

MUY BUEN VIDEO 🤙

[@FaztCode]

Gracias :)