I have something to tell you. You're a legend and you have helped me become a better Developer. Your tutorials have helped me a lot. Thank you for this series. Stay blessed. Love from Africa
I never comment on youtube videos but I just had to say THANK YOU!! I'm learning typescript for a React project and it's been so difficult to find tutorials that use the new syntax without React.FC. You explain everything in such an easy to understand way yet still manage to teach more in 30 mins than a lot of tutorials do in 2 hours. Bravo 👏👍
This tutorial might seem a "basic introduction" to the subject of React with using typescript, but it is NOT. It is much more, and thanks to Dave Gray's clear n simple approach, he has made what would be a difficult subject matter to follow, he has made it easy to follow. A BIG thank you! I will certainly look forward to more of your examples to follow.
I'm leaving a comment here under this new video instead of the video I'm watching now (MERN stack app tutorial) because I want you to notice this comment. I want to say thank you for what you are doing, now for me you are the best teacher on RUclips. I really wanted to write this, because I understand how hard it is for you to give us such knowledge. Hello from Ukraine!
Hey Dave I know there's a super slim chance you'll see this but if you do, could you please, please do a Next.js for beginners -> intermediate video series? I'm literally surviving at my job on your videos alone (specifically the protected routes video). Thank you so much, haven't found another instructor as thorough and concise as you!
Sir, I just discovered your RUclips channel and I've been learning a lot more things effectively! I appreciate the time you put into your tutorials! Thank you, Dave :D
At 17:30, how is prev being used to hold the value? How does prev have any idea of what counts value is? is it like a two way binding? the syntax is so confusing for me coming from C# MVC.
You're welcome! Yes, React + TS was always in the plans. The TS series has methodically built up a good foundation of TS fundamentals before merging with React.
Awesome video as always. Anything typescript is greatly welcomed! P.S. it’s a really good idea to have the hooks in one separate video. Will be helpful for reference.
Hi Dave, I wanna ask you something. Is soft delete a thing? I mean compared to hard delete what you recommend to use in small-medium business app? or it depends on what business that we run?
Does not seem like a question related to this video? However, info on the topic you are asking about: www.becomebetterprogrammer.com/soft-delete-vs-hard-delete/
@@DaveGrayTeachesCode Hi Dave I've finally found the answer, it is the 3 of them (I said 3 because the last one is Audit) can be work together or combining or support each others, like the soft delete make data temporarily "unaccessed" to common users and the data is still remain in the db for specified time then use the audit from the db to make the analysis, audit etc and once the data is no longer needed we can use the hard or permanent delete data. Have you ever make the app with that requirements? I currently challenge myself to making those app (by learning and apply with your tutorials of course), can you give me suggestion what app that I can make that meet the requirements, Dave?
Hey Dave 😀 What if I have api key protected backend that needs to be accessed from the frontend? How I should store the api key in React? Normally it would be seen from the browser 🙃 Thanks for the course 🙂
Anything on the frontend can usually be seen. The only thing JS cannot access is a secure httpOnly cookie. If you have to send the API key, that is what I would use. However, you can use a serverless function to set up an API relay. I have a video on that. Likewise, if you start using React server functions, you can keep the key there and never send it to the client.
Hello Dave, Its amazing series to switch from js to ts, Please tell me one thing how can I compile my tsx code in jsx code in react just like in typescript using -w to view ts code is js in build folder? Regards.
Dave ❤ thank you such 🙏 As a React Developer I was searching for that only … react and typescript. Would you give us more tutorial on this in specific ? Maybe even challenges of re-creating simple react app into typescript ? I would be so thankful … btw … do you a paid full courses anywhere ?
You're welcome! It is my goal to create a paid full course in 2023. More React + TS content is coming and will be added to this Typescript playlist (link in description)
@@DaveGrayTeachesCode will you be announcing the paid course here on RUclips or their is an email list we can subscribe ? I love the way you teach! I have an idea … how about short projects in react and typescript ? That would just awesome 🙏
@@DaveGrayTeachesCode okay thanks. I'm watching your cource of css but sometimes i get into some trouble so if i give you my what's app number. Will you help me with some codes?
Now I'll need to learn how to manage the anxiety until the next episode releases hehehe, another great video! Are you considering teaching Rust at some point in the future? Out of curiosity. It seems to be getting tons of traction and support from all the big actors in the tech scene.
I think once you start using Vite instead of CRA, you won't go back. It's not just that it doesn't create quite as much boilerplate to delete - the main benefit is that it is so much faster. It does things a little differently. Link: vitejs.dev/
This is a good question! I provided a link to the React Typescript Cheatsheet repo in the description, but here is a link to the specific part of the repo that answers that: github.com/typescript-cheatsheets/react#types-or-interfaces
I wish you had a next tutorial without typescript in it I don't know much about typescript and why most of the RUclipsrs have used typescript in their next projects
I think the reason it keeps autocompleting to different things because the snippet extension you have installed. It was bothering me so much in the past, so i decided to stop using it.
Can you explain better about what is wrong with React.FC? It seems to me that it was "bad in the past" and had implicit children, but however, now it doesn't. So what is wrong then now? Everywhere I look it links to 2019-2020 thread in github which is not the case in React 18 in 2022(close to 2023) where implicit children are now REMOVED. So what is the problem again?
@@DaveGrayTeachesCode I took a look at it and it pointed to the same thread from 2019 which is irrelevant today. In 2022 with React 18 type updates those issues were fixed and it still seems to me that React.FC is fine to use nowadays, just as I said in my initial comment. "In most cases it makes very little difference which syntax is used, but you may prefer the more explicit nature of React.FunctionComponent" - quote from that cheatsheet. For me I think I better prefer to type elements like const App:FC ({some, parameter}) => {} ↑Which does NOT have implicit children in React 18 hence I don't see any problem here. Or const App:FC ({children, some, parameter}) => {} ↑When you specifically need children. This seems more inline with typescript ideology of explicitly defining types than just implicitly returning JSX.Element.
I have something to tell you. You're a legend and you have helped me become a better Developer. Your tutorials have helped me a lot. Thank you for this series. Stay blessed. Love from Africa
Thank you for the kind words! 🙏
You're a blessing for the developer community.
I'm running out of words to thank you.
Thanks for your efforts the community appreciated it.
Thank you for the support! 💯
I never comment on youtube videos but I just had to say THANK YOU!! I'm learning typescript for a React project and it's been so difficult to find tutorials that use the new syntax without React.FC. You explain everything in such an easy to understand way yet still manage to teach more in 30 mins than a lot of tutorials do in 2 hours. Bravo 👏👍
Happy to help and thank you for the kind words! 🙏💯
Your efforts are amazing. It makes every one of us who wants to learn even more motivational. Thank you so much Dave❤️
You're very welcome!
holy cow! you did it man, that's amazing I'm super excied for such amazing content.
I'm sure it'll be THE BEST react typescript series on the internet
Thank you for your vote of confidence! 💯
This tutorial might seem a "basic introduction" to the subject of React with using typescript, but it is NOT. It is much more, and thanks to Dave Gray's clear n simple approach, he has made what would be a difficult subject matter to follow, he has made it easy to follow. A BIG thank you! I will certainly look forward to more of your examples to follow.
I'm leaving a comment here under this new video instead of the video I'm watching now (MERN stack app tutorial) because I want you to notice this comment. I want to say thank you for what you are doing, now for me you are the best teacher on RUclips. I really wanted to write this, because I understand how hard it is for you to give us such knowledge. Hello from Ukraine!
Thank you for the kind words and hello to Ukraine! 👋
Thanks Grey. I have watched tutorials on React Typescript but have been secretly waiting for you to put out one.
You're welcome! And your secret is safe with me. 😆
@@DaveGrayTeachesCode lol
Hey Dave I know there's a super slim chance you'll see this but if you do, could you please, please do a Next.js for beginners -> intermediate video series? I'm literally surviving at my job on your videos alone (specifically the protected routes video). Thank you so much, haven't found another instructor as thorough and concise as you!
Glad I could help! Next.js is requested frequently! I plan on doing something with it early in '23!
Waiting for nextjs 👍
Sir, I just discovered your RUclips channel and I've been learning a lot more things effectively!
I appreciate the time you put into your tutorials! Thank you, Dave :D
Welcome aboard! 🚀
Dude, you have an incredible talent as a teacher.
Thank you!
Dude, you have no Idea how many lives you are changing.
Huge thanks !!!
You're welcome and I'm glad I could help!
At 17:30, how is prev being used to hold the value? How does prev have any idea of what counts value is? is it like a two way binding? the syntax is so confusing for me coming from C# MVC.
Thanks!
Thank you for the support! 🙏💯
Would be great to see you hit 100k subs by the end of this year! Awesome job as always! Thanks 👍
Thank you!
So great!!! Very, very important topics discussed. No one talks about this. So cool. Thank you!!!
Wow Dave, I didn't think you would even add the react ts tutorial. Thank you sooo mucchhhh. You're literally saving lives with your videos 😊
You're welcome! Yes, React + TS was always in the plans. The TS series has methodically built up a good foundation of TS fundamentals before merging with React.
The quality of these videos rival paid courses, thank you for all the hard work you put into making these for us, it really helps the community 👍
You're very welcome!
Thank you, when i needed ts tutorial, you post it just in time
Glad I could help!
Great video!🌟
I hope you'll do redux with typescript refactoring previous MERN Stack 👍👍
Thank you!
I can't remember if I was one of the people who requested TS/React, but this series chimes in at the right timing 🔥
Glad to hear that!
At around 23:23 why does the function need the first generic? `const List = (//blah) ={}`
Very clear explanation Thank u Dave!
I Really Appreciate you for this Dave, LOVE YOU DAVE ❤.Please continue this series, with a real world app
Thank you and thank you for the request!
Wow ... I'm excited 🤩 ... Was awaiting
Thanks Dave 🙏
You're welcome!
Right on time. I was just struggling with this today!
Glad to hear it helped!
Thank you Dave. I really appreciate your efforts.
You are very welcome!
I never comment on youtube videos but I just had to say THANK YOU soo much
Very Informative! Thanks Dave.
You're welcome - glad it helped!
Awesome video as always.
Anything typescript is greatly welcomed!
P.S. it’s a really good idea to have the hooks in one separate video. Will be helpful for reference.
Absolutely! 💯
That children part was absolute magic ..✨✨✨✨✨✨
Thank you!
your videos are always high quality!
Thank you!
Dave , love you man , you made life easy! ❤
The best tutor on *RUclips*
Thank you for the kind words! 🙏
You are amazing dave!!
Thank you!
Nice Tutorial. Your content is very good
Im ready for this 🚀🚀🚀
Let's go! 💯
WOW ,thanks again waiting from long
You're welcome!
Awesome video, as always :)
🙏🙏
Great tutorial, Thank you!
You're welcome!
Hi Dave, I wanna ask you something. Is soft delete a thing? I mean compared to hard delete what you recommend to use in small-medium business app?
or it depends on what business that we run?
Does not seem like a question related to this video? However, info on the topic you are asking about: www.becomebetterprogrammer.com/soft-delete-vs-hard-delete/
@@DaveGrayTeachesCode Hi Dave I've finally found the answer, it is the 3 of them (I said 3 because the last one is Audit) can be work together or combining or support each others, like the soft delete make data temporarily "unaccessed" to common users and the data is still remain in the db for specified time then use the audit from the db to make the analysis, audit etc and once the data is no longer needed we can use the hard or permanent delete data. Have you ever make the app with that requirements? I currently challenge myself to making those app (by learning and apply with your tutorials of course), can you give me suggestion what app that I can make that meet the requirements, Dave?
Thanks for valuable lessons!
How long is the playlist going to be?
Good luck everyone!
This is part of my Typescript series. I just follow the content with no predetermined series length.
@@DaveGrayTeachesCode OK! We're ready to implement this knowledge!😁
We need an advanced React TS tutorial
Very helpful video❤
Thank you Dave, its on time
You're welcome Double H!
Can you explain to me about intall the snippet ?
Awesome waiting for this video thanks
Yes, we built a good foundation in TS leading up to this. 💯
very informational, thanks for such a great video!
Glad it was helpful!
Super Dave!!! 🙌
Right on! 🚀
Hey Dave 😀 What if I have api key protected backend that needs to be accessed from the frontend? How I should store the api key in React? Normally it would be seen from the browser 🙃 Thanks for the course 🙂
Anything on the frontend can usually be seen. The only thing JS cannot access is a secure httpOnly cookie. If you have to send the API key, that is what I would use. However, you can use a serverless function to set up an API relay. I have a video on that. Likewise, if you start using React server functions, you can keep the key there and never send it to the client.
Hello Dave, Its amazing series to switch from js to ts, Please tell me one thing how can I compile my tsx code in jsx code in react just like in typescript using -w to view ts code is js in build folder?
Regards.
Awesome tutorial thank you very much
You're very welcome!
Mil Gracias, Saludo desde Venezuela tu amigo Jose Grillo
De nada Jose! And hello to Venezuela! 👋
24:50 Generic component (important moment)
thank u so much
You're welcome!
Hey Dave, Thank you very much for your great work. I'm learning a lot from the videos. Please can you do Vue + Typescript lessons 🙏
You're welcome! I have not published anything about Vue, but I may someday. www.youtube.com/@ProgramWithErik makes Vue his primary focus.
@@DaveGrayTeachesCode Awesome! Thank you v much.
you are wonderfull man. thank you
I don't know what to say, Dave. I hope you will get everything you want from life, as you are helping people get what they want
Thank you for the kind words! 🙏
Can’t I just create span element inside the list? Why do we need a render function?
please do more i been struggling to even make a form and get data from it in react
Might be a good start here: ruclips.net/video/brcHK3P6ChQ/видео.html
Thaaaaaaaaaaaaaaaaaaaaannnnnnnnnkkkkkkkkkkkkk YOU FOR THIS!!!!!!!!!!!!!!!!!!!!!!!!!
Thanks Dave
Welcome!
Hi dave sir, really thank you for creating such valuable courses 😊. But I want small help, can you create a tutorial for using websockets in react.
Thank you for the request!
Good as always. A question, what extension do you use for the icons in the folders ?
Here you go: ruclips.net/user/shorts-uhzj-kjfV4
@@DaveGrayTeachesCode Thanks
Thanks again!
Welcome!
great guide
Thank you very much!!! You can do
Application using Ts, Redux toolkit, react ? Thank you,😊😊
Welcome!
Dave ❤ thank you such 🙏 As a React Developer I was searching for that only … react and typescript. Would you give us more tutorial on this in specific ? Maybe even challenges of re-creating simple react app into typescript ? I would be so thankful … btw … do you a paid full courses anywhere ?
You're welcome! It is my goal to create a paid full course in 2023. More React + TS content is coming and will be added to this Typescript playlist (link in description)
@@DaveGrayTeachesCode 🙏 don’t forget react please ❤️
@@DaveGrayTeachesCode will you be announcing the paid course here on RUclips or their is an email list we can subscribe ? I love the way you teach! I have an idea … how about short projects in react and typescript ? That would just awesome 🙏
@@ilan117 sign up for newsletter/announcements: www.getrevue.co/profile/davegrayteachescode and yes, there will be some React + TS projects 💯
What is the color theme you are using in vs code?
My theme choices: ruclips.net/user/shortsdp4u1NNFhtE
Very Awesome 👍👍
Thank you!
Is there gonna be part 2?
Yep its a great and very very informative video !!!
Regard from Pakistan
Thank you and hello to Pakistan! 👋
Sir. Plz tell us about which language between js and ts is better? I'm soon gonna learn one of these so plz tell me which one's better
You need to know JS to learn TS.
@@DaveGrayTeachesCode okay thanks. I'm watching your cource of css but sometimes i get into some trouble so if i give you my what's app number. Will you help me with some codes?
Now I'll need to learn how to manage the anxiety until the next episode releases hehehe, another great video!
Are you considering teaching Rust at some point in the future? Out of curiosity. It seems to be getting tons of traction and support from all the big actors in the tech scene.
Thank you! I've heard good things about Rust. Not on my immediate list, but there is a good chance I'll eventually get to it.
that's cool !!!
I hope you can also talk about react native
Thank you! I may get a chance to cover React Native in the coming year 😀
@@DaveGrayTeachesCode I can't wait for it
So is VITE basically a better way to create react app skeleton without the extras? (Backend dev inquiring 😄). What is not generated vs createReactApp?
I think once you start using Vite instead of CRA, you won't go back. It's not just that it doesn't create quite as much boilerplate to delete - the main benefit is that it is so much faster. It does things a little differently. Link: vitejs.dev/
When should we use interface vs type ?
This is a good question! I provided a link to the React Typescript Cheatsheet repo in the description, but here is a link to the specific part of the repo that answers that: github.com/typescript-cheatsheets/react#types-or-interfaces
@@DaveGrayTeachesCode That repo is pretty good. Thanks for that
Thank you.
Welcome!
please do more video for react typescript
Excelente. Muchas Gracias .
De nada mi amigo!
I wish you had a next tutorial without typescript in it I don't know much about typescript and why most of the RUclipsrs have used typescript in their next projects
DAVE 🔥
🤘🤘🤘🚀
Thank you
Welcome!
A Ma Zing. Thankyou!
Welcome!
Finally!!!!!!!!!!!
For sure! We built a good foundation of TS leading up to this point. 💯
niceee, really nice
Thanks!
Awesome dude!!!! so muchhhh!!! are you god?
1M is not a dream, I can see it coming...
Just a dev dude in Kansas. Thank you for the kind words! 🙏
you lost me at the generic part. I don't know anything about interfaces and generics. Though the first parts were really easy to follow. Thanks!
I do cover generics earlier in the TypeScript series: ruclips.net/p/PL0Zuz27SZ-6NS8GXt5nPrcYpust89zq_b
I think the reason it keeps autocompleting to different things because the snippet extension you have installed. It was bothering me so much in the past, so i decided to stop using it.
Yes, I'm going to look into this. I enjoy some of the snippets so maybe I can modify it.
@@DaveGrayTeachesCode It's also a great idea. I am waiting for the solution to next video :)
we really need it specially MERN with typescript and redux-saga
const List = (props: ListProps) => {
const { items, render } = props;
return (
{items.map((item, i) => (
{render(item)}
))}
);
};
is to prevent compiler thinking it is a jsx tag. I ask chatgpt ...
thx
i desperately need for lesson 10
Lesson 10 was the introduction to Vite. Playlist here: ruclips.net/p/PL0Zuz27SZ-6NS8GXt5nPrcYpust89zq_b
Can you explain better about what is wrong with React.FC? It seems to me that it was "bad in the past" and had implicit children, but however, now it doesn't. So what is wrong then now? Everywhere I look it links to 2019-2020 thread in github which is not the case in React 18 in 2022(close to 2023) where implicit children are now REMOVED. So what is the problem again?
Look at the link in the description for the tutorial references pointing to the React Typescript cheatsheet. It is discussed in more detail there.
@@DaveGrayTeachesCode I took a look at it and it pointed to the same thread from 2019 which is irrelevant today. In 2022 with React 18 type updates those issues were fixed and it still seems to me that React.FC is fine to use nowadays, just as I said in my initial comment.
"In most cases it makes very little difference which syntax is used, but you may prefer the more explicit nature of React.FunctionComponent" - quote from that cheatsheet.
For me I think I better prefer to type elements like
const App:FC ({some, parameter}) => {}
↑Which does NOT have implicit children in React 18 hence I don't see any problem here.
Or
const App:FC ({children, some, parameter}) => {}
↑When you specifically need children.
This seems more inline with typescript ideology of explicitly defining types than just implicitly returning JSX.Element.
I hate Typescript SO much. I wish JavaScript introduced native types so I could completely forget about the nightmare this is.
I feel you, bro. Typescript does types in such a gimmicky way, even working with Java was easier and more intuitive for me
I never listen to Tech Twitter. Tech Twitter is nothing but stupid tech in-jokes, none of them even a little funny. A complete waste of time.
Thankyou
Welcome!
{2023-01-29}
Thanks!
Thank you for the support!