Lots of comments here saying that this is redundant because we can just use TypeScript. I've not learned much TypeScript yet, so I'll probably change my mind once I know more, but, I feel like switching to TypeScript would require me to down-tools on everything else I'm working on, at least for a time. This looks like a good way to start introducing Types to some of my components without making the full switch.
Why don't these videos have a zillion likes? The clear and perfectly understandable way you explain these concepts is just awesome. Even when some of these are about concepts I already know and use I still watch them because there's always some nice new detail to learn about them. Excellent work! thanks
Not to be rude or anything but there is no way I use something like this while there is Typescript. Even if I had a todo application with a single component, I would still use Typescript.
TS static checks your types. If you handle TS well enough, your app will probably be free of this type bugs. That being said, it does only static type checking. If you make some ajax call, you won't be able to static check it's response, since it will be available only during runtime. PropTypes, in the other hand, can help us with those runtime type checks (kinda limited when we talk about functions parameters, but still great).
Runtime type checks even in that case really aren't necessary though. If you're making an ajax call to an external resource, there's probably some documentation telling you what the return type will be. With TS you can model the return type in your code and cast the returned data to the type after doing some basic preliminary checks. If you're making an ajax call to an internal resource, then there should be a common module with request and response types. Again, cast the response to the response type from the common module, and you'll get compiler errors if the type changes.
This was exactly the kind of resource I was looking for as an introduction, and that there was an article linked as well for reference? May this man never step on a lego for the rest of his days.
And the best part is, ES7, react extension on VSCode autocomplete all the props while declaring a component. So, this is the best practice to create maintainable and sharable components.
@@dimitridoroshko yes, nobody is forcing me to work anywhere. If I don't like it I can quit tomorrow and find somewhere else to work. Or I can apply myself and start a business. Nothing is keeping me from doing these things except myself.
There is also a custom validation functionality where the user can predefine a custom validation function and throw an error in it if the prop fails a validation.
Nice overview of PropTypes, but I don't understand why you say Typescript has high overhead. Typescript does compile time checking and should have no run time overhead. PropTypes does a run time check with overhead if it's libraries. Isn't PropTypes an easy hack to get partial checks?
Great video as always but proptypes is just stupid. The proper solution here is to just use typescript, which is what JavaScript should have been in the first place. If you only want to enforce types on your react components' props, you can do that with typescript.
Yea, this the most important thing about TS. I also found that working with packages is way easier with typescript, because the autocomplete works better than without it.
I don't understand when you would use this. Typescript seems to do the job. Also, do you only write proptypes when debugging? And then you erase them when you have found your bug? So it's like a super console.log()? It is not explained clearly.
proptypes don't run in production mode even if you don't remove them. Also proptypes is only for legacy code. You can't migrate an entire application from js to typescript just for these validations.
Hello :) i am interested in buying the learn react today course. can somebody tell me if the course is still up to date in 2021? love the explanations of kyle, but i also want to learn "modern" concepts because the course came out in 2019 I think
And is there a way to propagate these errors in compile time or notify about them instead of logging them into the console, where nobody notices them usually?
I wish JavaScript had this kind run time type checking ability. Type Checking at runtime can also make the language faster as less the code would be much more predictable
@@TheBswan Yeah, that's the problem. Why would I check it manually. I want type checking being handle by the JSVM/interpreter like other typed languages. I want that kind of runtime safety
@@krtirtho why would you rather have runtime type checking that compile time type checking? Don't you wish you knew your code would work before you ship it? I've heard the argument about runtime type checking for API calls and things like that, but the solution there is to just model the return type in your code, or share common types between the API implementation and the API consumer. And runtime type checking would make your code slower, because the interpreter can no longer just assume that the types work out - it has to check them for itself. Typically the more you can accomplish at compile time, the faster your code will be
Can someone tell me what would happen in runtime due to wrong type pass as prop type? Typescript doesn’t warn as It check only at compile time. This wrong type will throw exception in UI. What if we proptype placed?
why everybody it's working for them, i'm using typescript in my project and i'm beginner to it, when i define propTypes of my component and place them as a parameters to the component for example: Binding element 'description' implicitly has an 'any' type.ts(7031)
Lots of comments here saying that this is redundant because we can just use TypeScript.
I've not learned much TypeScript yet, so I'll probably change my mind once I know more, but, I feel like switching to TypeScript would require me to down-tools on everything else I'm working on, at least for a time. This looks like a good way to start introducing Types to some of my components without making the full switch.
Why don't these videos have a zillion likes? The clear and perfectly understandable way you explain these concepts is just awesome. Even when some of these are about concepts I already know and use I still watch them because there's always some nice new detail to learn about them. Excellent work! thanks
these videos don't have a zillion likes because there are only 7 billions of us.
@@beatboss9275 hahahaha 😂😂😂
i absolutely love typescript
Not to be rude or anything but there is no way I use something like this while there is Typescript. Even if I had a todo application with a single component, I would still use Typescript.
The isRequired property can still be useful
I totally agree with u, and I don't think typescript is overhead even for small projects
@@sheldon6520 also solvable with typescript by adding question mark to the type you make it optional
Same
Kyle's videos just keep getting better and better. Thanks for your efforts mate.
i’d rather use typescript :)
TS static checks your types. If you handle TS well enough, your app will probably be free of this type bugs.
That being said, it does only static type checking. If you make some ajax call, you won't be able to static check it's response, since it will be available only during runtime.
PropTypes, in the other hand, can help us with those runtime type checks (kinda limited when we talk about functions parameters, but still great).
Runtime type checks even in that case really aren't necessary though. If you're making an ajax call to an external resource, there's probably some documentation telling you what the return type will be. With TS you can model the return type in your code and cast the returned data to the type after doing some basic preliminary checks. If you're making an ajax call to an internal resource, then there should be a common module with request and response types. Again, cast the response to the response type from the common module, and you'll get compiler errors if the type changes.
@@harleyspeedthrust4013 You're right. Good point!
@@juliohintze595 Thank you!
There are schema validation for run time if you need it
Great video, thank you for all your effort! I think you should start making react typescript tutorials as that is what is becoming the norm these days
This was exactly the kind of resource I was looking for as an introduction, and that there was an article linked as well for reference? May this man never step on a lego for the rest of his days.
And the best part is, ES7, react extension on VSCode autocomplete all the props while declaring a component. So, this is the best practice to create maintainable and sharable components.
link of extension bro?
@@adivmt Ya Sounds useful if you could please share :)
Its called ES7
@@13Daniel37 thanks
it's nice that propTypes are similar to yup validation type options.
Make a typescript tutorial (with REACT will be helpful) 💗
Kyle your my motivation
Uhhh nice one but I would still rather go with typescript
You may never know what they want on the job, man)
@@dimitridoroshko If a company is using this backwards way of doing types instead of typescript then I don't want to work there
@@harleyspeedthrust4013 but do you have a lot of choice?
@@dimitridoroshko yes, nobody is forcing me to work anywhere. If I don't like it I can quit tomorrow and find somewhere else to work. Or I can apply myself and start a business. Nothing is keeping me from doing these things except myself.
Gracias por todo genio, siempre que tengo confusion en algo vengo directamente a tu canal y problema resuelto!
Thank you, Kyle. Great explnation.
Hy Kyle, please make an video about deployment and stuffs about server, SSL, etc
man you are amazing, thank you so much for your work
Love you dude. You make my life saver content. Tnx a lot
Your videos are always short and spot on 🔥
Great video as usual. Thank you, brother.
Just incredible. Keep up with the good work
Watched your video after longtime and felt very nice.
thanks
you really made it simple now
TypeScript is easy and great. All hail TypeScript!
Hats off , Well explained
Simply Brilliant kyle 👌👌👌 !!!
This was really usefull! Thank you so much!
as always, your videos are awesome!
Thanks!
I love this guy
There is also a custom validation functionality where the user can predefine a custom validation function and throw an error in it if the prop fails a validation.
Is it built in? Can you share the link for the documentation?
@@rizqyhbb I think he just means writing a function yourself to validate the type
As always . Fun to watch .
that intro guitar music is played by kyle🙌🙌
Proptypes are very very useful. Great video!
But what are your views on TypeScript?
amazing tutorial , thanks
TS ftw
nice video sir, thanks
wow.. really useful video, thanks
Very useful, thx !!
what extension do you use in VS code so that the prop types option shows up when you type proptypes?
Nice man 🙌🏼
Nice overview of PropTypes, but I don't understand why you say Typescript has high overhead. Typescript does compile time checking and should have no run time overhead. PropTypes does a run time check with overhead if it's libraries. Isn't PropTypes an easy hack to get partial checks?
I think he was just touching on the overhead of writing typescript in the first place.
Love from India ❤️ where are you from Kyle?
Great video as always but proptypes is just stupid. The proper solution here is to just use typescript, which is what JavaScript should have been in the first place. If you only want to enforce types on your react components' props, you can do that with typescript.
may be typescript is big ecosystem, but you need only check some records from db or responses from api, etc
As a noob I ask, is this why Typescript?
Never used it yet but I like the idea of strict typing
This works only in react. typescript is a totally different language
typescript is language with , tons of great features proptypes is one of the similar one
@@aravindmuthu5748 yes I've got that. I'm merely speaking on why TS vs vanilla js, react etc
Yea, this the most important thing about TS. I also found that working with packages is way easier with typescript, because the autocomplete works better than without it.
@@opinetree code gets more robust and its like , security checkpoint everywhere in ts to guard code
Thanks.
I use TypeScript 😂😂
Awesome video thanks alot
I don't understand when you would use this. Typescript seems to do the job. Also, do you only write proptypes when debugging? And then you erase them when you have found your bug? So it's like a super console.log()?
It is not explained clearly.
No you always keep them in the component. This is to make sure that you always use this component the way it is supposed to be used.
proptypes don't run in production mode even if you don't remove them. Also proptypes is only for legacy code. You can't migrate an entire application from js to typescript just for these validations.
@@chethanprabhu4475 i'm sorry, I didn't understand this. Isn't PropTypes something from Vue? Could you explain again?
increible maestro!
kyle is the best
Thanks so much!!! :)
Thanks Kyle. Super cools
I was like " whatt , wireless bug ?"
😆
Thanks
Hello :)
i am interested in buying the learn react today course. can somebody tell me if the course is still up to date in 2021? love the explanations of kyle, but i also want to learn "modern" concepts because the course came out in 2019 I think
And is there a way to propagate these errors in compile time or notify about them instead of logging them into the console, where nobody notices them usually?
Typescript is your answer
Legendary
Kyle what if we use TS instead ??
You motive me
I wish JavaScript had this kind run time type checking ability. Type Checking at runtime can also make the language faster as less the code would be much more predictable
So you wish JavaScript was TypeScript?
@@TheBswan Typescript can only check types statically or ahead of time. Not in runtime or just in time. Its a basic difference
If you need to typecheck at run time you can write code for that lol. If typeof x === null return 'i goofed'
@@TheBswan Yeah, that's the problem. Why would I check it manually. I want type checking being handle by the JSVM/interpreter like other typed languages. I want that kind of runtime safety
@@krtirtho why would you rather have runtime type checking that compile time type checking? Don't you wish you knew your code would work before you ship it? I've heard the argument about runtime type checking for API calls and things like that, but the solution there is to just model the return type in your code, or share common types between the API implementation and the API consumer. And runtime type checking would make your code slower, because the interpreter can no longer just assume that the types work out - it has to check them for itself. Typically the more you can accomplish at compile time, the faster your code will be
Can someone tell me what would happen in runtime due to wrong type pass as prop type?
Typescript doesn’t warn as It check only at compile time. This wrong type will throw exception in UI. What if we proptype placed?
nice!
How about checking an instance of a class?
Why not using typescript!
Hey can you do a tutorial on react-vis? Or react data visualization?
I learned propsTypes a few months ago and I immediately threw it in the trash
What is the best option for object with dynamic properties?
Just use typescript
why everybody it's working for them, i'm using typescript in my project and i'm beginner to it, when i define propTypes of my component and place them as a parameters to the component for example:
Binding element 'description' implicitly has an 'any' type.ts(7031)
2 years later, typescript became the standard in business.
please make a tutorial for testing react with jest
God or what ?😅
How to show the paragraph again? Please help.
Page title
i am a paragraph.iam a long paragraph
on/off
let para = document.getElementById("para");
para.style.background = 'red';
para.style.color = 'white';
let btn = document.querySelector('#btn');
btn.style.color = 'blue';
btn.style.background = 'lightGreen';
btn.addEventListener('click', function run(){
para.style.display = 'none';
});
man your hair 🤩
A question here, im new to react, is it a common practice to assign a proptypes to every props that is ever needed to passed into a component?
No Need of it, but it can be used for strict way of code. So no mistakes can occur.
I would like to start learning how to program, but i dont know where to find good stuff to study and learn...
You can import prop-types from React now, so installing it separately is unnecessary.
Plot twist: Sally has Rapid Aging Disorder
Benjamin Buttons cousin
react again, thanks kyle
You definitely should use TypeScript instead
Or just use Typescript?
For this use case, typescript seems to be the better choice.
Naaaah... just use TypeScript. It has way better tooling, especially in VSCode
Or use typescript 😂🤗 (dont take it bad)
What is the difference between propTypes and PropTypes?
once I get a job, I will find you and pay you !
I use Yup and they are almost same.
This "bug" at the outset is exactly why combine 2 languages (HTML/JS) like this is so problematic.
Angular dev?
{2021-10-05}
Winner is Typescript
Poor man's typescript 😂
hello, first
publish date is my birthday
dude calls typescript overhead but still uses a react library to solve react's type problem that works like typescript😆😆
Coming from typescript this makes me feel dirty
Who is Sally 😃???
FEWER bugs not less bugs
You touch my hreat