Man I just remembered you and your face and the project in this video and been literally tying to find you for about 30 minutes. hoofff... Thank god already.
Thank you! Spent around 20 minutes searchingweb for answers to why dragging didn't work. Could you also elaborate, how did you figure this out when you were following the course?
NO WAY DUDE! I spent like 1 hour checking if I did something wrong, looting to every single letter, and had no clue at all. Even chat gpt couldn't help me. This is an amazing example that AI will not replace devs xd. Thank you so much I love you
Amazing tutorial, it covers basics as well as advanced concepts. A few suggestions, try to explain the chunk of code after implementing the functionality so that user can clearly understand it. And, I got confused and lost in "todo, todos, todo(model)".
This is not a beginner's lecture series. You need to have a moderate understanding of React and JavaScript to see how useful these lectures are. They're all really great, thank you.
Obviously one should have good enough knowledge of Js and React both before jumping to work with typescript. Without them even I would not suggest anyone to watch the video.
If you are facing error for the drag and drop feature even after disabling add the dnd dependency in json also change the react version to recent stable version 18.2.0 and reinstall npm dependencies and dnd library
This video is not for absolute beginners who wants to get started with typescript with react, because he hasn't explained the generics and how it is used with the functions at the start of the video, and how can u create the functions with interfaces and use the generics to pass the props and many more things like that. Because these things are absolute necessary while creating a basic component types in the first place. Defining normal types and interfaces, people can understand easily, but the generics part and pairing up with the interfaces to create dynamic types is absolutely necessary i feel. Rest of the video was on point.
This course is free and that's cool but there are some issues. There is very little typescript in this course -it's almost entirely React. Very little is actually explained , it's very much a case of "just do it like this" without any explanation of why it's being done that way. There is an infuriating part where the presenter asks the viewer " why do we have type and interfaces when they aer very similar" and then goes on to continue explaining how similar they are without ever answering the question! There are also some bad practices in here - for example passing the entire todos array as a prop to each single Todo component. A single todo element does not need to know about the other todos. instead, the edit, delete, isDone functions should be declared in the TodoList component and passed to the todo components as props. At the end of the day it's free and I'm grateful for that but the quality is not great.
I don't know why he passed the useState to every single component. It's best so handle everything in a reducer in this case, or simply extract the state from the application.
Yes, and even when we need previous state to make new changes, the best practice is to use functional approach in setState, basically passing callback whose return value would be new state to setState function. And that callback would have previousState as first prameter. So we don’t even need todos state, when we just want to change that. setTodos alone can handle that
35:38 Rather than: setTodos([...todos, etc]); It's preferable to use the functional update form of setState, like so: setTodos(prev => [...prev, etc]); This is to avoid potential issues that can arise from stale state or closures, especially when working with asynchronous operations like API calls that you won't see in a simple and contrived example like a Todo app.
Nice tutorial, used this to create a user-friendly task manager. It is possible to add status, you realize when you drag it to the completedTodo, the todo 'Isdone:true' should be the result
Where can I compare the solution and the complete implementation for the useReducer function with Typescript in this project? This is challenging for a beginner (even having watched previous video with useReducer hook).
thank you for the tutorial, that being said, i think it's not recommended to pass setState inbetween components by team React. It is better to redesign this
Thank you for your effort, but this actually is NOT a beginner-friendly tutorial. The tutor navigates through files and screens too fast and he doesn't explain what he's doing or why. This is supposed to be for beginners, but he teaches like he's teaching people who are already experienced with React and/or TypeScript.
I want to stress that this course is not for beginners.. While the concept itself is simple enough, the methods used are not basic and the way they are presented are rushed to say the least. This example project is used in other places with better explanations and a simpler approach that is for beginners.
To mark the item a completed (strikethrough), we have to make isDone true/false, so inside the dragrabble code , we have to modify: if(destination.droppableId === 'TodoList'){ active.splice(destination.index, 0, {...add, isDone: false}); }else{ complete.splice(destination.index, 0, {...add, isDone: true}); }
Hey thank you for this awesome tutorial !!, ... it help me a lot !! .. and somehow i get confused between you and the guy at the "codedamn" youtube channel, lol... you guys look like brothers... 😂
Thanks for featuring my Content 🙏❤️.
Love making content for this channel.. 🔥🔥
Hope to bring more such tutorials in future.
Awesome bro. Congrats :-)
Hi
@@rangabharath4253 😎
Thanks a lot for creating this tutorial I want to know that in which company are you currently working?
which browser you are using ?
thanks man, good vid
Thanks for your kind words, and for supporting our mission.
I learn more from Indian guys at UA-cam then my professors at college. 🔥
Mannn u drop the fact
Jai shree ram
ES cierto enseñan bien
still learning more from these guys and i already graduated college 😂
fax not printer
Great to see RoadsideCoder contribute to FCC. 🌟🇮🇳
❤️
Key difference between "any" and "unknown" is our attitude. "any: I don't care🥱", "unknown: I'm not sure bro😶"
Finished the react course and heard how good Typescript was so this is exactly what I was looking for.
I LOVE THIS GUY! He's getting straight to the points that I need. AND he points the viewer to the DOCUMENTATION! WONDERFUL!!! Great job sir!
srsly this guy is amazing. ive watched so many tutorials from different people and this guy is by far the best
at 11:48, I held back my tears as you said "don't worry if you're having problems understanding all of this"
😄❤
This tutorial is amazing, I followed through and completed my first TypeScript project
No way! Just as i was starting to build a react project for my bootcamp and learning typescript on the side! heaven sent!
Man I just remembered you and your face and the project in this video and been literally tying to find you for about 30 minutes.
hoofff...
Thank god already.
i really appreciate the fast forwarding whenever you are writing boilerplate code.
it helps a lot!
Thank You!
Best React Typescript tutorial on UA-cam!!!!!!!! Beautiful stuff
For React Version 18 and above remove the for the Drag feature to work.
Also, amazing tutorial Piyush. :D
Thank you!
Spent around 20 minutes searchingweb for answers to why dragging didn't work.
Could you also elaborate, how did you figure this out when you were following the course?
Bro, I was doublechecking my code for approx 1 hour with the source code in Github and cant find what seems to be the issue ... :D thanks a lot
do you know why we have to do this??
Thanks so much!
NO WAY DUDE! I spent like 1 hour checking if I did something wrong, looting to every single letter, and had no clue at all. Even chat gpt couldn't help me. This is an amazing example that AI will not replace devs xd. Thank you so much I love you
Thanks!
Amazing tutorial, it covers basics as well as advanced concepts. A few suggestions, try to explain the chunk of code after implementing the functionality so that user can clearly understand it. And, I got confused and lost in "todo, todos, todo(model)".
OUTSTANDING lecture ! The detailing involved from student prespective is mind-blowing. Thankyou fcc and @RoadsideCoder
"And you're gonna see some bunch of crap which no one understands..."
You just instantly became my favorite UA-cam coder :D
Someone give this guy a medal 🥇
I have been watching RoadsideCoder from the last few months and his videos are great.
I'm only half way through this and I've already learned a TON. I'm very happy that I stumbled across this tutorial.
Also, react-beautiful-dnd is not compatible with React 18.
@@dylandupasquier nice info, thanks
This is not a beginner's lecture series. You need to have a moderate understanding of React and JavaScript to see how useful these lectures are. They're all really great, thank you.
Obviously one should have good enough knowledge of Js and React both before jumping to work with typescript. Without them even I would not suggest anyone to watch the video.
Great tutorial! This is by far the best React TypeScript tutorial I've come across. Keep up the great work! ♥🔥
his tutorials are amazing.😍🔥
🙏🙏
@@RoadsideCoder 🤞🤞🤞
I just wanted to learn reat with typescript and your videos tutorial came 👍👍👍👍👍
Thanks. That was an awesome runthrough. Very informative, crisp, practical and concise.
Roadsidecoder 😍😍😍 waiting for more projects in react
🙏❤️
Indian is the best teacher related to coding after all
If you are facing error for the drag and drop feature even after disabling add the dnd dependency in json also change the react version to recent stable version 18.2.0 and reinstall npm dependencies and dnd library
¡Gracias!
Best part of the video 39:00 "You'll see a bunch of crap over here noone understands"
It caught me by surprise too XD
Released 8 minutes ago this video is about to have millions of views for all the upcoming front end developers.
I've learned everything from indian teachers, I wish they could teach in my universities here in Pakistan ❤️
it helps a lot, u're an amazing teacher sir
this is very well explained. excellent video for an intro to typescript with react
Thanks for this amazing course. I could learn a lot from you. You rock!
Thank you so much for this awesome tutorial!
OMG 😱 I’ve been wanting to learn more TS and how to merge it into a React app. I love TS ty
Hello OMG , did u learn it ?
39:00 the true coding life: "bunch of crap no one understands" 🤣
This video is not for absolute beginners who wants to get started with typescript with react, because he hasn't explained the generics and how it is used with the functions at the start of the video, and how can u create the functions with interfaces and use the generics to pass the props and many more things like that. Because these things are absolute necessary while creating a basic component types in the first place. Defining normal types and interfaces, people can understand easily, but the generics part and pairing up with the interfaces to create dynamic types is absolutely necessary i feel. Rest of the video was on point.
I am waiting for this combo ❤️ thanks a lot
🙏
This is so great, thank you so much! I've done TS/React before but it's been a while and I just needed a refresher. I appreciate you!
Thanks ! This is a React & TypeScript video has been very helpful to me!
Amazing Tutorial !
Really Appreciate
This course is free and that's cool but there are some issues. There is very little typescript in this course -it's almost entirely React. Very little is actually explained , it's very much a case of "just do it like this" without any explanation of why it's being done that way. There is an infuriating part where the presenter asks the viewer " why do we have type and interfaces when they aer very similar" and then goes on to continue explaining how similar they are without ever answering the question!
There are also some bad practices in here - for example passing the entire todos array as a prop to each single Todo component. A single todo element does not need to know about the other todos. instead, the edit, delete, isDone functions should be declared in the TodoList component and passed to the todo components as props. At the end of the day it's free and I'm grateful for that but the quality is not great.
exactly, this tutorial needs to be improved a lot
I don't know why he passed the useState to every single component. It's best so handle everything in a reducer in this case, or simply extract the state from the application.
Yes, and even when we need previous state to make new changes, the best practice is to use functional approach in setState, basically passing callback whose return value would be new state to setState function. And that callback would have previousState as first prameter. So we don’t even need todos state, when we just want to change that. setTodos alone can handle that
not to mention all the typos that are even left unfixed in the provided github repo
Wow! Thanks for the review. I think I'll skip this course.
Great short tutorial thanks!
So far, so good. Thank you.
Very good initial course on Typescript its a good starting point!!
Dude... Your intro was awesome...
35:38 Rather than:
setTodos([...todos, etc]);
It's preferable to use the functional update form of setState, like so:
setTodos(prev => [...prev, etc]);
This is to avoid potential issues that can arise from stale state or closures, especially when working with asynchronous operations like API calls that you won't see in a simple and contrived example like a Todo app.
Nice tutorial, used this to create a user-friendly task manager.
It is possible to add status, you realize when you drag it to the completedTodo, the todo 'Isdone:true' should be the result
Thank you so much I learned alot from this course thank you again 💗
you're an awesome teacher. i subscribed to your personal youtube channel. thanks!
Awesome tutorial. Thank you so much :)
Congrats for 10K subscribers to your channel. More power to you buddy...
❤️
1:06:44 section. What is the full switch case "done" logic? You didn't show the full switch case logic to follow.
thank you so much really simple ,clear and straight to the point
this is a master piece
Awesome Tutorial on React with TypeScript 🔥
Thanks a lot ❤️❤️❤️
Really enjoyed this one, many thanks :D
Absolutely what I needed
RoadsideCoder is a great teacher!!! Thank you!!!
Thank you!
I learned a lot!
Excellent video! thanks for sharing
Thank you very much, this is very helpful
Are bhaiya !! kamal
🙌
Where can I compare the solution and the complete implementation for the useReducer function with Typescript in this project? This is challenging for a beginner (even having watched previous video with useReducer hook).
i agree with u, and i wonder if it was implemented in the project i didnt see any usereducer at the end
Feeling proud to see Indian teaching on such channels
TBH at 40:32 I like it better that focus stays on the input field even after adding new toDo.
Thank so much. Good sharing.
thank you for the tutorial, that being said, i think it's not recommended to pass setState inbetween components by team React. It is better to redesign this
Just what I was looking for!
Excellent
You made it easy.👍
hello, thank you for all of your efforts, I just want to ask if you can upload some content to design patterns (theoretically) ??
thanks.
I'm learning how to react when I type a script
Great course ☺
Thank you this helped a lot!
Thanks a lot for a very good tutorial.
Thank you for your effort, but this actually is NOT a beginner-friendly tutorial. The tutor navigates through files and screens too fast and he doesn't explain what he's doing or why. This is supposed to be for beginners, but he teaches like he's teaching people who are already experienced with React and/or TypeScript.
Thanks for the course :)
Awesome content dude 👌👌
Great video, thank you!
Thanks from Armenia 🇦🇲,super
Hey, please in future videos show the full screen of the vs code. Your text is cut off leaving us to figure out what your actually typing.
Very useful thank you
Awesome! Thank you!
I want to stress that this course is not for beginners.. While the concept itself is simple enough, the methods used are not basic and the way they are presented are rushed to say the least. This example project is used in other places with better explanations and a simpler approach that is for beginners.
To mark the item a completed (strikethrough), we have to make isDone true/false, so inside the dragrabble code , we have to modify:
if(destination.droppableId === 'TodoList'){
active.splice(destination.index, 0, {...add, isDone: false});
}else{
complete.splice(destination.index, 0, {...add, isDone: true});
}
When "Todo" is ready, what we are going todo is type is todo. todo todo todo!
Hey thank you for this awesome tutorial !!, ... it help me a lot !! .. and somehow i get confused between you and the guy at the "codedamn" youtube channel, lol... you guys look like brothers... 😂
on 54:00 you write TodoList instead of todo but after that you fixed the bug but didn't informed
16:36 You said that we can give type to a class by using interface by the keyword "extends" but its actually "implements"
thanks very much sir
Which extension is being used to show the variable type when hovered?
thanks for the fantastic video
Sahi hain yaar 😀😀👍👍
thanks always bring good content
Amazing content bro
i know more about inglish than typescript after this training