TypeScript Course In ReactJS - TypeScript
Vložit
- čas přidán 14. 06. 2024
- In this video I will go over everything I thing a beginner should learn on how to use Typescript in React.
-
❤️ Want to Support the Channel?:
/ @pedrotechnologies
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Email: machadop1407@gmail.com
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
Timestamps
00:00 | Setup Typescript in React
10:05 | Components / Props / Interfaces
20:17 | UseState in Typescript
25:45 | Enums / Types
32:49 | Context API Typescript
37:42 | What to do when you panic?
40:25 | Folder Structure - Věda a technologie
I was learning typescript. And was thinking now i have to find a tutorial for typescript with reactjs. But this man reads our mind. He said no problem i have read your mind here comes the video. Just superb quality content 💓
Hahaha happy to hear this!
Just what I was thinking and thankfully CZcams algorithm suggested me PedroTech again
Straight forward Tutorial. I just love it. Thank you Pedro for accelerating my learning curve with this video
Dude, I was learning typescript and all of a sudden this video pops up on my favourite youtube channel🤯
Hahaha it makes me very happy that you like the channel!
Dude you figured how CZcams algorithm works 🤯🤯🤯
@@andrewbarr4843😂
Great tutorial to cover all the basics!! Now I can understand the type declarations and those react code written in typescript looks less intimidating.
21 minute into the video and i can say that it is a very good tutorial. I'm learning this to implement on my next app to put in my portfolio. Hiring process is tough right now. Who else is in the process of making a large app just to land a job???
The best tutorials for any aspiring software engineers and web developers.
Thank you!
That was an easy flow in learning through your video. My knowledge has increased. Specially I loved it when you organized the code into files.
Honestly the best tutorial for typescript. Thank you!
this is one of ur better tutorials, unlike other utubers u actually show the proper way to write props and show us how to work with enums and types which was useful to me, thx
Pedro, love your channel, you're explaining very well! I'm practicing Typescript in React, very helpful resource!
Great tutorial that covers all the basics in a very simple and forward way Thank you!! looking for more
Trying to refactor a project into TypeScript and this hit all the points with speed, thank you!
Congratulations on the tutorial, Pedro! És um grande 😀
Continue com o bom trabalho, vai chegar muito longe. Sucesso em sua caminhada.
Thanks Pedro!
Simple & Informative
Thanks a lot for the video Pedro!!! Waiting for more Typescript projects from you!
Your literally the best person to learn from on CZcams, You simplify concepts so easily, that one can watch u and start coding immediately, the simplicity of ur teachings is what i find outstanding, simple but effective code .. keep it up ❤❤❤
very clear description of the difference between typescipt and raw JS in constructing REACT components.
Eu gostaria de agradecer imensamente pelo conteúdo que você produz, sua didática é muito boa e vai direto ao ponto em seus vídeos. Continue contribuindo assim que você vai longe
Fico feliz Vitor, obrigado pela mensagem!
Thank you! This course helped me a lot. I can't wait to watch other React videos of you Thank you so much 👍😍
Very well explained! Thanks!
So simple. I learned so much just watching you
Dude your tutorial are the best
Thank you pedro , cant wait for a tutorial of react using leaflet !
Thank you for this great tutorial!
This video is amazing! Great explanation!
Thanks pedro this was of great help
smooth transition from js to ts. Awesome content 👌
this guy's videos are just insanely good man
Hey. Pedro,
Thanks so much for this video. You brought a lot of light in the dark tunnel :D.
Muchas gracias, amigo!
great vid man, as allways.
Love the way you teach
Foi quando falou o nome que eu percebi que era br hahaha pronúncia perfeita e video mais perfeito ainda! Muito obrigada!!!
Absolute BANGER
Thank you so much, this is a wonderful tutorial
Great Tutorial. It was helpful.
Thank you for this useful video!
pedro eu te amo AAAAAA obrigada
It is a GREAT tutorial！！！！！！！ Thanks for sharing
Really cool and informative video. It would be great to see you code a small application using typescript with hooks and some data fetching 😁
Incredible useful, thanks.
Good primer, thanks!
Caraca, fiquei surpreso quando vi que tu é brasileiro. Parabéns, está nos representando muito bem em meio ao conteúdo em inglês, obrigado!
Wow Amazing just what it is I am looking for..
great video, I followed it and did the code at the same time. thank you
Thanks buddy ! u r amazing !
nice tutorial i really love ur all videos..
Great job!!!
Just Amazing , super Content
Thanks Pedro...your tutorials are excellent. This tutorial on TS is very good and a very good starter for any new dev. Do you have any tutorial which shows as how to separate the modules in reactjs (typescript based) where I have a core module which is developed and compiled separately and other child modules which is developed and packaged separately but depending on needs I should be able to use the child modules at runtime (no dependencies at compile time or runtime)
yes thank you for your video
Very Useful Tutorial... Thanx man! 🙏😀
Welcome 😊
the very best video!
Thanks soo much Pedro
Really good and informative tutorial
bro you are insane！I feel like i become a typescript master after watching your video
Happy to hear that!
Damn you earned a sub great teacher
Great thanks a lot !
Great Video!
Typescript is amazing! Thank you pedro
Glad you like it!
This video is amazing. In a short time we get all we need to get started.
Would you consider maybe making some more advanced tutorial on some larger project like eshop or something that requires communicating with an API for login and perhaps even use some other modules like Redux? I'd appreciate that a lot.
Keep up the good work!
did he do it pls let me know
yes please share link if found some good tutorial for a larger project
Muito bom Pedro.
This video is really really useful for beginners who want to learn basic typescript concept.
every movement is useful overall I'm giving your Five star ⭐ rating as a learner.
Thank you so much for sharing your knowledge with other people.
very well explained video!! thank you. Could you make more videos about typescript? it would be very useful if you make the whole project with typescript!!!!!!
thanks for this amazing video.. love it..
Glad you enjoyed it!
u r the best
Thanks!
Oh wow dude, I have a technical test for a job interview that relies on TypeScript and createContext, while I've only worked with React/Redux so far, this is exactly what I needed to be able to do it, thank you so much
did you secure the job after the interview?
@@brevianwafula1880 Well I got shortlisted, at first they went with the other candidate as he was more experienced, but after a month they got rid of him and called me back to offer me the job. In the meantime I had had another offer in a different company and I took it. I'll need Angular in this new job, which relies on TypeScript as well, so all the skills I got from Pedro will be super useful as well. I'm starting next week and I am crippled with impostor syndrome at the moment (first developer job ever!), please wish me luck!!
@@sonjiaasana ooh my God!,this is great! I wish you all the best .we can reach out maybe if you okay with that
Very good video.
The fact that you prefer using "interface" over "type" is quite surprising..
Also, I was looking for Typescript with React Hooks.. Especially considering the fact that you said that you really love TS.. couldn't find those though..
Thanks anyway.
Ur video was helpful, please do crud with typescript and context
And there is one more thing
If you create a functional component using a traditional method like this
import {FC} from 'react';
export interface PersonProps{
}
// Here you can't use FC on a function.
export function Person(props: PersonProps) {
return (
);
}
In order to use FC type provided by react you have to the use Arrow function.
import {FC} from 'react';
interface PersonProps {
name:string,
email?:string,
age:number,
}
export const Person:FC= ({name,age}) =>{
return (
{name}
{age}
);
}
So good tutorial
can you make 1-2 typescript projects for beginners? thanks for the video!
Perfect Course :)
just bear in mind guys this tutorial is year old and using FC is not recommended anymore. Other than that great tutorial and love way you explain things. Thanks for what you do
is it better to do with class component ?
Amazing content as always!
I wonder what extensions you use to allow emmet on jsx and tsx files
I would also love to use your vs theme but I don’t know which one it is
Very clear content
Glad it was helpful!
@@PedroTechnologies Hope you make many video so that help many people student or newbie
thank you
Bro, Thank you. :) I have a new job. ( Medior React developer ) and the company is using typescript. I've been watch many tutorials. But finally i understand the concepts of typescript. ( Thanks to many tuto and the effort ).
bro, would you link me up for a front end job
Excellent video 👏
Thank you very much!
nice video, sometimes i saw code like this: import NextLink, { LinkProps as NextLinkProps } from 'next/link' is this also typescript?
Dude, thank you so much for this. I am still trying to land my first job in tech after attending a bootcamp. I applied to a job that is using a JS stack with React/Redux/TypeScript and Node, but I never learned TypeScript so I am trying to cram it for this take home assessment. LOL.
Hahaha I always advice learning TS cause it is very important for jobs! Don't worry you will get it!
kinda similar story. I already got the internship and now they asked me to learn typescript and testing library for the work.
well explained
An excellent introduction to using TypeScript with React. Thanks, Pedro.
{2023-04-13}
which extension that will give the suggestions like this is the type of any like that
🔥🔥🔥
Thanks bro :)
You're welcome!
Another great tutorial, I got stuck on the last one trying to make a CRUD app and can't figure where I went wrong.
Sorry to hear that! Where did you get stuck?
@@PedroTechnologies The tutorials were really good, but I got stuck on episode 4 of the Full Stack course - I made a post on Stackoverflow about it here stackoverflow.com/questions/68444689/cant-perform-post-function-to-sql-db-using-formik?
please make a tutorial on, how to insert image in react using typescript please
Thank you very much.can you please provide the code examples ? So i can use it as a resource if i forget something .many thanks again for your videos :)
@pEDROtECH Please make complete TypeScript React Series.
Gracias (:
What type to add if i have array of objects ?
got any videos on Vite and TS?
Buenardo
Thank you so much! But enum's terrible thing for props haha Users easily can put the literally pure string or numbers which we don't expect
Valeu!
Obrigado pelo apoio!
@@PedroTechnologies eu que agradeço, seu canal vai ser gigante ainda, pode printar
Can you make a firebase auth video?
E Aí, Beleza? muito bom, mas você perdeu de mostrar no navegador, o exemplo com type (nameForType) e também o exemplo com contextValue (como usar AppContext value en Person.tsx?)
i face the problem api data destructure prop with typescript please bring a tutorial on it
So this are all the use case of typescript in React ?