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!
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
@ 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;
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!
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. 😀
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? )
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?🙄
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, 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!
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.
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?
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.
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
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).
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
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?
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.
@@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?
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.
Please keep these React Typescript tutorials coming! Really appreciate it :)
Its so refreshing to have someone who uses typescript by default. I realise JS still gets more views, but your typescript videos are amazing.
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!
This man deserves a gold play button
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...
Loved the video. Thanks Jack!
You would make a fantastic teacher.
Thank you so so much sir, as a junior front end developer, your videos help me a lot, thank you!
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
Looking positively windswept today, Jack.
Thank you so much!! I have an interview soon and this helped me refresh my knowledge of the foundationals.
Awesome!
on 53:59 ->
type ListComponent = ({
items,
render,
}: {
items: ListItem[];
render: (item: ListItem) => ReactNode;
}) => JSX.Element;
^^^^^^^^^^^^^^
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.
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!
Thanks Jack !
Thanks Jack!!! 🫶
Thanks for your tutorials.
I like how you explain the concept by implement it first, thanks this is so good
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.
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
Just what I needed for my job interview. Thank you so so much !!! You are awsome !!! (and you got a timestamps :)). Great !
Oh man, thanks a million. Keep up making react typescript videos
I do appreciate you
Wow everything makes so much more sense now. Thanks so much for this video 👍🏻
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 killed it jack
You put out incredible content. I hope you get all the recognition in TH-cam this content deserves. Thanks for all
Thank you!
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 😊
So cool, mostly liked props as an interface.
Learning lots of new stuff here, thanks!
@ 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.
You are an excellent teacher!
Great video Jack, very useful.. Keep sharing videos with TS, remember TS + Expressjs with validators, it will be awesome!
I love it man how smoothly you explained everything. Thank you I really appreciate it.
I *Glad* found this channel & thankyou so much for providing quality content for free looking forward for more:-)
Fantastic content!!!
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!
I love these tutorials, keep em up Im subbed for life
Thanks so much for the awesome lesson!
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.
Absolutely fantastic! Tnx!❤❤
Thank you Jack :)
You're a g for this one. Thank you!
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.
thanks to you I'm understanding typscript, thanks!
That's awesome! Thank you!
awesome tutorial ! subscribed.
This is so helpful. This is great!
Nice tutorial
Watched on 1.2x but gots loads of info❤
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?🙄
very useful tutorial , thanks
Great lecture!!!!!!!
Thank you so much!!!!
Thank you for the explanation! Could you do one accessibility content using hooks?
Very helpful guide, Really appreciate it :)
Thank you a lot. It really helped me!
helps so much, thank you!
Great, thank you very much
simply a crack, very funny and clear
Keep up with the GREAT job =)
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!
Interested too. After typescript I ll jump to jest
Did this ever happen? I need to get my testing game up asap.
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!
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.
Just in time~~~~
Fantastic..
This is pure happiness of being a web developer. 🤣
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?
Fantastic video, would you do one where you show and manage a project setup using vite + react-typescript + testing? Right from the start
Thanks jack
Thanks for the video, I would really appreciate if you share your VS Code setting
gist.github.com/jherr/cb8770e2ae92a7646d22c126be896a72
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
what font is that? I really like how the arrow functions are displayed
Operator Mono
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.
Please make a video typescript with the react testing library.
fantastic
Coooooooooool
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
Awesome
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.
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
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
What is the name of that JSON to TS converter extension??
marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts
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).
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
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?
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.
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
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.
take a shot every time he says cool
Cool!
I can't find that VS extension for converting clipboard JSON to typescript interface, could you give us extension name and author?
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?
Custom hook should be in camelCase « useStateComponent »
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.
somehow ReactNode does not work for me. I have to use react.Element of JSX.element as return type of ListComponent.
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.
Didn't know Bill Gates itself use React.
I thought the thumbnail was someone Photoshopping a Zuckerberg-Gates hybrid given React and TS...