Hi , I just wanted to thank you for this tutorial. It's straight to the point, managed to be short, but still covers all the practical things you have to know to get started. Perfect intro.
For mac and linux users please enter this in your terminal first (if you haven't installed typescript before): npm install -g typescript then do: npx create-react-app ts-react --typescript
This was great thanks! It would be awesome if you could teach us build a full stack application with Node, React, GraphQL and TypeScript. This stack starts being very common out there and so far I could not find one good tutorial on it! Fingers crossed you'll read this :)
Okay, so if it does not install typescript > yarn create react-app my-app --typescript Then check node version to use the appropriate one > nvm use v8.10.0 It also worth a try to install globally creat-react-app 2.1 (newest version is 3.1 today) > npm install -g create-react-app@2.1 or install typescript globally > npm install -g typescript
@@Classsed Thanks. I believe node version was the root cause. It just made me crazy that CRA did not give me an alert "hey, I do not install ts version, because something is missing". It just did not do it. Again and again.
that's strange, I wouldnt think the problem would be from node, I personally use npm and have CRA installed on my machine, but hey as long as the error is gone now that's good :D
I will be releasing a React video soon using hooks, but without Typescript (because TS isnt for all projects), but if you want to add TS to it, it's not much work actually, I might even create the same project in TS and post a github repo to it.
At 25:07, you had previously initialized error as false. However, on page load you hadn't searched for any Pokemon. Therefore your conditional render that checks for error saw error false and displayed the Pokemon details, of which there were none because the page just loaded and the search hadn't been done yet.
@@Classsed ruclips.net/video/m_u6P5k0vP0/видео.html this one. I love long videos like this, and btw your channel has at least 3 big projects) cant wait to learn them all
Good video, a terribly messy code but it can be improved, also you can make better use of typescript and its syntactic sugar to improve all that disorder
Sir thanks a lot for teach such a great React with Typescript but for me im getting problem in ./src/components/PokemonSearch.tsx Line 54:9: 'resultMarkup' is assigned a value but never used @typescript-eslint/no-unused-vars how can i solve this problem???
Still didn't get the point, if wanted to use TS then y not simply use Angular? I mean first learn React then implement TS, it's confusing! Then what was the point for developing React in the first place?
React is easier to learn than Angular, has more packages to work with, more community support, Angular is an opiniated framework thats made for bigger teams and projects imo
@@Classsed I see! Damn you explained the concept in just 4 lines while I had been looking for days on internet, still didn’t get the satisfactory answer! Kudos man
I have a question. Could PropTypes do the same like interfaces in Typescript? I also could define props there, which kind of value this props will have and many more. I am not familar with Typescript but with PropTypes.
You're right, PropTypes do ensure that the values they recieve are of the types specified, however, PropTypes doesnt raise the error in compile time but only at run time. but they do the same thing when it comes to type checking.
I was able use the fetch and return values to the screen, but only when hard code the identifier (e.g. pikachu) .. its value is always null for me (as in const inputValue = this.pokemonRef.current.value; is always null). Did anyone else have this issue? This is my input element
Excellent tutorial friend, I really appreciate. Straight to the point, very clarifying. There were just two things I would like to give as feedback for you to improve, as you clearly have a lot of potential: - I would split chunks of coding and "seeing results" inside the app. Doing all the code in just "one sitting" can make it difficult for some viewers to remember all the changes you're making at once. In my opinion, it's friendlier to progressively see the results of code. - The second thing gets solved with the first tip, I would recommend you to save your code more often, to let the prettier beautify your code more often and make it more pleasant for us to read. I hope you make good use of my feedback, keep going with the good work bro! (:
- Yeah, I should show results more often, it's just that sometimes I wanna write more code, running it then explain, as going back and forth inflates the length of video and that might scare some people of. - and yeah, I should save and format more often, this is a bit alien to be because when I'm following a tutorial I'm almost not even look at the video, just listening and typing haha. Thank you for the feedback :)
What if this command does not create .tsconfig and .tsx files but only the .js files like in a normal react install? > yarn create react-app my-app --typescript I have tried reinstalling several times with yarn and npx, refreshed create-react-app and npm, but it still does not provide typescript > yarn global list yarn global v1.15.2 info "create-react-app@3.0.1" has binaries: - create-react-app ✨ Done in 0.18s. > npm list -g --depth=0 /Users/username/.nvm/versions/node/v8.9.4/lib ├── create-react-app@3.0.1 └── npm@6.9.0
You should not disable the null check!! Why bother introducing types and a linter in your system to then disable an actual valuable rule! You should check if `this.pokemonRef` is not null, then check if `this.pokemonRef.current` is not null and only then grab the value. Basic JavaScript stuff, you don't need typescript for this. This is why people reach out to Typescript, they don't do the basic null and undefined checks. And interfaces are not a pro by itself. You don't want interfaces for the sake of interface. You want type checking and interface are a mean to get there.
Not really, I should disable rules that slow me down for not much to be gained, I know I'm attaching this ref to an input in my markup so the value of it in runtime will never be null sowhy add an extra if statement. Plus there are a lot of other linter rules that are disabled by default because they just enforce an opinionated way of writing code, if I were to enable all of them it would slow me down drastically for not much gained. you could use them in bigger projects, when collaborating with other developers or when writing 3rd pty libs. And I did mention that interfaces are a pro because of type checking, intellisense and predictability so I dont know what you're on about there.
@@Classsed You turned it off for the whole project. So no null checks at all. The risk that you accedentially run into a null or undefined issue is probably higher than passing in number where a string was expected. I agree with you about slowing down for not much to be gained, hence I don't use typescript, but I wouldn't suppress linting rules like these tbh. I worked in C# for over 10 years and moved to JavaScript to get rid of all the boiler plate code and high noise to signal ratio of types and interfaces. JavaScript was liberating. Never had the need to introduce types. Just defensive programming and simple functions with arguments that are intuitive. The most common errors I ran into the last 10 years with JavaScript are, again, null and undefined errors.
This video should be marked as class components only, or to be truly fair it should be marked as deprecated. I appreciate that won't help your viewing numbers but if someone comes across this video thinking they're going to learn how to use TS with React nowadays, they're going to be misled.
Not only is your code garbage but this shows more of making a useless app with TS and not focusing on the TS part of things. Poorly done tutorial and would not recommend.
true, the app useless haha, it's just like a playground for showing off TS features, what TS things that you think are missing in this tutorial, it's been so long, I might remake this in a better way :D
So far this is the best react + typescript tutorial I have found on youtube. make more buddy.
Hi , I just wanted to thank you for this tutorial. It's straight to the point, managed to be short, but still covers all the practical things you have to know to get started. Perfect intro.
Thanks a lot, I'm glad to hear that :D
Excellent react-typescript tutorials.... we need series of this kind of lecture!!
Just what i was looking for, perfect intro to TypeScript. Thank you.
Anytime ;)
Awesome video dude, gonna write this up now to practice. Really useful stuff and excellent explanations. Keep it up, theme was cool btw!
This video is clearly underrated. Best Typescript React tutorial. Keep it up !!
For mac and linux users please enter this in your terminal first (if you haven't installed typescript before):
npm install -g typescript
then do:
npx create-react-app ts-react --typescript
Just wanna say your coding techniques are "ON POINT"!
Very straightforward and easy to learn. Hope to learn more from your videos.
This was great thanks! It would be awesome if you could teach us build a full stack application with Node, React, GraphQL and TypeScript. This stack starts being very common out there and so far I could not find one good tutorial on it! Fingers crossed you'll read this :)
I will soon do PERN stack tutorial with TypeScript so look forward to that! and I read all comments ;)
please make a playlist for ts+react+styling to show how to make basic app and teach us use interfaces effectively
really need a series over react typescript. appreciated.
Thank you for spreading the knowledge.
Practical and to the point. Thank you for not wasting too much time on exposition.
Thanks :D
nice tutorial! I actually built the app along with this tutorial but I made it using React Hooks so it was nice exercise for that as well
I have only watched this video so far, but you have already earned a new subscriber!
Keep making great Videos!
Thanks, I will ;)
the trick in the end of video was really helpful, thank you !
Well done!
:D
Wonderful introduction! Only thing I found confusing is you not mentioning what "generics" a.k.a triangle brackets are.
I came here to brush up my knowledge on TypeScript and ended up learning about refs
This channel is damn good but underrated! Thanks you're awesome mate!
aww, thanks, it's just cuz I stopped for a while, it's gonna grow now that I'm back ;)
Nice video, quick and to the point.
well really confusing if you new in ts, but still good, and it will be great if u do ts + react hooks video
thank you for this short usefull video
Okay, so if it does not install typescript
> yarn create react-app my-app --typescript
Then check node version to use the appropriate one
> nvm use v8.10.0
It also worth a try to install globally creat-react-app 2.1 (newest version is 3.1 today)
> npm install -g create-react-app@2.1
or install typescript globally
> npm install -g typescript
you dont need typescript globally, just use CRA version 3
@@Classsed Thanks. I believe node version was the root cause. It just made me crazy that CRA did not give me an alert "hey, I do not install ts version, because something is missing". It just did not do it. Again and again.
that's strange, I wouldnt think the problem would be from node, I personally use npm and have CRA installed on my machine, but hey as long as the error is gone now that's good :D
Great video. Please do more with React and TypeScript, possibly with Hooks.
I will be releasing a React video soon using hooks, but without Typescript (because TS isnt for all projects), but if you want to add TS to it, it's not much work actually, I might even create the same project in TS and post a github repo to it.
Thank you for creating this video. It helped me alot to get started using TS
you're welcome Elvis, I'm glad you made use of it :D
when you do Component
what is behind the scene with the angle brackets ?
That's one of the more advanced typescript features. You can look it up here www.typescriptlang.org/docs/handbook/generics.html
You nailed it.
Awesome job mate.... how much difference would it make if we use axios instead of fetch? In terms of adding types etc,.
Thanks in advance (:
no difference at all, I'd only add types to the returned value of the request (I'd do that with fetch too) I'm remaking this tutorial soon :)
Awesome tutorial....one thing... if you add .toLowerCase () on this.pokemonRef.current.value you can search pokemons with capital letter.
That's right, good idea :D
Hello,
Sorry but i'm a newbe ;D
Why would you create a DOM element ref?
Best Tutorial.
Hi Ahmed. What do you prefer and why? react JS or JSX?
what a nice tut, keep it bro
我之前用Vue,但是现在,我用React, 因为当我了解完React的时候,我发现React真的比Vue好太多了,现在我最爱的就是React,尤其是React+Typescript!I love React + Typescript!
At 25:07, you had previously initialized error as false. However, on page load you hadn't searched for any Pokemon. Therefore your conditional render that checks for error saw error false and displayed the Pokemon details, of which there were none because the page just loaded and the search hadn't been done yet.
Exactly, this is why I needed to check for both "not loading" (!loading) and that the pokemon is null
@@Classsed Gotcha, sorry I got distracted towards the end and missed adding the extra check. Thanks for the video.
Just came from codeacademy tutorial. Man Ty! When i get a job i return a debt!
you're welcome bro :) which codeacademy tutorial you're talking about BTW? :D
@@Classsed ruclips.net/video/m_u6P5k0vP0/видео.html this one. I love long videos like this, and btw your channel has at least 3 big projects) cant wait to learn them all
awesome! have fun :D
you can write html inside {}? i didn't know that. thank you
You deserve more subscribers
Good video, a terribly messy code but it can be improved, also you can make better use of typescript and its syntactic sugar to improve all that disorder
Great job explaining mate
Cheers Shaan :D
hi what is the vscode plugin you use on formating typescript of save?
do you have part 2 ?
Sir thanks a lot for teach such a great React with Typescript but for me im getting problem in
./src/components/PokemonSearch.tsx
Line 54:9: 'resultMarkup' is assigned a value but never used @typescript-eslint/no-unused-vars
how can i solve this problem???
Nice. Thanks for this.
Still didn't get the point, if wanted to use TS then y not simply use Angular? I mean first learn React then implement TS, it's confusing! Then what was the point for developing React in the first place?
React is easier to learn than Angular, has more packages to work with, more community support, Angular is an opiniated framework thats made for bigger teams and projects imo
@@Classsed I see! Damn you explained the concept in just 4 lines while I had been looking for days on internet, still didn’t get the satisfactory answer! Kudos man
IM gonna go catch'em all now.
Class components have been deprecated in React quite a while ago. You'd need to shift tutorial to React.FC
they haven't been deprecated, just not used anymore, you can write everything that you see here in functional components instead
And I'll remake this video soon anyway :D
I got no hot reloading after save my work. What should I do?
You can use
npx create-react-app app-name-goes here --typescript
@@fatherfunny4627 its because too large workspace. And I just set max_user_watches
Cool! Thanks a lot!
I have a question.
Could PropTypes do the same like interfaces in Typescript?
I also could define props there, which kind of value this props will have and many more.
I am not familar with Typescript but with PropTypes.
You're right, PropTypes do ensure that the values they recieve are of the types specified, however, PropTypes doesnt raise the error in compile time but only at run time. but they do the same thing when it comes to type checking.
I was able use the fetch and return values to the screen, but only when hard code the identifier (e.g. pikachu) .. its value is always null for me (as in const inputValue = this.pokemonRef.current.value; is always null). Did anyone else have this issue? This is my input element
Excellent tutorial friend, I really appreciate. Straight to the point, very clarifying.
There were just two things I would like to give as feedback for you to improve, as you clearly have a lot of potential:
- I would split chunks of coding and "seeing results" inside the app. Doing all the code in just "one sitting" can make it difficult for some viewers to remember all the changes you're making at once. In my opinion, it's friendlier to progressively see the results of code.
- The second thing gets solved with the first tip, I would recommend you to save your code more often, to let the prettier beautify your code more often and make it more pleasant for us to read.
I hope you make good use of my feedback, keep going with the good work bro! (:
- Yeah, I should show results more often, it's just that sometimes I wanna write more code, running it then explain, as going back and forth inflates the length of video and that might scare some people of.
- and yeah, I should save and format more often, this is a bit alien to be because when I'm following a tutorial I'm almost not even look at the video, just listening and typing haha.
Thank you for the feedback :)
PIKA! PIKA!
What if this command does not create .tsconfig and .tsx files but only the .js files like in a normal react install?
> yarn create react-app my-app --typescript
I have tried reinstalling several times with yarn and npx, refreshed create-react-app and npm, but it still does not provide typescript
> yarn global list
yarn global v1.15.2
info "create-react-app@3.0.1" has binaries:
- create-react-app
✨ Done in 0.18s.
> npm list -g --depth=0
/Users/username/.nvm/versions/node/v8.9.4/lib
├── create-react-app@3.0.1
└── npm@6.9.0
create-react-app myapp --typescript
It will create a lot settings, including tsconfig, but all hidden.
Getting error just after creating the Project and try tun NPM Start . Error : error Failed at the ts-react@0.1.0 build script.
mkdir project
cd project
npx create-react-app ./ --typescript
I have no idea how you get errors from a prebuilt CRA package. Let me know if it helped.
Which VS Code Theme are you using?
I guess Monokai!
A custom theme, based on Monokai Dark Soda
What are your extensions?
Go to my VS Code extensions video, they are all listed there
Maybe We not is must use TS, because more developer and company is not solow ,
it's not a must, but it fits a lot of projects and scenarios.
great job!
Thanks :D
3:12 Thanks for saying it is annoying to get into. Because, it is. I am kind of forced to learn this.
You should not disable the null check!! Why bother introducing types and a linter in your system to then disable an actual valuable rule! You should check if `this.pokemonRef` is not null, then check if `this.pokemonRef.current` is not null and only then grab the value. Basic JavaScript stuff, you don't need typescript for this. This is why people reach out to Typescript, they don't do the basic null and undefined checks.
And interfaces are not a pro by itself. You don't want interfaces for the sake of interface. You want type checking and interface are a mean to get there.
Not really, I should disable rules that slow me down for not much to be gained, I know I'm attaching this ref to an input in my markup so the value of it in runtime will never be null sowhy add an extra if statement.
Plus there are a lot of other linter rules that are disabled by default because they just enforce an opinionated way of writing code, if I were to enable all of them it would slow me down drastically for not much gained. you could use them in bigger projects, when collaborating with other developers or when writing 3rd pty libs.
And I did mention that interfaces are a pro because of type checking, intellisense and predictability so I dont know what you're on about there.
@@Classsed You turned it off for the whole project. So no null checks at all. The risk that you accedentially run into a null or undefined issue is probably higher than passing in number where a string was expected. I agree with you about slowing down for not much to be gained, hence I don't use typescript, but I wouldn't suppress linting rules like these tbh.
I worked in C# for over 10 years and moved to JavaScript to get rid of all the boiler plate code and high noise to signal ratio of types and interfaces. JavaScript was liberating. Never had the need to introduce types. Just defensive programming and simple functions with arguments that are intuitive. The most common errors I ran into the last 10 years with JavaScript are, again, null and undefined errors.
This video should be marked as class components only, or to be truly fair it should be marked as deprecated. I appreciate that won't help your viewing numbers but if someone comes across this video thinking they're going to learn how to use TS with React nowadays, they're going to be misled.
I love React ! I love Typescript ! and its more better than vue
Not only is your code garbage but this shows more of making a useless app with TS and not focusing on the TS part of things. Poorly done tutorial and would not recommend.
true, the app useless haha, it's just like a playground for showing off TS features, what TS things that you think are missing in this tutorial, it's been so long, I might remake this in a better way :D
No classes, please. We need hooks.
I'm remaking this video soon, all my new series and vids are using hooks
@@Classsed Classsed --> Hooked ;)
nice one 👍😂
I have an CORS error, what should i do ?