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

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.

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.

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

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

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.

@PedroTechnologies

3 жыл бұрын

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

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.

Thanks for the video, the explanation was very clear! 🥁

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

subscribed man, a great job and effort from you doing this videos :) thanks

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.

@timuramiraliev7452

Жыл бұрын

thank you man)

@eriklamela4321

Жыл бұрын

you might as well do a hash map for all todos, not to traverse the whole list when deleting

Thank you once again! this is really helpful

Valeu Pedrão, vídeo ajudou bastante!

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

@PedroTechnologies

3 жыл бұрын

Glad it was helpful!

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

@PedroTechnologies

3 жыл бұрын

Happy to hear that! I love the support I receive :)

@vedantthombare1028

2 жыл бұрын

Lol a Pedro helped another Pedro 😂

absolute banger! thanks for the amazing content as always pedro

@PedroTechnologies

3 жыл бұрын

thank you so much! you have no idea how much this means to me!

You are my best programming teacher!

Great!! Straightforward intro to ReactJs - TypeScript👌

very well explained ..excellent job

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

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

@PedroTechnologies

3 жыл бұрын

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!

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

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.

@PedroTechnologies

3 жыл бұрын

Thank you for watching! Yeah i can definitely add that to my list of future videos!

This is a very informative video. I saw it very well.

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

@PedroTechnologies

2 жыл бұрын

Wow! Thank you so much for the timestamps, really appreciate u doing this! WIll add it to the video :)

@Ctrl_Alt_Elite

2 жыл бұрын

@@PedroTechnologies KZread gave me the notification 5 years later lol. No problem, keep up the great work!

Thank you so much for this, brother.

@PedroTechnologies

3 жыл бұрын

Glad you liked it!

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

Thanks for making this in typescript :)

@PedroTechnologies

3 жыл бұрын

Thank you for watching!

Thanks for this tutorial !💚

@PedroTechnologies

3 жыл бұрын

You’re welcome 😊

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

very helpful thank you very much

Thank you so much , it helped alot

@PedroTechnologies

3 жыл бұрын

Glad it helped!

Thank you bro!

Perfect video for react using TS!

@PedroTechnologies

3 жыл бұрын

Glad you think so!

Really good video!

Thanks master!!!!

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?

@PedroTechnologies

3 жыл бұрын

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!

@DBDrumss

3 жыл бұрын

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

@PedroTechnologies

3 жыл бұрын

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

@ivgadev

3 жыл бұрын

@@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! :)

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.

@PedroTechnologies

3 жыл бұрын

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!

Which extension you use for showing warnings and errors?

Thanks a lot

Very useful tutorial

Great Job

thank you!

cool tutorial learnt a lot can you make CRUD react project using typescript redux, axios and styled component

@PedroTechnologies

3 жыл бұрын

Great suggestion! I can definitely do it!

Great Video.

Acabei de conhecer o canal, sensacional seu conteúdo.

Thanks 🇧🇷

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

nice, go ahead dude💻

@PedroTechnologies

3 жыл бұрын

Thanks ✌

really helpful

thank you

Good video bro! new subscriber 😄

@PedroTechnologies

2 жыл бұрын

Thanks for the sub!

Pedro, hope all is well. Curious, why did you use interface instead of type? Do you typically use interface?

Great!!!

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 ❤️

Excellent demo of using TS in React. Thanks, Pedro {2023-04-13}

Hi! Pedro. I want to make PR! Add an additional validation if a task is empty. Could I do it?

I have tried this with context api and i find it difficult to use it especially when I put functions to it

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.

Isn't it create-react-app? Mine didn't work with the separate Create :)

Wouldn't be enough setting the prop in TodoTask as below? const TodoTask = (task: ITask) => { ... } Anyway, thanks for the video! Ur channel is awesome!

@PedroTechnologies

3 жыл бұрын

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.

No update function??

how to create with npm ???

In the components which receives props if we specify component type as FC it gives error.

@PedroTechnologies

3 жыл бұрын

When you use the FC, props are passed differently!

@rohan1765

3 жыл бұрын

@@PedroTechnologies got it in the angular brackets next to it , solved , thanks 👍🏻

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;

Do this same with js as well. Thank you

@PedroTechnologies

3 жыл бұрын

I might make one! THank you for watching!

Nice.. Plz make video on angular

@PedroTechnologies

3 жыл бұрын

Ive never actually used Angular before, sorry about that!

@mansilaad2062

3 жыл бұрын

@@PedroTechnologies ok np:)

bro do the crud in typescript and context using react js

How can I use the localStorage to keep the list intact between renders?

@theundergroundsm

2 жыл бұрын

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

Please make a video how to import images in react using typescript. Please...............

Super Like this video

@PedroTechnologies

3 жыл бұрын

Thank you!

KIndly make a mern series with TS

Why not a class for describing the actual Todo entity

Liked and subbed :-)

@PedroTechnologies

3 жыл бұрын

Awesome thank you!

Thank you so much for your effort, and I think making your videos shorter, will be nice

25:30

Bom inglês, nem parece br

@PedroTechnologies

3 жыл бұрын

kkkkkkk obrigado!

you said no time wasting whit css... and then talked about it for almost half the video. lol

Most confusing props explanation in the history of ts props explanations; overall lacking teaching conduct