React Dnd Kit - Drag and Drop en React

Подписаться 264 тыс.

Просмотров 24 тыс.

50% 1

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

Опубликовано:

21 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 51

@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 10 месяцев назад

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

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

@mathiasgarcia6757 Год назад

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

@jorgevalbuena4502 Год назад

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

@eduardoromaguera9707 Год назад

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

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

@jotave4992 Год назад

Gracias hermano, saludos de Brasil

@cufando 8 месяцев назад

Loco tenes un video para todo ! Gracias!

@FaztCode 8 месяцев назад

Esa es la idea :D

@yeso1011 Год назад

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

@tostaostr8168 Месяц назад

Fazt debería ser eterno

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

@edgardopalacios42 Год назад

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

@DilinyerCR 8 месяцев назад

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 6 месяцев назад

Me paso lo mismo

@richardmilian9959 Год назад

Genial muchas gracias fazt you are great

@파이구루 Год назад

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

@marsdev6592 Год назад

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

@Deus-lo-Vuilt Год назад

Gracias por el tutorial fazt ❤

@gposoft Год назад

Excelente Maestro gracias !

@stivenreina2267 Год назад

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

@jorgeserrato7186 Год назад

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

@raphauy Год назад

Gracias!

@JhoEspana 28 дней назад

se podría agregar botones?

@oncemil8279 Год назад

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

@jdario25 Год назад

Gracias Fazt

@francovedia5584 Год назад

Genial gracias

@weistrass Год назад

Brutaaaaaaaal

@lifeasdev7480 Год назад

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

@fernandomoran3163 Год назад

Para cuando usando autenticacion con jwt en express

@maicolfg Год назад

un dios

@snear6391 8 месяцев назад

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

@vvalero44 Год назад

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

@tuyoexcelypowerbi Год назад

Eres espectacular

@miltonrogrigoaguilarmachac9449 Год назад

Muy buen video em encanto

@Epsaind Год назад

Buenos tutoriales :D

@guadalupemontero9993 Год назад

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

@jonathancoder Год назад

super

@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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-d9y0l7yY404.html

@eliuddyn Год назад

Amazing 🔥🔥

@drezcovers1113 Год назад

Consulta, alguien sabe si funciona en mobile?

@hosseinDev 11 месяцев назад

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

@hosseinDev 11 месяцев назад

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