As someone who is learning TypeScript with React myself, this tutorial was the first I've found that gave great, helpful examples of states and how different components can interact with them. Thank you so much for this!
This was really great. I converted some context providers using useReducer to TypeScript a while back, and set a bunch of types to any because I didn't want to figure it out. This made it very easy! Thanks!
Downside of const is if you are using react chrome extension and check the component tree you will see Anonymous component instead of component name. To fix that you have to set the displayName property of that constant. 😀
Thank you so fucking much for this no BS breakdown I've been working with this stuff for months and all the silly things finally clicked for me. So much love
@@jherr Oh God no! Could never compare you to that fiend my friend. Anything Simpsons is a compliment. But seriously your voices are similar....In my ears
Custom hook was great. Would love too see the beers in a table and doing column filtering via the custom hook. Great base overview of the hooks, plus typed!
@ 54:10 getting this error while hovering over List in the return at the bottom: 'List' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element. Type 'undefined' is not assignable to type 'Element | null'. I updated type ListComponent to return a JSX.Element instead of a ReactNode , not sure if thats the correct solution or a quick fix to get it working again: export type ListComponent = ({ items, render, }: { items: ListItem[]; render: (item: ListItem) => ReactNode; }) => JSX.Element;
Please keep doing content, also consider more Software engineering content, like the one for the design patterns, maybe explanation about SOLID, some real world examples in coding applying refactoring, and stuff like that would be helpful.
I want one on Djikstra's algorithm and DFS/BFS since I seem to get those problems a lot. I'm getting better at them but I am not yet able to code it out in 15 minutes or less.
Your videos are very well made. The overall quality as well as the way that you explain it make it easy to understand. Love it! Keep 'em coming :D (What VS-Code Theme/Plugins are you using? )
Thanks for this. I thought may be you should have explained a bit more on useRef, useMemo, useCallback. There are tons of videos on that anyways. But I loved the way you used interfaces and generics. That’s pretty cool. Custom hooks are also explained cleanly.
Absolutely fantastic! Thank you!!! ... I’ve asked this before but I got to keep asking…do you have any (unit) testing videos coming? I honestly absolutely hate testing… But I know it’s a necessary evil!
Hi Jack! Is there any way or make sense to do something like export type DiscriminatedAction = { [K in keyof typeof someActions]: { type: K; payload: SomeState[K extends keyof SomeState ? K : any]; // trying to define this in order to get the actions from an object and my State shape interface }; }; export const someActions = { SET_DATA: "SET_DATA", SET_SOMETHING: "SET_SOMETHING"
} as const; dunno if is better just type the discriminated union with the types of: (E.G) typeof SET_DATA
Hi jack, great video!.. one question - where you define the action types for usereducer (26 mins) you have a semi colon between the type and payload properties, why is that not a comma? Thanks!
Anyone explain what's going on in the useEffect with closure in more detail, I understand closure, but I didn't follow what was going on with this timer example?
1. In the useContext example, when is the initialState's first, last ever visible? i.e we only see jane smith to start off and never jack herrington. 2. Is there a way to see the values being available at each step, like turning on a debugger somewhere?
When you hit 'Change context' the names change to `Josie` and `Wales`. As for #2, you might want to check the React devtools, they might show you state and context.
Thank you so much for your lecturing React with ts; My question is at 6:37 you were using an array with +1; what I did I increment the length with ++ instead of 1 and the array started with zero instead with 1 and when I used any number like arr.length + 10 // output when you click is gonna start [10] but the increment only by one when you click one more time? why is that?🙄
I can’t be on the live on Saturday. But if you could spend some more time explaining the ListComponent type at 54:05 (line 10) that would be super helpful. I don’t really get what I’m looking at there… It looks like a generically typed arrow function?
Why declare the component (function FooComponent) and then export it separately (export default FooComponent)? You could do both on the same line (export default function FooComponent).
Goo question. React-redux is a fine state manager and is good if you have complex client state that you want to track for a customer during a session. That being said there are a lot of lighter weight alternatives to Redux out there nowadays (i.e. Zustand, Valtio, Jotai, etc.). The decision to use or not use Typescript is orthogonal to that. Typescript is a language extension that supports adding and enforcing types, and IMHO, is a good choice for large team projects.
I'm stopped on the 1st 3 minutes of the video and I'm wondering why you say there's not much use for useCallback. I've been using it for all my callbacks to keep sub-components from re-rendering. Thanks.
@@jherr I see, thanks! Btw, your videos are very helpful! I noticed that createStore has depreciated in favor of configureStore, could you do a CRUD video on that with Redux Saga and Typescrypt?
How does the `v` get the initial value of 1 ? (on the useEffect example) edit: ah watched it again, so the default typing of valSet (i.e. setter function of the useState pair) allows a function, where the initial argument is the paired-up current value of the state (right?)
@@jherr thank you! really great content, I've already sent several of your videos to a few folks. Personally I would selfishly love to see some AWS appsync/graphql/amplify/serverless content mixed in. Keep up the great work!
@@jherr oh wow that would be great. I've been using Pulumi a lot lately, and this video here really got me thinking: watch?v=8XFjqzX9ZK4 they setup containers deploying infrastructure which are triggered via API gateway to lambda container functions. If you've not checked out their Automation API that might be something neat to cover also if you're thinking to cover any deployment tools
This is great stuff. Jack you are fantastic. It’ll be nice if you can consider an enterprise case like authentication (say, Azure AD integration), invoke a NodeJS service and process results etc. This way, we get to see real complexity in action. May be you are just getting started and I’m too curious ;) Keep up the great work
Please keep these React Typescript tutorials coming! Really appreciate it :)
Definitely best typescript channel on youtube
As someone who is learning TypeScript with React myself, this tutorial was the first I've found that gave great, helpful examples of states and how different components can interact with them. Thank you so much for this!
Its so refreshing to have someone who uses typescript by default. I realise JS still gets more views, but your typescript videos are amazing.
Thank you so so much sir, as a junior front end developer, your videos help me a lot, thank you!
Loved the video. Thanks Jack!
Didn’t know how to use an existing plain Vanilla JS object as schema to TS. I’ve learned something new today. You’re the best.
Did learn more about react and ts with this video than and entire (paid) udemy course .... thanks
Thank you so much!! I have an interview soon and this helped me refresh my knowledge of the foundationals.
This was really great. I converted some context providers using useReducer to TypeScript a while back, and set a bunch of types to any because I didn't want to figure it out. This made it very easy! Thanks!
Happy to help!
Keep joing on Jack, Please do an end to end E-commerce or Dashboard Project on React, Redux with Typescript...
It will be so much helpful to us...
You would make a fantastic teacher.
This man deserves a gold play button
Just what I needed for my job interview. Thank you so so much !!! You are awsome !!! (and you got a timestamps :)). Great !
This is great stuff. Surprisingly not a lot of content on the integration between TS and React out there; this is easily the best I've seen.
I like how you explain the concept by implement it first, thanks this is so good
Looking positively windswept today, Jack.
Hey Jack I'm doing my transtion to TS with React and I want to say Thanks! This is being really helpful for me during this process.
Wow everything makes so much more sense now. Thanks so much for this video 👍🏻
Oh man, thanks a million. Keep up making react typescript videos
I do appreciate you
Downside of const is if you are using react chrome extension and check the component tree you will see Anonymous component instead of component name. To fix that you have to set the displayName property of that constant. 😀
Thanks for this. Good point.
Learning lots of new stuff here, thanks!
Thank you so fucking much for this no BS breakdown I've been working with this stuff for months and all the silly things finally clicked for me. So much love
Thanks for your tutorials.
You are an excellent teacher!
This is brilliant - your style is really easy to consume and it's great to watch a tutorial by someone who isn't 12 years old.
You put out incredible content. I hope you get all the recognition in RUclips this content deserves. Thanks for all
Thank you!
I *Glad* found this channel & thankyou so much for providing quality content for free looking forward for more:-)
Just realised Jack sounds like Principal Skinner and Smithers from The Simpsons. Close your eyes and listen. This is a great video by the way 👍🏾
Hahaha. :P I think I'll take that comparison to being compared to Trump, which happened on one of my Traversy videos.
@@jherr Oh God no! Could never compare you to that fiend my friend. Anything Simpsons is a compliment. But seriously your voices are similar....In my ears
@@francis_n no worries at all. I actually do a half decent professor frink. 😁
@@jherr Now that I have got to hear 😊
thanks to you I'm understanding typscript, thanks!
That's awesome! Thank you!
Thanks Jack!!! 🫶
you killed it jack
Fantastic content!!!
So cool, mostly liked props as an interface.
I love these tutorials, keep em up Im subbed for life
Absolutely fantastic! Tnx!❤❤
Thanks Jack !
awesome tutorial ! subscribed.
This is so helpful. This is great!
I love it man how smoothly you explained everything. Thank you I really appreciate it.
Great video Jack, very useful.. Keep sharing videos with TS, remember TS + Expressjs with validators, it will be awesome!
Awesome!
on 53:59 ->
type ListComponent = ({
items,
render,
}: {
items: ListItem[];
render: (item: ListItem) => ReactNode;
}) => JSX.Element;
^^^^^^^^^^^^^^
Thanks so much for the awesome lesson!
You're a g for this one. Thank you!
Custom hook was great. Would love too see the beers in a table and doing column filtering via the custom hook. Great base overview of the hooks, plus typed!
Very helpful guide, Really appreciate it :)
Thank you Jack :)
@ 54:10 getting this error while hovering over List in the return at the bottom:
'List' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element. Type 'undefined' is not assignable to type 'Element | null'.
I updated type ListComponent to return a JSX.Element instead of a ReactNode , not sure if thats the correct solution or a quick fix to get it working again:
export type ListComponent = ({
items,
render,
}: {
items: ListItem[];
render: (item: ListItem) => ReactNode;
}) => JSX.Element;
Hmmm, can you put your code up in a gist and DM me @jherr on Twitter.
Keep up with the GREAT job =)
very useful tutorial , thanks
Thank you for the explanation! Could you do one accessibility content using hooks?
Thank you a lot. It really helped me!
Please keep doing content, also consider more Software engineering content, like the one for the design patterns, maybe explanation about SOLID, some real world examples in coding applying refactoring, and stuff like that would be helpful.
I want one on Djikstra's algorithm and DFS/BFS since I seem to get those problems a lot. I'm getting better at them but I am not yet able to code it out in 15 minutes or less.
Nice tutorial
Great lecture!!!!!!!
helps so much, thank you!
simply a crack, very funny and clear
Your videos are very well made. The overall quality as well as the way that you explain it make it easy to understand.
Love it! Keep 'em coming :D
(What VS-Code Theme/Plugins are you using? )
Apollo Midnight and Cascadia Code.
Thank you so much!!!!
Watched on 1.2x but gots loads of info❤
Thanks for this. I thought may be you should have explained a bit more on useRef, useMemo, useCallback. There are tons of videos on that anyways. But I loved the way you used interfaces and generics. That’s pretty cool. Custom hooks are also explained cleanly.
Great, thank you very much
Thanks for the video, I would really appreciate if you share your VS Code setting
gist.github.com/jherr/cb8770e2ae92a7646d22c126be896a72
Absolutely fantastic! Thank you!!! ... I’ve asked this before but I got to keep asking…do you have any (unit) testing videos coming? I honestly absolutely hate testing… But I know it’s a necessary evil!
Interested too. After typescript I ll jump to jest
Did this ever happen? I need to get my testing game up asap.
Just in time~~~~
This is pure happiness of being a web developer. 🤣
Fantastic..
Fantastic video, would you do one where you show and manage a project setup using vite + react-typescript + testing? Right from the start
fantastic
Please make a video typescript with the react testing library.
Hi Jack!
Is there any way or make sense to do something like
export type DiscriminatedAction = {
[K in keyof typeof someActions]: {
type: K;
payload: SomeState[K extends keyof SomeState ? K : any]; // trying to define this in order to get the actions from an object and my State shape interface
};
};
export const someActions = {
SET_DATA: "SET_DATA",
SET_SOMETHING: "SET_SOMETHING"
} as const;
dunno if is better just type the discriminated union with the types of: (E.G) typeof SET_DATA
Hi jack, great video!.. one question - where you define the action types for usereducer (26 mins) you have a semi colon between the type and payload properties, why is that not a comma? Thanks!
Thanks jack
what font is that? I really like how the arrow functions are displayed
Operator Mono
Awesome
Anyone explain what's going on in the useEffect with closure in more detail, I understand closure, but I didn't follow what was going on with this timer example?
1. In the useContext example, when is the initialState's first, last ever visible? i.e we only see jane smith to start off and never jack herrington.
2. Is there a way to see the values being available at each step, like turning on a debugger somewhere?
When you hit 'Change context' the names change to `Josie` and `Wales`. As for #2, you might want to check the React devtools, they might show you state and context.
I can't find that VS extension for converting clipboard JSON to typescript interface, could you give us extension name and author?
Thank you so much for your lecturing React with ts; My question is at 6:37 you were using an array with +1; what I did I increment the length with ++ instead of 1 and the array started with zero instead with 1 and when I used any number like arr.length + 10 // output when you click is gonna start [10] but the increment only by one when you click one more time? why is that?🙄
Coooooooooool
Hi, good course. it would be great if you used react-snippets because people aren't interested in you just typing out react-components.
Fair point. I should make more use of those.
I can’t be on the live on Saturday. But if you could spend some more time explaining the ListComponent type at 54:05 (line 10) that would be super helpful. I don’t really get what I’m looking at there… It looks like a generically typed arrow function?
Custom hook should be in camelCase « useStateComponent »
What is the name of that JSON to TS converter extension??
marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts
somehow ReactNode does not work for me. I have to use react.Element of JSX.element as return type of ListComponent.
Great video ;)
If you don't mind me asking, can you please tell me what is your theme of editor?
Font is Monolisa. Theme is probably Apollo Midnight on this one, or maybe Night Wolf [dark blue] which is what I've switched to recently.
Fantastic! What's the theme used on VS Code?
Night Wolf [black] and JETBrains Mono
i love this tutorial but if u have an state with useState({a:0, b:0, c:0}).. What type is? or ?
It's: useState({a: 0, b: 0});
@@jherr Amazing sir. thanks.
Why declare the component (function FooComponent) and then export it separately (export default FooComponent)? You could do both on the same line (export default function FooComponent).
Apology newbie question, i know its not in Next.js video..so when using Next.js, is it relevant to use React-Redux/Typescript?
Goo question. React-redux is a fine state manager and is good if you have complex client state that you want to track for a customer during a session. That being said there are a lot of lighter weight alternatives to Redux out there nowadays (i.e. Zustand, Valtio, Jotai, etc.).
The decision to use or not use Typescript is orthogonal to that. Typescript is a language extension that supports adding and enforcing types, and IMHO, is a good choice for large team projects.
I'm stopped on the 1st 3 minutes of the video and I'm wondering why you say there's not much use for useCallback. I've been using it for all my callbacks to keep sub-components from re-rendering. Thanks.
how did you download the json from terminal like that? I've never seen "git: (master)" before
To download the JSON I usually use CURL. I'm guessing the `git: (master)` is in my custom prompt?
@@jherr I see, thanks! Btw, your videos are very helpful! I noticed that createStore has depreciated in favor of configureStore, could you do a CRUD video on that with Redux Saga and Typescrypt?
Didn't know Bill Gates itself use React.
How does the `v` get the initial value of 1 ? (on the useEffect example)
edit: ah watched it again, so the default typing of valSet (i.e. setter function of the useState pair) allows a function, where the initial argument is the paired-up current value of the state (right?)
Yep!
@@jherr thank you! really great content, I've already sent several of your videos to a few folks. Personally I would selfishly love to see some AWS appsync/graphql/amplify/serverless content mixed in. Keep up the great work!
@@slikk66 Not selfish at all. Definitely thinking about doing a lot of GraphQL stuff somewhat soon. And maybe a deploy using amplify or ECS.
@@jherr oh wow that would be great. I've been using Pulumi a lot lately, and this video here really got me thinking: watch?v=8XFjqzX9ZK4 they setup containers deploying infrastructure which are triggered via API gateway to lambda container functions. If you've not checked out their Automation API that might be something neat to cover also if you're thinking to cover any deployment tools
Thank u for such a nice tutorial . Do u have typescript React real world project?
I'm not sure what you are asking for. Could you be more specific? I've written a lot of applications for this channel, many in TypeScript.
@@jherr Like Ecommerce projects With typeScript
Why typeof object instead of passing the object ? Do you have a tutorial about that ?
Oh I see. It’s to avoid to create an interface or type that looks exactly like the initial state .
Exactly, that way you don't have to define it twice.
Cool stuff ! Thanks
I thought the thumbnail was someone Photoshopping a Zuckerberg-Gates hybrid given React and TS...
This is great stuff. Jack you are fantastic. It’ll be nice if you can consider an enterprise case like authentication (say, Azure AD integration), invoke a NodeJS service and process results etc. This way, we get to see real complexity in action. May be you are just getting started and I’m too curious ;) Keep up the great work
take a shot every time he says cool
Cool!
You should do this tutorial again if possible please.
You want the same content again? What would you like to hear more about?
@@jherr I should’ve put more context in what I was asking. Sorry. Maybe go a bit further in depth is what I meant please if possible.