React TypeScript Tutorial - 5 - Advanced Props
ฝัง
- เผยแพร่เมื่อ 24 ก.ค. 2024
- 📘 Courses - learn.codevolution.dev/
⚡️ Checkout Taskade! www.taskade.com/
💖 Support UPI - support.codevolution.dev/
💖 Support PayPal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
Advanced Prop Types with React and TypeScript
![[ไฮไลต์] ฟุตบอลชาย ฝรั่งเศส vs อเมริกา รอบแบ่งกลุ่ม | โอลิมปิก 2024](http://i.ytimg.com/vi/oZ9aSS0NEEg/mqdefault.jpg)
Use coupon code CodevolutionTH-cam for 100% off lifetime discount to your subscription at www.taskade.com/billing
I know it is pretty late but the coupon code is giving 10% off not 100%. I wish it gave 100% :)
Superb Video, No rubbish, No clickbait just Pure Content, Thanks for Teaching me React and Nextjs.
React with Typescript
Perfect Course ! your voice so clear and very easy to understand. thanks
VIshwas you are incredible!!!!. You present the content really well and planned in each step.
These videos are so good! I'm a Python/Django developer who's moving to NextJS. And I found TypeScript to be one of the ideal ways to write code in NextJS. These videos are helping me learn just enough in-depth fundamentals of TypeScript.
Waiting for the next video on React TypeScript Tutorial. These were amazing well explained and thanks for doing this.
Your guide is very easy to understand. Thanks so much
Don't stop bro! Nowadays is a mainstream! Thanks
Thank you very much. It's Very Useful to develop React Apps.
Your voice is just amazing
Great videos in the typescript playlist!! Thanks for your excellent teaching!
BTW, in 2022, children is no longer required as an explicit prop:
// The best way to properly type children is to use built-in type FC.
import { FC } from 'react';
// If the only prop you expect is children:
const MyComponent: FC = (props) => {}; // props includes only children property
// If you want to include more props than just children:
interface MyProps {
name: string;
}
const MyComponent: FC = (props) => {}; // props includes children and name properties
awesome, I learned a lot. thanks!
Thank you for the great videos!
This is great content...Thank you
Superb videos 🙏🏼
So good, thanks a lot!
its true when they said typescript is superior, fascinating!
Great tutorial but for the status type I would recommend using an enum instead of union of string literals.
Amazing
Awesome!
That is awesome...
Thanks
amazing
i would recommend to have other payment methods for support. i.e. upi, patron. many people don't use paypal.
Awesome
Best video
Great series so far this is really teaching me a lot! One question though, how does the syntax work when assigning a default value of 0 to messageCount at 8:37.
You set messageCount = 0 but when a prop is passed it takes the prop instead and you don't need to do props.messageCount anymore but just messageCount instead? I've never seen this before.
this is object destructuring
GoodJob!
Kinldy don't forget to make tutorial on Redux toolkit with typescript
Thanks for this tutorial. One questin for the status example, why not use enum?
Literals are easier
Doubt: When I do this and the output in the ui is coming directly from the Heading component and not from Heading component being passed to Parent component as prop (---{props.children}---which is heading component in this case)
UNDER PARENT COMPONENT
Is it supposed to be that way or am I missing something in the concept?
I like how the strategy is to write normal react code and then do smth to fix the errros
Quick question, in app.tsx, how does Status only have this: but heading and oscar have ...... and ....?
For the children props part. Why does it work when you are not using the text as a prop of for example, instead of
Children prop is meant for passing data within the component tag , mainly to render other components as children
is that example of children component props still available? Got some errors
nvm it was my bad, thanks a lot for clear tutorials
greetings from PL
1. declaring possible props i.e specific strings @ 3:00
2. children: React.ReactNode for passing components as children @ 6:23
3. optional prop @ 8:11 ex. messageCount?: number
Overview: @9:18
const { message=0} = props not working. for an optional value its giving unefined in a TS online compiler
And what about JSX.Element instead of ReactNode:
interface OscarProps {
children: JSX.Element
}
export const Oscar: React.FC = (props) => {
return {props.children}
};
Can someone explain why 'children' was used in the HeadingProps? Seemed to come out of nowhere
passing children as a prop is a thing in react....
You can also use propsWithChildren generic type for children
🙏👍
instead of this
type Childerns = {
children: React.ReactNode;
};
even if i do
type Childerns = {
children: any;
};
why it is still working both are same ??
(7:04 vedio length)
❣❣❣💯💯💯
Great course so far. Not sure if others are running into issues when updating the Greet component to default to zero upon updating to make it optional? Not sure if it is the best way, but got around it with doing this:
const Greet = (props:GreetProps) => {
let mCount
if( props.msgCount === undefined)
{
mCount = 0;
}
/* The rest of the code... */
When trying to de-structure as the current video shows:
const {msgCount=0} = props.msgCount;
I'm getting an error something like:
Property 'msgCount' does not exist on type 'number | undefined'.
FYI .
"typescript": "^4.1.2",
I'm assuming my typescript is the latest i just installed today fresh, didn't specify a version so i'm assuming i'm on the latest? Also to be complete did try:
npm install -g typescript@latest
no change :(
Just in case others run into the same issue. You can use my old fashion tried and and true way :)
I had the same issue, but realised I forgot to change my JSX and remove "props." from the ${props.messageCount}. When I made the change I now correctly get 0 unread messages instead of undefined unread messages. It's in the video, I just missed it. So the line should now read:
? `Welcome ${props.name}! You have ${messageCount} unread messages`
Status not working... why?
if the error is: Variable is used before being assigned (TypeScript)
then use:
let message: string = "";
You sound like freeze youtuber, am I wrong ?
😋😋
Sir are you Indian ?? If yes please make vedio in hindi 🙏🙏🙏
Learn English