Really good tutorial, well done. On a side note, at 34:23 if you filter by task name and there are 2 tasks with the same name it will delete them both. Instead, you can filter by key/index. In real-life applications usually, data that comes from some DB will always have pk/id. In this case, we use the pk/id of the object to define the key of the row and to delete the task object from our state.
Great video! Just a note, if using FC or React.FC for a component like the one at 28:30, you will write "" next to FC/React.FC, instead of ":Props" next to the props object parameter.
0:00 Intro & Project Overview 1:34 Project Setup (using Create React App) 5:09 App Component - Component Type & JSX markup 8:23 Adding & explaining CSS snippets 11:52 Setting up state - useState in TypeScript 14:00 Change handler - track user input 18:43 Click handler - Adding a task to 'todoList' state 19:45 -- defining and setting the Type of 'todoList' using an interface 23:50 -- clearing inputs after adding new task 24:54 Working with components - creating TodoTask - represents a single todo task 27:17 -- accepting component props 29:58 -- writing markup (JSX/TSX) & styles for TodoTask component 33:08 Complete/delete task functionality in App.tsx 36:52 Testing final app 37:43 Outro
Nice, when you are importing the functional component structure.. you could do rafce instead of rfce. It will generate the arrow function syntax straight away.
Thanks so much bro. Learned so much about React basics and Typescript. Your other tutorials are also very good. You explain complex topics very nicely. Wish your channel grow exponentially.
THank you for your kind words! I am really happy that I was able to help you learn! I have really high hopes for the channel, but for now im just enjoying the journey!
Oh wow Pedro . Yeah is very simple to-do but you did a master-peace You never went to deep if it was not necessarily but when it was you dogged in perfectly when clear explanations. I am old person but recently start to React and wow this really helped me Congrats !!!
Hahaha thank you! I am glad i could help! If you want i have a video as well teaching how to transition from javascript to typescript! Link is in the description!
Really well done. Thank you for sharing. I have a good understanding of all except the key part which I think I will get comfortable with in the future.
Quando comecei o video pensei: "esse cara so pode ser brasileiro" (por causa do sotaque kkkk) quando eu vi o nome do canal PedroTech dai eu tive ctz que vc era brasileiro. Parabens pelo trabalho mano
Wouldn't be enough setting the prop in TodoTask as below? const TodoTask = (task: ITask) => { ... } Anyway, thanks for the video! Ur channel is awesome!
Hey, so it depends because I don't think it would work for multiple props. The standard way is creating an interface and restructuring it like in the video. This confused me a lot in the beginning, but it makes sense cause it allows for more organized code.
Thanks for the tutorial. It's been fun to watch. One thing though, and I can't fathom why it shows up in tutorials like that over and over and over again. DRY. Why do people repeat themselves so many times. task.taskName (why not just task.name?) ITask? Does it really matter that it is an interface? Why not just Task? Same thing with naming folders and files (totally not in your tutorial but comes time and time again in others) like components/todo/TodoEditor.tsx instead of components/todo/Editor.tsx.
This is a very informative video. I saw it very well. It would be great if there was a video that implements master details with the ts-react-dbms-bootstrap skill.
Good job! An incredible and very useful tutorial, I have a question with the "completeTask" function, if two tasks have the same name and you filter the task with that function, the two tasks would be deleted, right?
Thank you! Yeah if they have the same name it would delete both, ideally you could add an id for each task and filter by id. I didn't do that so I wouldn't overcomplicate the video!
@@PedroTechnologies Great, it's just what I thought, right now I'm trying to make one on my own, could you tell me what extra features I could add to the app as a practice, and challenge Thanks!
Good tutorial man. I recently discovered you and have a great updated content. Can I ask you why yo use :FC in App arrow function but not in a component? Thank you
Thank you! Really appreciate the support! There are two ways of defining props to components in typescript, one of them is by making it a React.FC component and passing the prop interface like this: and there is the other way which is how i did in the video. I wanted to show both ways but accidentally forgot to explain the first one. Sorry about that, you can write components in both ways, I recommend the second one without the React.FC
@@PedroTechnologies Thank you very much for your quick response. I'm watching video after video right now, if you get a lot of views it's my fault lmao. Seriously, good content, updated and with good practices, just what I needed, keep it up! :)
Pedro, you're a friggin lifesaver! Thank you for making this video! Petition to make literally everything tomato red 😂🎊❤️☮️🏆 Keep up the excellent work bro
How to I get to validate the inputs i.e If the input fields are empty, it should return an error beneath the input like input fields are required However, I really learnt alot from the video thank you so much
you have really good tutorials happy i stumbled across your channel. could you make a tutorial for a desktop app using any js framework like electron, nw,js or any other one you want. Also, could you make a video on client data saving aka no database no server this would be more plausible with desktop app creation since people can download the app and data can be stored and saved on clients computer. I just don't know how to do this and have looked on google about it no real tutorial or course that covers this.
I have prior experience with electron (i also have a video on it), so I can definitely make a video teaching how to create a simple electron app and save data!
hey Pedro, I saw link usually is created like the following code in real life project typecripts, but it is a bit confusing, can you explain it a bit more in your video? import NextLink, { LinkProps as NextLinkProps } from 'next/link'; const Link: React.FC = ({ href, children, ...props }) => { return (
Bro, how can i implement map() function in the component rather than index.tsx page. I am trying to pass whole object array as props in the component but getting type error. Please explain me if you know the solution , any help is appreciated ❤️
localStorage.setItem("todolist", JSON.stringify(todoListSate)) // to set the todoState in your localStorage JSON.parse(localStorage.getItem("todolist")) // to get the todoState from your local storage
Really good tutorial, well done. On a side note, at 34:23 if you filter by task name and there are 2 tasks with the same name it will delete them both. Instead, you can filter by key/index. In real-life applications usually, data that comes from some DB will always have pk/id. In this case, we use the pk/id of the object to define the key of the row and to delete the task object from our state.
thank you man)
you might as well do a hash map for all todos, not to traverse the whole list when deleting
Great video!
Just a note, if using FC or React.FC for a component like the one at 28:30, you will write "" next to FC/React.FC, instead of ":Props" next to the props object parameter.
0:00 Intro & Project Overview
1:34 Project Setup (using Create React App)
5:09 App Component - Component Type & JSX markup
8:23 Adding & explaining CSS snippets
11:52 Setting up state - useState in TypeScript
14:00 Change handler - track user input
18:43 Click handler - Adding a task to 'todoList' state
19:45 -- defining and setting the Type of 'todoList' using an interface
23:50 -- clearing inputs after adding new task
24:54 Working with components - creating TodoTask - represents a single todo task
27:17 -- accepting component props
29:58 -- writing markup (JSX/TSX) & styles for TodoTask component
33:08 Complete/delete task functionality in App.tsx
36:52 Testing final app
37:43 Outro
Wow! Thank you so much for the timestamps, really appreciate u doing this! WIll add it to the video :)
@@PedroTechnologies UA-cam gave me the notification 5 years later lol. No problem, keep up the great work!
I've seen a lot of tutorials but this is by far the most down to earth tutorial I've seen. Thank you!!
Nice, when you are importing the functional component structure.. you could do rafce instead of rfce. It will generate the arrow function syntax straight away.
Thanks so much bro. Learned so much about React basics and Typescript. Your other tutorials are also very good. You explain complex topics very nicely. Wish your channel grow exponentially.
THank you for your kind words! I am really happy that I was able to help you learn! I have really high hopes for the channel, but for now im just enjoying the journey!
if you dont have "YARN" you can ** execute npx create-react-app my-app --template typescript **
Your explanation is so clear and direct! Thanks a lot:)
Oh wow Pedro .
Yeah is very simple to-do but you did a master-peace
You never went to deep if it was not necessarily but when it was you dogged in perfectly when clear explanations. I am old person but recently start to React and wow this really helped me
Congrats !!!
Oh man u are amazing I just started to learn typescript yestday
Hahaha thank you! I am glad i could help! If you want i have a video as well teaching how to transition from javascript to typescript! Link is in the description!
Really well done. Thank you for sharing. I have a good understanding of all except the key part which I think I will get comfortable with in the future.
Pedro, estou tão feliz em achar seu canal, seu inglês é tão bom e calmo, o conteúdo é muito útil.
You are my best programming teacher!
Thank you Pedro, you are so good explaining and everything is so clear.
Your channel is helping a lot of people for sure!
Happy to hear that! I love the support I receive :)
Lol a Pedro helped another Pedro 😂
Quando comecei o video pensei: "esse cara so pode ser brasileiro" (por causa do sotaque kkkk)
quando eu vi o nome do canal PedroTech dai eu tive ctz que vc era brasileiro. Parabens pelo trabalho mano
absolute banger! thanks for the amazing content as always pedro
thank you so much! you have no idea how much this means to me!
Thanks for making this in typescript :)
Thank you for watching!
Wouldn't be enough setting the prop in TodoTask as below?
const TodoTask = (task: ITask) => {
...
}
Anyway, thanks for the video! Ur channel is awesome!
Hey, so it depends because I don't think it would work for multiple props. The standard way is creating an interface and restructuring it like in the video. This confused me a lot in the beginning, but it makes sense cause it allows for more organized code.
Pedro, hope all is well. Curious, why did you use interface instead of type? Do you typically use interface?
great video man! You're helping me a lot with your videos.
Thank you for this video, I really leveled up my typesript!!!
Glad it was helpful!
Thanks for the tutorial. It's been fun to watch. One thing though, and I can't fathom why it shows up in tutorials like that over and over and over again. DRY. Why do people repeat themselves so many times. task.taskName (why not just task.name?) ITask? Does it really matter that it is an interface? Why not just Task? Same thing with naming folders and files (totally not in your tutorial but comes time and time again in others) like components/todo/TodoEditor.tsx instead of components/todo/Editor.tsx.
subscribed man, a great job and effort from you doing this videos :) thanks
Great!! Straightforward intro to ReactJs - TypeScript👌
Perfect video for react using TS!
Glad you think so!
Thanks for this tutorial !💚
You’re welcome 😊
This is a very informative video. I saw it very well.
Please, more video like this :D. Typescript & React.js 😊
cool tutorial learnt a lot can you make CRUD react project using typescript redux, axios and styled component
Great suggestion! I can definitely do it!
Thank you once again! this is really helpful
Thanks for the video, the explanation was very clear! 🥁
This is a very informative video. I saw it very well.
It would be great if there was a video that implements master details with the ts-react-dbms-bootstrap skill.
Thank you for watching! Yeah i can definitely add that to my list of future videos!
Good job! An incredible and very useful tutorial, I have a question with the "completeTask" function, if two tasks have the same name and you filter the task with that function, the two tasks would be deleted, right?
Thank you! Yeah if they have the same name it would delete both, ideally you could add an id for each task and filter by id. I didn't do that so I wouldn't overcomplicate the video!
@@PedroTechnologies Great, it's just what I thought, right now I'm trying to make one on my own, could you tell me what extra features I could add to the app as a practice, and challenge Thanks!
Thank you so much , it helped alot
Glad it helped!
Good video bro! new subscriber 😄
Thanks for the sub!
Thank you so much for this, brother.
Glad you liked it!
Good tutorial man. I recently discovered you and have a great updated content. Can I ask you why yo use :FC in App arrow function but not in a component? Thank you
Thank you! Really appreciate the support! There are two ways of defining props to components in typescript, one of them is by making it a React.FC component and passing the prop interface like this: and there is the other way which is how i did in the video. I wanted to show both ways but accidentally forgot to explain the first one. Sorry about that, you can write components in both ways, I recommend the second one without the React.FC
@@PedroTechnologies Thank you very much for your quick response. I'm watching video after video right now, if you get a lot of views it's my fault lmao. Seriously, good content, updated and with good practices, just what I needed, keep it up! :)
very well explained ..excellent job
Pedro, you're a friggin lifesaver! Thank you for making this video! Petition to make literally everything tomato red 😂🎊❤️☮️🏆 Keep up the excellent work bro
nice, go ahead dude💻
Thanks ✌
Excellent demo of using TS in React. Thanks, Pedro
{2023-04-13}
Valeu Pedrão, vídeo ajudou bastante!
How to I get to validate the inputs
i.e If the input fields are empty, it should return an error beneath the input like input fields are required
However, I really learnt alot from the video thank you so much
Really good video!
Thank you bro!
you have really good tutorials happy i stumbled across your channel. could you make a tutorial for a desktop app using any js framework like electron, nw,js or any other one you want. Also, could you make a video on client data saving aka no database no server this would be more plausible with desktop app creation since people can download the app and data can be stored and saved on clients computer. I just don't know how to do this and have looked on google about it no real tutorial or course that covers this.
I have prior experience with electron (i also have a video on it), so I can definitely make a video teaching how to create a simple electron app and save data!
very helpful thank you very much
Thanks master!!!!
Very useful tutorial
Nice.. Plz make video on angular
Ive never actually used Angular before, sorry about that!
@@PedroTechnologies ok np:)
hey Pedro, I saw link usually is created like the following code in real life project typecripts, but it is a bit confusing, can you explain it a bit more in your video?
import NextLink, { LinkProps as NextLinkProps } from 'next/link';
const Link: React.FC = ({
href,
children,
...props
}) => {
return (
{children}
);
};
export default Link;
Great Video.
Great Job
Isn't it create-react-app? Mine didn't work with the separate Create :)
Which extension you use for showing warnings and errors?
In the components which receives props if we specify component type as FC it gives error.
When you use the FC, props are passed differently!
@@PedroTechnologies got it in the angular brackets next to it , solved , thanks 👍🏻
Bro, how can i implement map() function in the component rather than index.tsx page.
I am trying to pass whole object array as props in the component but getting type error. Please explain me if you know the solution , any help is appreciated ❤️
Why not a class for describing the actual Todo entity
Thanks 🇧🇷
thank you!
Acabei de conhecer o canal, sensacional seu conteúdo.
I have tried this with context api and i find it difficult to use it especially when I put functions to it
Thanks a lot
really helpful
Do this same with js as well. Thank you
I might make one! THank you for watching!
thank you
No update function??
Thank you so much for your effort, and I think making your videos shorter, will be nice
Please make a video how to import images in react using typescript. Please...............
KIndly make a mern series with TS
How can I use the localStorage to keep the list intact between renders?
localStorage.setItem("todolist", JSON.stringify(todoListSate)) // to set the todoState in your localStorage
JSON.parse(localStorage.getItem("todolist")) // to get the todoState from your local storage
Super Like this video
Thank you!
Hi! Pedro. I want to make PR! Add an additional validation if a task is empty. Could I do it?
Great!!!
how to create with npm ???
bro do the crud in typescript and context using react js
Liked and subbed :-)
Awesome thank you!
25:30
Bom inglês, nem parece br
kkkkkkk obrigado!
Most confusing props explanation in the history of ts props explanations; overall lacking teaching conduct
you said no time wasting whit css... and then talked about it for almost half the video. lol