Learn Typescript with React | Quick Crash Course

Learn more web development with my courses 🔥
developedbyed.com/
Today we are going to explore Typescript and how to get started with it using React and Next.js. This is a quick typescript crash course with react that will cover the absolute basics and how to get up and going. I honestly think it's a great idea to add typescript to any project that you are working on, especially new projects. Typescript will help you catch unexpected errors and give you code suggestions.
Chapters:
00:00 Intro
00:48 Getting Started
02:25 React Hooks
04:10 Fetching Data
07:00 Passing Props
11:28 Children props
13:34 Event Listeners
13:35 Where to go next
🛴 Follow me on:
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#programming #react #typescript

[@milkdrom3da]

This short crash course was exatly what I needed!! I have learned TS with plain JS and wanted to use it in my react app. Thank you so much, Eddy!!

[@iqwebserve3973]

Love that you are using Vite too! For your toggle: false, I think you should elaborate to learners that you are also allowed to give TS a fixed value. So, with toggle: false, that is all that is allowed. Had it been toggle: boolean, then you can set true or false. Good video, thanks.

[@MrArod1207]

This was awesome! I've been looking at typescript tutorials the past couple of weeks and all are over complicated. I even laughed a couple of times. Great video

[@jaiminparmar7996]

Found this just in time while I was working on a react + typescript project, thank you!

[@allenbtw]

Ed, you're literally life-saver, I was searching for React Typescript, thanks!

[@fullstackspiderman]

Ed, you surprised me with this course, I’m currently learning Typescript to use in my existing react applications.. thanks 🙏 again for another useful tutorial

[@developedbyed]

That’s so nice of you to say! Thank youuu!

[@abdu1wahid105]

Currently navigating the boulevard of broken dreams that is Next.js 13. This recap was perfect. 😊 Thanks Ed

[@william.darrigo]

Love your teaching style! Simple and straight to the point

[@zancrow_gaming]

I am a fullstack developer been wanting ti learn typescript for a while now. Thought it was like a totally different language. But its not just javascript strictly typed for better development experiece. Used it for the first time ever with node js for auth today i love it. Awsome. This simple straight to the point video has motivated me to test it out with react and next. ❤ thanks😊

[@nickjohnson9770]

liked and subscribed just cuz you got a good vibe. the very effective teaching is just an added bonus!

[@jamesbest2221]

Yay! Thank you, exactly what I needed!

[@Way_Of_The_Light]

Awesome man! Love your work and your personality 🌟🙏

[@rolandlopez7763]

Wow! What a video, straight to the point and simple too! I learned quite a bit here, Thank You!!

[@ohiwantyoutobelieve]

I loved the final recommendations, just start using typescript slowly without over complicaring things

[@marcelo.dota2510]

I was literally searching for a typescript & react course, and you created one 28 minutes ago, I died

[@end-me-please]

RIP

[@54peace]

*Pressed F*

[@wzt9376]

A year ago we lost you. Just to let you know wherever you are we miss you.

[@hehimselfishim]

this makes it look SO easy! now i want to use TS even though i’ve been steering clear because i hear it’s complicated. i guess i’ll have to try it now!

[@mithunprabhu2671]

I was very much waiting this from you.... thank you buddy(ed)😀

[@extradipofhoney6189]

Love your output rate recently Ed! Your content keeps evolving . We're grateful!

[@kirillbaryba746]

Thank you! 🔥it will be interesting to see best practices for react architecture in 2023 🔥🔥🔥

[@codernerd7076]

Your videos keep getting better and better 👏

[@paul_pintang]

Wowww! I've been waiting for this!

[@riacharda]

This was a great tutorial. I'm currently learning typescript and Next 13. I get issues calling child components in parent components. They tend to be ones like "component x is unassignable" and not being able to select an object property dynamically through a string. Edit: I figured out the definition: type iconCollection{ [key:string]:React.ComponentType; } Basically I had a defined set of SVG icons as react components. In the icon component, the icon will be dynamically imported and returned based on the "iconCollection" property name. 🙂

[@CuongVu-yy4cg]

Thank you, this video is exactly what I need.

[@deepak8586]

awesome!!! now we need a creative react + typescript tutorials haha!!!

[@koreandude]

Heya Ed! Any timeline when the updated course will be released? Thanks!

[@msana4420]

Ah shit, finally got a Jebediah beard ;) Awesome content as always. I'd like to see you murking around with unit tests of a halfway complex app. Like with 3rd party oauth libraries or maps/navigation libs. Good job!

[@yanaiedri]

for props with Children, you can use the interface like that (react build-in interface) : interface Props extends PropsWithChildren { ....

[@reactjs1900]

I was waiting for this

[@muhammadzakarya8057]

Great Video! explained necassary things in 17 mnts.

[@andifaizal6848]

Awesome,thank you dev ed

[@ban-prem-001]

title: typescript react setup: vite project: nextjs 😂

[@anna.eis4]

Awesome content! Just when I was looking for a well-explained way to add TS to React, you made it short and simple. I have an off-topic question tho': Don't remember to see an explanation in any of your videos about this but do you consider a good practice to omit semicolons? Cheers!

[@kwii22789]

Dont worry if u use or not use semicolons. Most companies will have automatic linters and formatters that will enforce one or the other.

[@triggerre]

in getPost what if you only need the id and title. Do you still need to declare message on PostProps?

[@alivaliev5152]

What theme are you using? It looks gorgeous!

[@yzdeathxy]

Material Theme

[@korsoskubi8555]

Hey dev ed, are you going to update the creative react and redux course? Thanks in advance.

[@julianvelez6563]

Nice work bro

[@Popo-hr6gc]

Why in the getPost(), you have to specify that it is a Promise and call the type? In the children example, you just called the type. I’ve seen cases like specifying a component as a FC

[@adityapawar7463]

How did you shift from a basic typescript app to a nextjs one? How did you set it up? Do you have the GitHub file?

[@Xaoticex]

yea how does this work if I cant code along you?

[@pascalpur]

Does Prettier work on default with TS in React or NextJs?

[@gautamanand1201]

Similar can be done by npx create-react-app projectname --template=typescript With less clutter preexisting files

[@deepak8586]

you might as well use vite react typescript template

[@dev_adem]

Thanks mate. But you started with Vite and jumped to the ready Next draft. Where is that draft Next project?

[@AndreMazure]

You speak very clean English language. Thank you)

[@bassilmohammad7266]

Thank you I was waiting ❤️❤️❤️🌹🌹🌹

[@bassilmohammad7266]

But why you Don't use creat react app i use this because i learn it from your react course?

[@developedbyed]

Hope you like it!

[@shoukathennadesigns5135]

@@developedbyed could you please make a tutorial on next js swr hook and auth 0 in next js

[@developedbyed]

It will be updated to Next and Vite 🔥

[@Woeden]

Many thanks

[@testermobile834]

Hey, can you please make a video on the extensions that you use on VSCode & themes please

[@andreyokhrimenko2271]

Thanks for cool video, but only one issue - for next videos if you start with creating project on vite-react don`t use for example nextjs project, cause people who learning stuff can`t reproduce your code!

[@birdofhermes6152]

Good stuff

[@regilearn2138]

Please do more PERN/MERN sequilze/MUI advanced typescript videos.

[@RavindraSingh-lp9pl]

Please make project on Typescript REact

[@allisondealmeida]

I like the theme and font you are using, what are they?

[@CodeOnBlocks]

Did you find out what the names were?

[@yulipariz3309]

Acá una seguidora de Argentina, que además de estar aprendiendo a programar, practico el inglés. Muchas gracias saludos :)

[@Nickben89]

gauchita?

[@yulipariz3309]

@@Nickben89 tu hermana

[@Nickben89]

@@yulipariz3309 ni te gastes en aprender a programar turri, en 2 anios te remplazA chat gpt jajajajjajajajajajjajajajajajjaja

[@fergusmeldrum38]

you are funny bro, great tutorial

[@Poohbify]

Did anyone else come across issues inside the parent when on the 'fetching the data' section? It happens when I add async to my component.

[@jeremy0x]

If I want to learn something and there's a tutorial by Ed, then I know my tutorial search has ended.

[@wellyesbutno5639]

Fax no printer

[@user-pi3bu2lm8o]

1:51 Who do you main in league

[@dibendu.s]

@7:47 - you would have known the prop types that the child component requires if you had declared them in your child component.

[@SithLordBishop]

Should have picked Svelte on step 2 :D

[@KrauseLP_]

Which VSCode theme are you using?

[@zayne-sarutobi]

Material theme

[@Anonymous-cb6by]

When I try to make a production I got error

[@farwaamir5952]

Hello sir i am your big fan from Pakistan good job well done plz tell me book name best for css course

[@smile5281]

🎉🎉🎉

[@itsvatsalrathod]

which theme is this. what's the name of this theme

[@farwaamir5952]

Watch almost full course web development but Little bit weak some topics tell me book name of your course about web development

[@akmalkamarudin2976]

I need to know what dark themes are you using. Hope you'd like to share it with us. :)

[@CodeOnBlocks]

Did you find what the name was?

[@akmalkamarudin2976]

@@CodeOnBlocks So sorry, I'm still looking. Currently I'm using the one dark pro darker. Looking for a similar look as in the video.

[@yzdeathxy]

​@@akmalkamarudin2976Material Theme

[@bennettbmadavana7176]

Anyone know which vscode theme he's using?

[@zayne-sarutobi]

Material theme

[@holger5851]

I think it would be easier to follow without using any framework, just pure React and Typescript. Cheers, H.

[@prafuldomde148]

Make a video on react 😭

[@user-bf7yf7sw7p]

Great content! But color scheme of vscode could be improved for selections.

[@gayashanmadhuranga3375]

🤗🤗🤗

[@dominik1023]

Your knowledge is great, but it's challenging to follow for a Typescript beginner. It would be great if you went slower and also explained what extensions you have. There is a view of certain things in the code, that I guess shows up on hover??? I have no idea what that is or how you are getting it. Lot's of little things that are unexplained and hinder understanding.

[@alext8593]

I'm probably one of the few that thought this tutorial was kinda all over the place lol

[@alexliebhaber3109]

How do you get anything done with League of Legends installed? - From a former addict 😂

[@ndukwesamuel7196]

this is not react but next

[@damienbutt6320]

Why you do dis??? 😂

[@sebastianmanco5072]

🐱‍🐱‍

[@EvolutionMachinetoMan]

This guy just killed typescript in 15min lmao. but you missed enums, interfaces and most important differnce between types and interfcaes

[@zayne-sarutobi]

Because those are optional and should only be used when absolutely necessary, for the most part anyways

[@md.asifal-mahmud5952]

I think you are looking more beautiful with beards.

[@mma-dost]

Hey, Ed please trim your beard man you will look handsome 😜😜

[@rp2804]

Bro, I know you are busy but learn to keep your hair well done, watch a yt tut or something

[@sarmadrafique426]

Hey please Don't abuse while teaching man. That's awful.