React With Typescript Crash Course - How To Use React With Typescript

I show how to use React with Typescript.

- How to define a component.
- How to specify props using types and interfaces
- How to define state
- How to handle events

[NateMurrayEigenjoy]

* 0:47 - the files create-react-app generates for us
* 1:39 - what to name your React TypeScript files
* 2:16 - a d.t.s file and what it's used for
* 2:50 - writing a React Typescript component
* 3:24 - handling events (with types)
* 3:49 - how to configure types with generics
* 4:20 - using Hooks (useState) and TypeScript
* 5:11 - using controlled form components
* 5:36 - adding button click handlers
* 5:54 - typing component props
* 6:14 - defining interfaces for props
* 6:50 - typing component props in a Reacty-way
* 7:46 - idiomatic Functional Components with FC
* 8:05 - props, optional values, and default arguments
* 8:34 - typing JSX tag props
* 9:16 - defining props with types
* 9:25 - types vs. interfaces

[bibblebabl]

Awesome. finally someone explains quickly and at the same time is very informative

[victorescober]

precise and resumed explanation...thanks..

[TomasJogin]

Hi Maksim! Just want to say I enjoy your content, and your thumbnails are hands-down the best on Youtube!

[bibblebabl]

Really nice that you cover popular things like ts, react, ssr, deno etc. keep it up. Wish you more likes and subs ;) ps. You have showed some difference between type and interface, but I think it could be interesting to understand why do we have both of them

[ΚλαϊντιΑ]

short and informational, exactly what i wanted. Thank you for the video

[mugiwaranoDave]

Thank you Maksim. I really love your content

[marielukesova]

Love your video, thanks for such a useful content about TS 😎 short and practical. Subscribed.

[DiegoMascheroni]

good video, thanks!
You can open the project in vscode typing `code react-typescript-example`
without make cd in the folder.

[LarsRyeJeppesen]

Typescript is amazing. Angular team was right in baking it in from the get go. Vue3 also has TS as default.

[alexandervashchuk]

You do all those videos for free?
That's crazy 🔥

[thedropout]

Appreciate this content, may I ask what plugins are you using in VSCode?

[fParadx_]

Great video! How did you manage to get vim working inside vscode? I know that there's an extension, but it has always been veeery laggy with me.

[JvstnTime]

I am really thankful for the course, but i have a problem, my future manager sent me a task to see if he can hire me or not (react ts project) and i don't know how to run it on my machine it says type "yarn start" but i am completly clueless.

i know how to write an app in React.JS and i came here to understand what is type script since the task had those types in it and i am trying to understand it.
the task has files like :
-.gitignore
-build.sh
-docker-compose.yml
-Dockerfile
-package.json
-package-lock.json
-README.md
-tsconfig.json
-yarn.lock

And 2 folders :
-public
-src


if you could tell me how to at least get this project to run localy i would be really happy cause it feels like my last chance to get a job since i shifted career.

[rakarez]

Hi @maksim, what terminal you are using ?? that can show history/recommendation when your typing.

[DIEZ]

Hi Maxim, could you provide us with more complex content? There are many many videos like this one (more or less), but there is almost nothing to deep dive in react + typescript. I hope you'll hear me. Ну ты понял короч))

[Lambdaphile]

The first time I tried using TS I got problems with some libraries and I had to either ignore the error with stuff or know TS so well so that I can type the types my self :/ ...I ended up taking TS out. May try again in future.

[pranilkharche]

Cannot find name 'div'. please HEEELP