React & TypeScript - Course for Beginners
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- Learn how to build React apps using TypeScript. First, learn the basics of TypeScript. Then, learn how to integrate TypeScript in a React app by building an awesome project. You will learn how to use TypeScript with React Hooks such as useState, useRef, and useReducers. You will also learn how to pass props from one component to another by defining prop types of the component. And you will learn much more!
✏️ Course created by Roadside Coder. Check out his channel: / roadsidecoder
💻 Code: github.com/piyush-eon/react-t...
🔗 Live Site: taskify-typescript.netlify.app/
🔗 Typescript Docs: www.typescriptlang.org/docs/h...
🔗 useReducer Tutorial: • React Shopping Cart Tu...
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:00:31) Typescript vs Javascript
⌨️ (0:00:57) Project Overview
⌨️ (0:02:27) Setup React Typescript Project
⌨️ (0:04:57) Basic Types in Typescript
⌨️ (0:07:30) Object Type
⌨️ (0:09:03) Optional Field in Objects
⌨️ (0:09:20) Array of Object Type
⌨️ (0:09:55) Union Type
⌨️ (0:10:25) Function Types
⌨️ (0:12:06) Any Type
⌨️ (0:12:35) unknown and never Type
⌨️ (0:12:52) Aliases ( type and interface )
⌨️ (0:14:36) Extending types
⌨️ (0:15:53) Extending interface
⌨️ (0:16:28) Extending Classes
⌨️ (0:16:45) Extending type with interface ( and vice versa )
⌨️ (0:17:22) React with Typescript
⌨️ (0:18:22) Functional Component type
⌨️ (0:19:19) Creating Input UI
⌨️ (0:26:22) useState Hook with Typescript
⌨️ (0:27:39) PropTypes - Passing props to component
⌨️ (0:30:34) Reusable todo interface
⌨️ (0:33:01) Passing function as props
⌨️ (0:34:14) Event Type in Typescript
⌨️ (0:35:20) Create Todo Logic
⌨️ (0:37:54) useRef Hook with Typescript
⌨️ (0:40:41) TodoList Component
⌨️ (0:45:27) Passing props to SingleTodo
⌨️ (0:47:14) SingleTodo Component
⌨️ (0:52:23) Todo Complete Functionality
⌨️ (0:54:56) Delete Todo Functionality
⌨️ (0:55:55) Edit Todo Functionality
⌨️ (1:02:05) Edit Bug Fix
⌨️ (1:03:23) useReducer Hook with Typescript
⌨️ (1:07:11) Homework for you
⌨️ (1:07:26) Building App UI for Drag and Drop
⌨️ (1:13:13) React Beautiful DnD Installation
⌨️ (1:14:00) completedTodos State
⌨️ (1:15:21) DragDropContext
⌨️ (1:16:42) Droppable Tag
⌨️ (1:20:46) Draggable Tag
⌨️ (1:23:21) onDragEnd Logic
⌨️ (1:30:05) Drag and Drop Styling
⌨️ (1:32:36) Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
![[ไฮไลต์] "บิว" ภูริพล บุญสอน วิ่ง 100m ชาย รอบคัดเลือก | โอลิมปิก 2024](http://i.ytimg.com/vi/3kUSMfgtQ5s/mqdefault.jpg)
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 ?
I learn more from Indian guys at TH-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
i really appreciate the fast forwarding whenever you are writing boilerplate code.
it helps a lot!
Thank You!
Finished the react course and heard how good Typescript was so this is exactly what I was looking for.
This tutorial is amazing, I followed through and completed my first TypeScript project
Great to see RoadsideCoder contribute to FCC. 🌟🇮🇳
❤️
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)".
Key difference between "any" and "unknown" is our attitude. "any: I don't care🥱", "unknown: I'm not sure bro😶"
OUTSTANDING lecture ! The detailing involved from student prespective is mind-blowing. Thankyou fcc and @RoadsideCoder
Thanks for this amazing course. I could learn a lot from you. You rock!
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
thank you so much really simple ,clear and straight to the point
I have been watching RoadsideCoder from the last few months and his videos are great.
No way! Just as i was starting to build a react project for my bootcamp and learning typescript on the side! heaven sent!
OMG 😱 I’ve been wanting to learn more TS and how to merge it into a React app. I love TS ty
Absolutely what I needed
Awesome Tutorial on React with TypeScript 🔥
Thanks a lot ❤️❤️❤️
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.
Thanks ! This is a React & TypeScript video has been very helpful to me!
Just what I was looking for!
Thanks. That was an awesome runthrough. Very informative, crisp, practical and concise.
I am waiting for this combo ❤️ thanks a lot
🙏
Awesome tutorial. Thank you so much :)
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
Great short tutorial thanks!
Really enjoyed this one, many thanks :D
Awesome! Thank you!
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.
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 just wanted to learn reat with typescript and your videos tutorial came 👍👍👍👍👍
Thank you so much for this awesome tutorial!
this is very well explained. excellent video for an intro to typescript with react
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
So far, so good. Thank you.
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!
Amazing Tutorial !
Really Appreciate
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
Great video, thank you!
Thanks a lot for a very good tutorial.
Thank you!
I learned a lot!
Thank you so much I learned alot from this course thank you again 💗
Thank you this helped a lot!
Great tutorial! This is by far the best React TypeScript tutorial I've come across. Keep up the great work! ♥🔥
Excellent video! thanks for sharing
39:00 the true coding life: "bunch of crap no one understands" 🤣
this is a master piece
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
Thanks for the course :)
Which extension is being used to show the variable type when hovered?
his tutorials are amazing.😍🔥
🙏🙏
@@RoadsideCoder 🤞🤞🤞
it helps a lot, u're an amazing teacher sir
Very good initial course on Typescript its a good starting point!!
you're an awesome teacher. i subscribed to your personal youtube channel. thanks!
You made it easy.👍
at 11:48, I held back my tears as you said "don't worry if you're having problems understanding all of this"
😄❤
Roadsidecoder 😍😍😍 waiting for more projects in react
🙏❤️
Thank you very much, this is very helpful
Great course ☺
Congrats for 10K subscribers to your channel. More power to you buddy...
❤️
Thank so much. Good sharing.
Excellent
Thank You!!!
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});
}
Dude... Your intro was awesome...
RoadsideCoder is a great teacher!!! Thank you!!!
thanks for the fantastic video
In InputFeild.tsx file, if the input tag is not a self-closing tag, then the web page goes blank. The tutorial has self-closing tag, but I did this mistake of giving separate tags like rather than . This problem occur at 20 minutes from the start of the video. Thought it might be helpful for someone who might face this error. Thanks.
Thanks!
Awesome content dude 👌👌
thanks always bring good content
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.
Amazing content bro
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... 😂
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
great tutorial
Very useful thank you
Sahi hain yaar 😀😀👍👍
Released 8 minutes ago this video is about to have millions of views for all the upcoming front end developers.
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
TBH at 40:32 I like it better that focus stays on the input field even after adding new toDo.
Thank you so much
thanks!!
const inputRef = useRef(null);
So in this React snippet we are using "generic" type, as I understand.
Is my the following statement correct:
We use "T" generic type (can be any letter) - when we do not know the exact type, which will be used inside of a function. "T" we use only when we DECLARE a function.
But when we want to EXECUTE a function - we specify the concrete generic type, which will be used in this particular case.
To sum up - in the example above - useRef - tells that this particular time the generics, which were specified in useRef declaration will be "HTMLInputElement " or "null"
Am I correct?
Awesome tutorial!
one question : In edit todo function, in your ternary you put but where does it come from? thanks a lot
It's a normal html input tag I think. 😉
just like that is a plain HTML common element.
"And you're gonna see some bunch of crap which no one understands..."
You just instantly became my favorite TH-cam coder :D
Indian is the best teacher related to coding after all
thanks man, good vid
Thanks for your kind words, and for supporting our mission.
Are bhaiya !! kamal
🙌
thanks very much sir
when you create a function inside droppable and draggable, the type of provided is automatically inferred. but when we we create onDragEnd function why do we need to specify its type? why doesnt provided needs us to specify the type
A crash course about setting up react native with rnfirebase wpuld be really appreciated.
Yo! Thanks a lot
which vscode extension do you guys use for realtime formatting
It looks like you may have needed to use a `useContext` to pass the todos and setTodos to multiple children, or do you think it would be overkill? Also, i noticed that you have multiple Props definitions specified, why not using only 1 exported from a file? maybe on models.
There's a million ways to do things, right. Probably having all the types on the screen would make it easier for the people learning to see what a Type is.
I was thinking exactly the same, So much props drilling from parent to child and also creating confusion.
Is there any other video which is featuring class components for creating one such app ?
Someone give this guy a medal 🥇
amazing content
¡Gracias!
Are those draggable things works on your machines ? Still got Could not find a declaration file for module 'react-beautiful-dnd'.
I've learned everything from indian teachers, I wish they could teach in my universities here in Pakistan ❤️