Todo List in ReactJS using TypeScript Tutorial

Use code: PEDRO for 20% off ^

In this video I will teach you guys how to code a todo list in react using typescript. We use the typescript template to generate the application.
-
-

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

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
36:52 Testing final app
37:43 Outro

Tags:
- TodoList
- Fetch
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[amt]

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.

[liondepierre]

I've seen a lot of tutorials but this is by far the most down to earth tutorial I've seen. Thank you!!

[johneiler]

Great video!

Just a note, if using FC or React.FC for a component like the one at 28:30, you will write "<Props>" next to FC/React.FC, instead of ":Props" next to the props object parameter.

[Ctrl_Alt_Elite]

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

[sleepyadults]

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.

[Shakeel]

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.

[muhammadhamza]

Oh man u are amazing I just started to learn typescript yestday

[ooz]

Your explanation is so clear and direct! Thanks a lot:)

[matkl]

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

[vargasbj]

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 !!!

[wiliansilvadeoliveira]

Pedro, estou tão feliz em achar seu canal, seu inglês é tão bom e calmo, o conteúdo é muito útil.

[HR-pzts]

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.

[NehaKumari-drgs]

Thanks for making this in typescript :)

[ThColinPereira]

absolute banger! thanks for the amazing content as always pedro

[nxxdev]

if you dont have "YARN" you can ** execute npx create-react-app my-app --template typescript **

[steven]

Thank you for this video, I really leveled up my typesript!!!

[valentinaotocan]

Please, more video like this :D. Typescript & React.js 😊

[denisjunior]

great video man! You're helping me a lot with your videos.

Great!! Straightforward intro to ReactJs - TypeScript👌

[PedroTorres]

Thank you Pedro, you are so good explaining and everything is so clear.
Your channel is helping a lot of people for sure!