React Todo App, With Drag And Drop - React Javascript Tutorial

Подписаться 2,9 тыс.

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

50% 1

In this video I use React Beautiful DnD to create a todo application. Slightly more complex than your average todo app. I show you how to use drag and drop and all the logic and styling required to make it function as it should.
react-beautiful-dnd: github.com/atl...
Code repo: github.com/dar...

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

28 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@miraclehesed8959 2 года назад

This guy is the only one that explained this stuff for me so well. So clear. Others were just not making sense, making everything so complicated. Thank you for such a clear tutorial. I totally agree with what he said at 25:40

@matthewmoon2463 2 года назад

I've watched many of the videos on react dnd, and yours had the best explanation of what's going on. Starting from scratch you explained not only the hows, but the whys. Great job.

@mohamadybr 2 года назад

I am glad about this tutorial!! It really helped me understand the concept of the React-Beautiful-DnD package in the simplest way. I was so confused by others' tutorials. Thanks a lot, it was so needed.

@khoapham9529 3 года назад

By far the best tutorial :D

@letscode7478 3 года назад

Thanks, really appreciate it 😃

@riebeck1986 3 года назад

Thank You. This has been the best explanation I have seen for this.

@letscode7478 3 года назад

Glad it was helpful!

@cleo0318 3 года назад

Wonderful tutorial, you explained everything so well. Thank you :)

@philipham1 3 года назад

Awesome video man, you just go yourself another subscriber, really love the way you explain things, keep up the good work!

@letscode7478 3 года назад

Thanks!

@eytankrief497 Год назад

18:56 - If you can't drag the items, and getting the error: "Unable to find draggable with id:" - be sure to disable Strict Mode by going to index.js and deleting

@VeeHeeOfficial 2 года назад

Thanks for the video. Question though: does it work on React 18? I use exactly the same codes as yours, all the UI displays are working fine, but the drag and drop function doesn't work! Are there any changes we need make for the current version of React? Cheers. EDIT: I removed the "" in index.js and it works perfectly now. :)

@suthashantharmarajah9864 3 года назад

Beautiful tutorial, loved your pacing, flow, could clearly see your experience. Thank you for sharing your knowledge ❤️ (Any tips on getting started using react and js libraries, I'm trying to develope the skill of getting info from source docs rather than youtube everything and watch hour long vids!)

@letscode7478 3 года назад

Thanks really appreciate it! Best advice I can give for reading the docs on any library is the first understand the core of the library. There is often something like a "getting started" area of the documentation which shows the library in its simplest implementation. After you have a good understand of this part then you could move onto looking into other options the library has to offer and read more into the specific. Having said that though there are some libraries that have horrible documentation and really the best thing you can do is find a video online that goes through that library in detail. Hope that helps.

@suthashantharmarajah9864 3 года назад

@@letscode7478 Thank you, love the advice!

@mikki7522 3 года назад

Thank you! Best tutorial on this subject.

@letscode7478 3 года назад

Glad it was helpful!

@caranthirn7400 3 года назад

This helped me a lot. Thank you.

@jacqueskorb879 2 года назад

Great tutorial. Thank you!

@ducnguyendinhtrung4745 Год назад

Many thanks. But i have a question. I have a grid columns, does this library support drag and drop in grid-system? Many thanks

@carlosscampos314 3 года назад

Awesome tutorial! Thanks! Had some problems with this because I'm trying to use typescript instead. After a while, "source" started to sound like "sauce" :D

@letscode7478 3 года назад

Glad it helped!

@coldharbour5640 2 года назад

For some reason I was unable to use destination and source, if anyone else encounters this (2 years later so maybe updates did something?), keep data as the only parameter for handleDragEnd() and do data.destination and data.source.

@hammadahmadriaz6528 3 года назад

Thanku Soo Much Bro .

@mohanrajj7423 2 года назад

when i refresh everything's back to original position why?

@deepmane5845 Год назад

is it possible make api call after each drag and drop to maintain state with redux

@DragonBallSuperCentralTV 4 года назад

Just a passing comment from a novice - noobs like me love to look at the finished product before embarking on a tutorial. The DnD elements were fantastic, but the textbox was the standard HTML one - not something that really catches the eye. I'm sure it's a super easy thing to do - but just for the novice programmer's sake, I would try and make the whole page look fancy, including the add items text box.

@letscode7478 4 года назад

Thanks for the advice, I completely agree, I generally like to focus on teaching the React side of things and focusing on the logic, therefore I avoid css as much as possible. I will try my best in future videos to have the end product look as appealing as possible :D Thanks again for the advice really appreciated!

@zyroclown1445 3 года назад

Excellent tutorial 👏🏻ty

@letscode7478 3 года назад

Glad it was helpful!

@saqlainalvi5485 2 года назад

Just one question. How are you using prevState in a functional component. A little confused. That shouldn't work. Edit: or did they add that thing Edit: ok i feel stupid. Never mind

@nikitafernando6666 3 года назад

SIir, will u be able to let me know how to add different colour background for each column like shown at the begining

@RAHULPATIL-oh8nb 3 года назад

Thank you..

@paul-towers 4 года назад

Thanks for another great video. I commented on your other one about using Modals. I know this is going to come across as random, but you don't happen to offer (or would be interested in offering) paid tutoring do you. I'm based in Australia but I find your tutorials great and would be more than willing to pay for some one to one online tutoring if you offer it.

@letscode7478 4 года назад

Thanks for the support Paul, I've never thought of tutoring but it sounds interesting. If you want to talk more then feel free to send me an email at daryanam20@gmail.com

@paul-towers 4 года назад

@@letscode7478 Thanks I'll email you now

@xavierromero40 3 года назад

Thank you so much!... someone have any idea about a height transition in each column?

@emmanuelmanana1527 3 года назад

height: auto;

@himanshushekhar3694 3 года назад

Thank you

@letscode7478 3 года назад

No problem!

@jaiminkharadi6961 Год назад

at 3:25 its showing error

@mengfanshen4921 4 года назад

Can you make the columns with different width?

@letscode7478 4 года назад

Yeah that would be a CSS change, I would do something like add a different class or id to the column that you want to change and then change the width of the column to whatever you want.

@mengfanshen4921 4 года назад

@@letscode7478 when i tried add css to your code, it seems like both columns change the with at the same time.

@KaranKumar-rm5zz 2 года назад

Sir can you provide source code so it will be more easy to understand

@AdityaRaj-lr1ki 4 года назад

do you have a link to the code by any chance?

@letscode7478 4 года назад

Heres the github repo: github.com/daryanka/dnd-tutorial

@AdityaRaj-lr1ki 4 года назад

LetsCode thanks

@AmarGupta-pb6go 3 года назад

You saved my life., Lots of love.., ;-)

@thanhdungnguyen1826 Год назад

tks you. Really easy to understand

@RAHULPATIL-oh8nb 3 года назад

Using Api ,How to do? 🤔

@tejasrahate2222 4 года назад

Thanks.. Searched alot of videos, but your explanation was so easy to understand !!

@letscode7478 4 года назад

Thanks, glad to know it was helpful!

@jritzeku Год назад

Wouldn't it make more sense to make our columns an array of objects instead of objects of objects? const [state, setState] = useState([ { title: "Todo", items: [item, item2] }, "{ title: "In Progress", items: [] }, { title: "Completed", items: [] } ]) Btw, great content! You explained much better than other videos on youtube.

@nereacorralesagudo7971 2 года назад

Hi! This tutorial helped me very very much! Just wanted to ask you... How did you do to have each one of the columns of a different color like you showed at the beginning of the video?? Thank you!

@rajatverma3122 3 года назад

Best explanation ever, like watching an interesting movie.. and thank you, great help

@alaamagdy9003 3 года назад

can u help me in delete and edit functions please need them immediatly cause i need to delete the task from the column

@jenniferignacio6364 3 года назад

Thank you for doing this - needed help doing a DnD react project and this was the PERFECT tutorial!

@thewaterboy1078 2 года назад

Fantastic video, tried other videos but this one explained it best!

@dim3143 3 года назад

One of the clearest videos with a normal state. Thanks for your work. But i' am repeat this example with vanilla js an: Object.keys(state) .map( (key) => {return (... Best Regards from Russia!

@letscode7478 3 года назад

Thanks!

@comingfall6348 3 года назад

great video, from this i managed to undersand the entire way this libary works, thanks alot

@letscode7478 3 года назад

Great to hear!

@renudesai3250 3 года назад

Is it possible to add columns and drag and drop them ? Will it be same logic ?

@letscode7478 3 года назад

Yeah its defiantly possible, but you might want to add an ID property to the columns in case 2 columns have the same name

@adamtak3128 4 года назад

You had me until you started implementing the `handleDragEnd` function.

@letscode7478 4 года назад

Thanks for the feedback, was there something specific about the handleDragEnd function that you didn't understand. For example were you confused about what we were trying to accomplish in that function, or was it maybe the code itself that wasn't explained in enough detail? Any additional feedback would be great!

@jtfujiman 3 года назад

@@letscode7478 Running into this now, just trying to log whether it dropped in the same place or not doesn't appear in the console when written as ({destination, source}) as the props. No console log appears at all. I tried (destination, source), which logs to the console when releasing from drag, but only hits the first condition this way.