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/faz...
Tutorial Escrito:
faztweb.com/co...
⭐ 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/8ef2...
Namecheap ⮕ namecheap.pxf....
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!

[@castrogarciajs]

Gracias Fazt, estoy en un proyecto de drag and drop justo me preguntaba con qué biblioteca se implementaba 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.

[@joaquinbustelo7889]

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

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

[@brandonlopez6328]

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

[@tostaostr8168]

Fazt debería ser eterno

[@jorgevalbuena4502]

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

[@mathiasgarcia6757]

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

[@cufando]

Loco tenes un video para todo ! Gracias!

[@FaztCode]

Esa es la idea :D

[@eduardoromaguera9707]

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

[@yeso1011]

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

[@jotave4992]

Gracias hermano, saludos de Brasil

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

[@Deus-lo-Vuilt]

Gracias por el tutorial fazt ❤

[@richardmilian9959]

Genial muchas gracias fazt you are great

[@gposoft]

Excelente Maestro gracias !

[@jorgeserrato7186]

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

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

[@marsdev6592]

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

[@maicolfg]

un dios

[@stivenreina2267]

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

[@oncemil8279]

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

[@snear6391]

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

[@francovedia5584]

Genial gracias

[@fernandomoran3163]

Para cuando usando autenticacion con jwt en express

[@jdario25]

Gracias Fazt

[@edgardopalacios42]

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

[@user-iv2ju1oe2n]

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

[@miltonrogrigoaguilarmachac9449]

Muy buen video em encanto

[@raphauy]

Gracias!

[@YosipmikeColin]

MUY BUEN VIDEO 🤙

[@FaztCode]

Gracias :)

[@Epsaind]

Buenos tutoriales :D

[@weistrass]

Brutaaaaaaaal

[@jonathancoder]

super

[@guadalupemontero9993]

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

[@lifeasdev7480]

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

[@eliuddyn]

Amazing 🔥🔥

[@drezcovers1113]

Consulta, alguien sabe si funciona en mobile?

[@tuyoexcelypowerbi]

Eres espectacular

[@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()

[@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 th-cam.com/video/d9y0l7yY404/w-d-xo.html

[@vvalero44]

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

[@cristianaquileoserranourib7606]

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

[@Holri]

Master 💀