For those who can't compile at the end, change "import Backend from 'react-dnd-html5-backend';" to "import { HTML5Backend } from 'react-dnd-html5-backend';"
I know this is a little dated, comment but you can also "import {HTML5Backend as Backend} from 'react-dnd-html5-backend';" (and then you can reference it as Backend if you already are)
Lots of problems with this video as of 2021, and you'll need to fish through the comments and do a lot of your own research to get this to work. Repo also does not work. Since the dislike count isn't visible these days, use this as a warning - find another example if you're trying to learn this!
nice video. Thanks for the run through it gives me a good idea of whether I want to use this or not. Bro got a little swag with the vape @ 8:09 too lol
Thanks RyanMichael for sharing this difficult library explanation in easy way. It was so helpful. just one think is missing in whole explanation is you just type & explained code. I was expecting it would be better if you also show us browser changes after each code changes so that we can relate to the changes properly.
Does your video record software allow putting the video in the top right - rather the bottom right? It covers up the text when you are writing long lines. eg 18:19
Cool tutorial. Sorting only works properly when al items are in 1 column unfortunately. I guess you'd need to separate the data in an array per column to allow reordering in each column.
Hi, I am getting this error : ERROR in ./client/src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js) and Entrypoint undefined = index.html. Does anyone know how to fix this?
The demo at 15:10 doesn't seem to match the code. You were dragging the 3rd item from the bottom. When it reached the top, the 2nd item moved to the top of the 1st but you were still dragging the 3rd item. Why is it like that? BTW, thanks a lot for the video!
How do I start the project? I'm on windows, tried npm start in the react-dnd-starter folder but start wasn't a command, added it to package.json and now it's asking for node_modules. I'm sure I'm being a potato, can you help?
Make sure you have Node.js installed which comes with NPM. Go to your project folder and install the dependencies by running 'npm install' When the packages finish downloading, run 'npm start'
Hi Ryan, please help me. I got stuck on this issue: I want to create drag and drop survey in React but could not find any tutorial about it. What I want to create is to create survey and QR code linked with it. Any tutorial about it would be supper helpful! or any suggestion to me to follow? any tutorial link?
Thank you very much for the tutorial, but I have not got the following error when npm install: npm WARN webpack-starter@1.0.0 No repository field. npm WARN webpack-starter@1.0.0 No license field. and I can't run the server with npm start. Thanks for your help!
I have a bug tracker app I made using ReactJS, NodeJS, ExpressJS, and MongoDB. Is it possible to implement a drag and drop when you are dealing with a database?
Yeah ! socket.io and cards. I am saying but i am in a deep hunt to make it, it is a challenge for a Software engineer job. Do a MERN stack with authentication for users and payment with JWT, all saved in a database. Once the payment entry on the database the socket.io or even redux can refresh the front end. The fucking app is like this one in DND but with 3 columns, and according to the status of the entry on the database i should apply 4 different types of discount and the card must move automatically through pending progress done columns.. idk if i can make it but it made me study alot.
Warning: Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted - the behavior is unsupported and could change in a future version. "Getting this error now also"
Thanks for this video... If I wanna convert this to tsx components means what I wanna do.... I tried this... But not working.. Will u please guide me to do this...
For those who can't compile at the end, change "import Backend from 'react-dnd-html5-backend';" to "import { HTML5Backend } from 'react-dnd-html5-backend';"
Yes, it worked for me:
github.com/react-dnd/react-dnd/issues/1232
I know this is a little dated, comment but you can also "import {HTML5Backend as Backend} from 'react-dnd-html5-backend';" (and then you can reference it as Backend if you already are)
Lots of problems with this video as of 2021, and you'll need to fish through the comments and do a lot of your own research to get this to work. Repo also does not work. Since the dislike count isn't visible these days, use this as a warning - find another example if you're trying to learn this!
nice video. Thanks for the run through it gives me a good idea of whether I want to use this or not. Bro got a little swag with the vape @ 8:09 too lol
Thanks RyanMichael for sharing this difficult library explanation in easy way. It was so helpful. just one think is missing in whole explanation is you just type & explained code. I was expecting it would be better if you also show us browser changes after each code changes so that we can relate to the changes properly.
^
Your video taught me to never watch tutorials without real time webpage loading :D
6:15 where this window came from?
Does your video record software allow putting the video in the top right - rather the bottom right? It covers up the text when you are writing long lines. eg 18:19
Cool tutorial. Sorting only works properly when al items are in 1 column unfortunately. I guess you'd need to separate the data in an array per column to allow reordering in each column.
Hi, I am getting this error : ERROR in ./client/src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js) and Entrypoint undefined = index.html.
Does anyone know how to fix this?
I'm gettin the same issues have you found a solution??
Found the solution run this and it should work : npm install -D babel-loader @babel/core @babel/preset-env webpack
@@darktjeAI thnx love from india
@@nitinrayal9091 np, love from the netherlands
I couldn't 'npm start' the cloned project. Any ticks?
According to "react-dnd" v14:
useDrag({
type: BOX,
item: () => ({id})
})
instead of:
useDrag({
item: { type: BOX } },
begin: () => ({ id })
})
The demo at 15:10 doesn't seem to match the code. You were dragging the 3rd item from the bottom. When it reached the top, the 2nd item moved to the top of the 1st but you were still dragging the 3rd item. Why is it like that? BTW, thanks a lot for the video!
Saw the fix at the end!
This repo DOES NOT WORKING!!!
How can you figure out how many items are in each column??
How do I start the project? I'm on windows, tried npm start in the react-dnd-starter folder but start wasn't a command, added it to package.json and now it's asking for node_modules. I'm sure I'm being a potato, can you help?
Make sure you have Node.js installed which comes with NPM.
Go to your project folder and install the dependencies by running 'npm install'
When the packages finish downloading, run 'npm start'
Hello, if I use trello clone with backend, do I need to have admin panel?
Thank you so much, i ran this app!
How?? I'm getting so many errors..what dependencies did you update to run?
ua-cam.com/video/c1ALsN8-JA4/v-deo.html
I'm getting this:-
[nodemon] app crashed - waiting for file changes before starting...
hi ... question ... how can you make a clone of notion or taskade.com ?
would you be allowed to use this librarby in an actual interview
Hi Ryan, please help me. I got stuck on this issue: I want to create drag and drop survey in React but could not find any tutorial about it. What I want to create is to create survey and QR code linked with it. Any tutorial about it would be supper helpful! or any suggestion to me to follow? any tutorial link?
Have you tried using touch backend? I have seen people complain about not being able to see the item that they are dragging?
Thank you very much for the tutorial, but I have not got the following error when npm install:
npm WARN webpack-starter@1.0.0 No repository field.
npm WARN webpack-starter@1.0.0 No license field.
and I can't run the server with npm start.
Thanks for your help!
Same issue you found a solution to this?
I have a bug tracker app I made using ReactJS, NodeJS, ExpressJS, and MongoDB. Is it possible to implement a drag and drop when you are dealing with a database?
Yeah ! socket.io and cards. I am saying but i am in a deep hunt to make it, it is a challenge for a Software engineer job. Do a MERN stack with authentication for users and payment with JWT, all saved in a database. Once the payment entry on the database the socket.io or even redux can refresh the front end. The fucking app is like this one in DND but with 3 columns, and according to the status of the entry on the database i should apply 4 different types of discount and the card must move automatically through pending progress done columns.. idk if i can make it but it made me study alot.
Warning: Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted - the behavior is unsupported and could change in a future version. "Getting this error now also"
Well got the issue i was facing .....I need to do npm run build
every time i make changes
Thanks for this video... If I wanna convert this to tsx components means what I wanna do.... I tried this... But not working.. Will u please guide me to do this...
how do you run this project?
isn't work with npm start
Even I have the same question !
I’m using this library for a big enterprise app, and my god, it blows! Sure, you can do many things, but, you get nothing for free. Nice video.
You expected to get an enterprise-ready solution from a 40 minute video, then come here to complain and insult? Just wow.
Great video, thank you a lot. Can you make a second part, explain how add and edit new cards from interface?
great tutorial
To anyone in 2024 and later, don't bother with react-dnd. Use dnd-kit instead. Trust me
Would have been better if you started from scratch on screen
too hard and confusing
Thanks - Great tutorial.
You're going too fast and jumping around. It is hard to follow. Thanks for the video anyways.
Thanks
this is the most confusing shit
Thanks! Awesome tutorial