Mastering Typescript for React Components - Live!

wow 14 people watching that's awesome hey how you doing so good to be here such a great weekend ahead hopefully let you know let me know in the comments if you've got great weekend plans um my plan for the weekend is to let's see hold on let me bring it up i'm gonna bring i'm gonna make the lamborghini uh cyan the lego kit i'm excited about this this is a big big build this is like 3 500 parts or something like that it's craziness so hopefully that should be back in there where the saturn 5 spot is come next week i have to figure out a way because it's going to be huge how to mount it and stuff and how to light it it's going to be really neat um hey oh and if you want to play with that uh the saturn 5 back there just jump onto the discord server over in lightbot and then you can do uh color and then just give it you know whatever color you want you can say i want purple on one side and gold on the other and uh and there you go get get whatever color you want on there so you have fun with it and just uh yeah cool so let's get into the fun stuff of doing some react and some typescript so i'm going to go again got this whole cheat sheet thing i'll pop it in there in the uh comments you can follow along but basically this week i'm going to be looking at just the components and then i'm going to make a video sunday and monday and tuesday and all that around uh the hooks and then one and then after that do uh probably redux and valshio and and a couple of those just to go and play with you know different state managers because that pretty much is i would say the sum total of it but um yeah really trying to make the the one around hooks really deep talk about custom hooks and all that so anyway cool so there's a couple of different ways that we can do this i'm going to use the create react app way to do this uh let me go over into a temporary folder do yarn create and then react out now let's call this i don't know ts live demo sounds like fun so tell me what you guys got going on for the weekend while we wait for yarn to do all of its yarny things you know gonna i mean not that we have all that much cool stuff to do on the weekends nowadays because of pandemic but you know i've got my lamborghini cyan certainly i guess there is some yash is going to do some type scripting on the weekend that's cool purple nice all right will you post the code in the github sure why not yeah do it let's do it sure yeah flatline flatlines huge on the discord server good to have you here typescript all weekend so hey by the way so this is my my new my new hotness that i'm thinking about um i was actually coding like seven days a week there for a little bit because of work and also with uh with the youtube chat youtube channel and i was finding i was definitely edging up on on burnout um so i've now made my my idea that at least one day out of every seven i'm going to just no code you know i'll i may get on twitter or maybe hang out in the discord server a little bit you know but not super tons do some reading do some lego that kind of stuff you know or go woodwork whatever but you know not coding seven days a week and i i'm i'm sure y'all you all have your own schedules that's that sort of thing but that's that's my idea on how to kind of keep the burnout beast at bay uh all right so it looks like we have our app let's oh i forgot to template typescript duh okay hold on actually well what hey let's just do that then let's go change this over to tsx and we'll change that's all i really need but i'll change this one to tsx as well and this is really all that template was going to do for us anyway so uh let's i think it's going to have us add typescript probably as well as the types for react and the types i i've got a my my garage is a mess man there's a lot more cleaning left to do [Laughter] oh my god my garage is such a mess it's terrible i'm really bad about like putting away tools after i after i use them so you know it kind of piles up after a little bit uh we detected typescript created ts config.json sounds good and come on oh there you go okay so what did i do to make a non-typescript type uh app typescript i just changed the file names that i wanted to be typescript to ts or tsx if you use jsx in your app then in your file which would be this you know basically html inside of your component then it needs to be tsx uh javascript's a little bit more permissive about that i this is fine the reason that index that needs the tsx is because of these these tags in here uh otherwise yeah pretty simple stuff so hopefully i won't need the console or the sidebar so we can just focus on the code today and we'll go over here oh wait hold on i should make like make it readable so let me go and uh just change the css a little bit um and where's my index.css there we go margin auto they call me opto because i like to get black dude uh max with 800 px now 8 000 and let's see um oh let's put a little padding on the top just move it down one rim and then let's see uh also oh big big font size just make it you know big so you can see it okay so and we'll put in there you know h1 hello and get rid of our logo there we go we're rocking and rolling although it's centered whatever uh i just read a big book on tufty's latest book and he's actually all about font center or text centering i was just that was pretty cool so many years we were angry at people who would make fully centered web pages like what that looks terrible on myspace you know yeah well everything looked terrible in my space all right so i let's go make a an h1 component then we'll call it heading and i'm gonna do function call it heading it's going to return an h1 with a title okay and so how do we specify that title well normally so you would have you know props like that but we don't ever do i mean that would be props.title and you could do that if you want but nobody really does that everybody destructures so we're destructuring and then because we are typescript we want to know what that is so that's a title which is a string and it's that easy right so oh hold on let's actually use it and let's get rid of this get rid of that again we'll focus on the code heading and heading heading not that's not the right okay there we go and what's it saying that's bad well it's telling us that title is missing which is great that's exactly what we want and uh we're adding on children so we're specifying something we shouldn't which is children and we are not giving it what it wants which is title so let's do title equals the number two that's not a string so yeah it's true so let's go and just make it a string and now typescript is happy and well let's make it a little different so let's do some something different just we know that our code is executing difference there you go very cool so that's really it but of course there's a ton of variants around that and there is some controversy there's certainly some controversy on reddit and there's some controversy in the comments about whether it's better to do this or to do let's just get rid of this for a second this heading equal is a react dot fc which is a a shorthand for functional component and then you give it the props you say title is a string and then you do the usual you know h1 title thing and that's fine the only problem is that uh now you'd have to react as an element is not assignable what hold on that should work is it react i need that that's for sure from react okay there you go uh what's the problem here hmm this is i'm not doing this lately because of this so let's go take a look at what it says and that'll also give me a clue on like what i'm doing wrong all right uh oh no that's right const heading okay heading up equals is this is it does it like this all right hold up what's the syntactical difference then fc okay should be fine okay hold up and then duplicate identifier app let's try this as heading okay that looks would i mess up so what you get from doing live live coding anyway so the the cheat sheet mentions that this is essentially deprecated right so you know there's a whole bunch of reasoning around that i my personal take on this is that what this is doing is this is implicitly putting in a children and i you know you may or may not want to handle children and so this variant is far more strict right this is saying hey if i put something in here for children elements then it's going to ting bing it's going to say nope you don't this one doesn't support children and that's i would say more important so it's a much more strict way of saying it the arrow function was missing okay fair enough do you have a radio const missing the air function arrow narrow function arrow function okay let me go take a look hold on hold on all right let me see uh arrow function here oh was it oh it was you added right it is the arrow function yes okay yeah so it's title you you got me there it is that's what it was okay so yeah and and the point being that the uh the guide says that it's it's deprecated and i'm i'm i'm down with that i'm i'm pretty cool with that but i don't think it's the end of the world if you see it it's fine okay so what are some interesting variants on this um one variant is uh what if i want to do um i want to put in a react element right i want to have title be able to be for example uh you know div something like that right that okay so that an element is not assignable to type string for sure so what i like to do in that case and let's call this um heading with element just so i can you know here let's get okay we'll do all right hold up uh something texty and something elementy i'll make this a heading with an element okay so in that case you could use a react element as an option and that brings that in or what i tend to do is i use react node as the version because that allows for a bunch of different options if we go into the definition of that you can see that a react node can be all kinds of things it can be react child fragment portal boolean no undefined and what's this actually let's see if i can even do with plain text does it like that too yeah it's okay with that too so let's go take a look and yeah cool so this pretty much takes really anything now that you want to put in there as an element right and this is something you kind of i kind of see in a couple of different frameworks i mean i do i definitely also see something that looks uh in in ui frameworks like like this where you have like uh you know carousel and then you've got finish that off and then you have like a carousel dot slide or something like that you know i've seen that too um and then that would be like the other version of that would be to have like items or slides i guess and then that would be an array of those react nodes right react no whatever that's basically that so it's just two different ways of doing it and when i was looking at the aws ui toolkit they were definitely using this style of saying oh well okay you can put a note in there and that's fine and then you get to go and format that node however you want or you can do text whatever it's very it's very flexible okay so even more flexible is would be a callback function so i'm going to make some space i'm going to call this like a dialog and the header is going to be of the dialogue and the oh there's also me there's going to be children and there'll be a header and the children is going to be a react node easy-peasy and let's drop that in there and we'll make this a div and then the header is going to be a an optional function that returns a react node not a not header a react node just like that so if there is a header then it's going to be a function in this case and that's going to give you back your a react node that we want to put in there so let's go and implement that all right so what's a good way to do that i want to first see if i have a header if i do then we'll go make another div and what do we want to put in that well we'll put in the output of the header function so header and then question mark dot because we don't know if we have it and then we'll execute it and so yeah that's optional chaining when it comes to uh calling a function is you just use it looks a little weird totally get it it does look weird for sure um but yeah it works so basically what this is saying is if there's a header then call it otherwise this is going to resolve to null so let's try that out go down here to dialog put in a new section make a dialog and this would be the content and then let's take a look let's see how that actually goes that should just say this would be the content centered of course and then if we want a header all we got to do is just put in a header and now we get a hinting that this is an expression right so jsx attributes might well okay that's not giving us great hinting about that but basically you want a function and then that function will return this is the header and it's we've got a span or something because you might have so many divs the hallmark of a react app unlimited nested divs all right uh there you go so there we go so this is the header and in fact actually let's let's be more clear about this let's make this inside of like a a strong or something like that does anybody use strong anymore or is it just class names with with uh font weight bold there you go so now we've got our header and it's wrapped in a strong so you know really nice way to be able to define that api and this is exactly what i was seeing in that aws uh ui toolkit was this kind of stuff so you'd have you'd have a container object or container class like a dialog that was going to do lots of layout and then it would lay out several sections there'd be a content section there'd be a tool section navigation section and all those were just optional uh either functions or react nodes oh you could also do and this is something i didn't cover in the video you could try different variants as well how do i do do i want to try that because if i was to do this react node or uh why didn't that work function must be parenthesized when using a union type oh that's interesting or that right but now i've got to figure out if i'm actually making if if it's an actual function or not it's it is doable in a typo function all that sort of thing but you have to do it at runtime so i'll leave that for another video for another day all righty then so we can let's uh let's do this also because now we've kind of great you know now we're working good but let's go and say that we also want to be able to support children functions and you often see this in animation libraries where you've got an animation frame it's going you say i want to go from x 50 to x 500 and then it passes to and then it it handles the like absolute positioning or whatever and then you give it a a callback meth a callback function that returns the content of whatever you want inside of that animation frame so the way you do that again is just pretty simple just give it a function it returns a react node as opposed to just a react note and then we're going to call that children and then in here yeah so we're going to go and make the contents of this a function which returns a string in this case because we know that that's an okay react node and we'll call that uh this is it'll be the content from a function there you go let's give that a try yeah nice okay so super friendly you know type scripting around uh all kinds of different ways to specify the component interface that you want to specify for your component consumers and then the other really cool thing that i saw that the aws ui toolkit did was to do generics and so we'll we'll jump into that so let's just say that and i you don't see this very often but uh let's say i want to give i want to have a list component and i want to have a set of items and items is going to be a set an array of items and i wanted to just like put them in a ul or something like that how do i handle network calls with typescript okay let me get through the generic stuff and then jazz be sure to like you know get get back on me and we'll do network calls with uh with typescript uh all right so function we're gonna call that list and it's gonna say i want items and i want a render function so i'm going to the list is going to handle the ul and all that and then it's going to go and run render on every item in that list so let's start off with our ul and then we're gonna do items dot map and we're gonna that's gonna give us an item and we're just gonna do render on the item except that we need it inside of an li right so let's go do that and ally hi jonathan good to see you all right what you describe about animation frameworks is a way called render props uh yeah i mean different different ones have different names for it um oh render yeah yeah yeah yeah you're right this as a generic more generic term for that idea yes is render props and then we need an index which is up here so how much how much is typescript hating on us right now so do i say am i even syntactically okay i don't know let's go take a look it doesn't even look like i'm syntactically okay at this point um okay uh oh right i know what the problem is it's this there we go all right okay so now it's like oh but you don't need types so yeah i don't have any types typescript so let's go fix that so what is the type of items well it's going to be an array but an array of what so we'll use a generic for that we'll say that it's going to be a list item and you could use a lot of people use t but then a lot of folks are like no no t really doesn't make a whole lot of sense you know it's just like it's like i when you do an iterator um where do you use the uh aws ui toolkit jack uh yeah it was a vic flatlines right i did a video two weeks ago where basically i went off to a i read in uh a story about how they did um aws released this undocumented toolkit and i was like wow that's an interesting idea can i go and like actually work a toolkit with just the typescript definitions and then i made a video about it so it's actually pretty cool all right so now we've got this thing called list item and we want to be able to render that so that's going to be a function that takes a list item and then returns again one of those react nodes like that all right now what's your problem okay i think i probably need one more parenthesis ah perfect look at that wow well you add one parenthesis and then the whole thing just likes itself okay so we got a list it takes a list item now what happens is let's go back over here so let's go and actually use this and i'll show you kind of walk you through how this is going to work so list item our list and we'll give it items and this one we'll do let's see one two three four five okay and then we go over here into render and we give it this so check that out it's actually figured out so here's what typescript has done for us which honestly is really really really really cool it's actually gone and figured out that hey this i this array has just numbers in it and therefore it's a it's a number array like that oops hold on maybe i can type this here okay there you go so it's an array of numbers and so that number then then list item in that case becomes number right and so it fills in because this was a number list list item becomes number and then automatically slots it in here for the render which is just so cool so so cool like if i went in and added in like a you know foo bar like that then check this out and actually like here hold on let me get it to hint again oh look at that okay so it's a react text wow i'm not actually sure how it got there but that's pretty cool um i guess it basically said well everything in here is either i guess it's going to coerce it to a text i don't know honestly i would have expected that to be string or number that's what i would have expected but i i guess it went with react text okay so let's go do our numbers and we'll also say that this ah there you go so and then we'll do it just put in a number there you go number is and then number okay uh oh item that would help there you go all right type inference for the win exactly so good there you go oh my god that's ugly ugh okay maybe centering text isn't all that good of an idea but anyway um super cool though right uh you can go i mean that's just great and some more sort of thing happens let's go you know let's go over here to foo bar and baz all right oh that's interesting all right so let's take a look that's interesting okay so here check this out so yeah does it work with this yeah oh that's cool so this is something i didn't didn't notice until now so [Music] here's what's happening so it's actually so this guy is untyped right and but this guy is typed so it actually preferred the render type number and said no no this array is wrong so that's actually kind of cool you can actually you know it's type inference but it's but it's kind of going back the other way let me catch up on my uh why not any or it is it never inferences to any uh i don't think it's ever gonna inference all the way to any i think it's just gonna keep on adding types until it gets everything do you have any uh a vs code extension for typescript or code completion no i don't think so let's go check um i don't think i have anything typescript specific uh oh i've got typestrip hero additional toolings for typescript so maybe that's it code outline uh let's see typestrip importer move to ts okay maybe i have a few things for typescript my bad um can i just filter this down to everything that i've got imported uh installed there you go installed typescript oh yeah okay huh i guess i do so yeah huh oh well sorry uh let me go and well you can freeze frame this later and go and install all these if you want my bad i always thought that i was just kind of running standard vs code but i don't know maybe not all right uh what's the name of my vs code theme it's um it's apollo midnight and the font is a cascadia code bastion saw a lot of your videos love your content do and react for a long time and your typescript really got me going for you great thank you uh okay so that's kind of all the variance i can think of i there was one in terms of react and how to define components i did get a question i think it was yeah i think it was on youtube about how to do and let's let's go fix this because it's clearly angry at me okay so and we'll make it that way again i'm going to do this uh lin i've been trying to use the const because the guy's like why why are using functions all over the place this is old school everybody's doing you know const funk equals blah blah blah and i'm like yeah okay so and he's like but i can't figure out how to do it in in time script and so let me try let me let's um let's create a gosh okay hold on i i think you can do this as a type so if i say type uh what i guess list component type or something list component yeah that works equals and then list item like that okay and if i were to say now okay hold on let's say const my no my my const list or const list let's just call it that and now i can give it that type and i can give it uh items oops items and render is that going to work okay what are you oh okay and i need my dash greater than oh this is i think this is gonna work guys uh is it gonna work why isn't why is it not gonna work okay i think i don't need this and [Music] oh okay and it's going to give me a react node actually is it i think it's react element is what it's looking for i was asking about him like network responses already told me to wait a minute i will get there for sure i just want to go and there's one thing that i want to make sure that i got to and maybe it's going to fail let me go check here so bindingless item implicitly has the any type uh yeah okay yeah i don't know i okay there you go yeah you can even define your component as a rack fc that's true all right so i'll have to do some more research on how to get const working with uh generics but that was that was a problem okay so now i want to get to jazz's question about how to do uh network fetching so let's go and get ourselves some data how about that how about them apples all right so everything looks good the moment let's go and bring ourselves up a new console and i'm gonna go grab my usual pokemon data file it's a json file and i'm gonna go and drop it into the public folder there you go let's take a look over at pokemon json and see what's up so here we go here's all of our our pokemon that we want and we're gonna you know what jazz we will use our list item thing that we just created to go and list out i guess a bunch of these pokemon so we're gonna go make a fetch we're gonna go get the data and then we're gonna go and uh put it into a list sound good so what i need to do first is have a place to hold it so we're gonna go and create some state so i'm gonna say this is a list of pokemon react.use state and it's gonna start off as an empty array all right because i know this is we're going to have some issues with this but we're going to fix them all right so uh here's what we're going to do we're going to do react react.use effect and we're going to drop that in there and we're going to say that we only want to get ever called once that's why we put this empty array in there because we want to say that we never we only want to get called once component did load all right fetch pokemon.json because that's we now have that on the server and then we're going to do then we're going to take a response we're going to get the response oops response.json and now we've got our data and we're going to set the pokemon list because with that data so this should work right okay so we'll go down here and we'll do a list in fact actually we'll just do pokemon in there pokemon but what's the item gonna be hmm so we haven't done any typing on this right because you know and we need now we need it because we need something in here we need like pokemon it's not a number it's a pokemon so the first fun thing we can do is we can go over here and i'm going to copy just the first item here and i do have a special in extension and call installed it's called uh let's go back over here i think it's like convert oh no that's a little that's a little a little open-ended um nope okay well i'll just use it and we'll see what see what's called uh uh typescript let's just look for that one okay so convert json clipboard to typescript in interfaces let's do it so what that's done is i because i had that first item copied into uh the paste buffer and then i ran that it actually went and built out json interfaces for me except that they're a little wrong so i'm going to go and fix those attack defense special attack special defense speed whatever there we go so it's it's it's a good little extension that does some handy work for you because it does all this this interface work for you but it's also you know it's not uh it has its bugs anyway we'll call this a pokemon and that saved me all of that typing of basically for trying to figure out what all these are and typing them out uh it just went and figured it out okay so id is a number name is a name blah blah blah if you want to make this even more concise i can go just go and do just change that out like like that and this is probably the way i would write it if i were writing it by hand something like that and there we go so now we've got an interface for pokemon that matches what we actually have in the file so the first thing we want to do is we want to say that this pokemon is a that's all pokemon and that's cool right because we know we're getting that back from that service so now what's this complaint about well that's that complaint is telling us that we cannot set a type of pokemon to a never [Laughter] so what happened here well this is telling us that react use state in this case is expecting that the only thing they're ever going to put in that state is an empty array because that's what we initialized it with so it doesn't understand that we actually want either an empty array or an array full of pokemon so the way that you do that is you use that generic syntax and you say i want an array of pokemon in there in which case this is fine because it's just an empty array of pokemon so let's go back down here to the items and now we can say oops hold on ah right okay now we can say that items give me a pokemon and then we'll put in there the uh and this is great this is great so this is really fun so with your pokemon or item and we actually get hinting so let's say we want the the name and we want it in japanese and let's save that and there you go there are all the japanese names of all the pokemon in that file if i want i could just go and say english just to make sure that i i don't read japanese so there you go there yeah there's all the things that we've come to know and love from pokemon squirtle wartrol pidgey pidgiato etc so what are the jazz let's go through this one more time so what are the things that you need to do to make typescript and fetching work together you need the definition of the data that you're getting back from your interface so in this case that's that pokemon file like that let me let me get rid of the the console so we can see the whole file so in this case we know we're getting array of pokemon back from that data so we need a pokemon and then we need to put it somewhere so we need to use that use state but in this case you always pretty much are always going to need to do this because you know it's asynchronous right you don't have the data until you you have the data so you need to specify in your use state what it's going to be now another thing that people often do is they do something like this they'll say pokemon or null and they'll start off with no like that and that's okay the only problem is that right down here you're probably going to want to put it you would have to put in a check for that like this and that's fine so and that kind of this null would also be an indicator to you if you've loaded or not right and then in your use effect which is where you're going to load that data you go and do the fetch like you normally would do the then with the rest.json that you normally would you could do this with async weight if you want really potato potato on that one and then when you get the data then that's when you coerce it into your target type and then from there on i think you're pretty much golden so there you go uh hope that was helpful got a thumbs up all right any let's see let me go back through the list of questions and see message retracted okay sorry uh wow pretty cool useful extension i also do that really nice extension absolutely except that when you have weird data types like seriously this is kind of dumb like really that's that's just that's not great you know come on um looks awesome is there a pattern or if you don't know the type coming back from the service that's a problem uh if you don't know the type coming back from the service so all right how do you make a really open-ended um type and i would say probably the easiest way to do that you know type really open ended object type equals and then it would be a key of anything probably a string and then a value of a string that's basically the most open-ended uh object type you can come up with and then if you there are some constants in there that you can that you can find like for example id is there at least an id that we can depend on then you can start adding those in so that would be you can also do this as interface if you like so that would be your sort of most open-ended uh interface type wow gosh such great questions today thank you everybody small question why do you use pokeset instead of set pokey well one i said pokemon if now you're getting me in the moody pokey which i'm always in the moody pokey um the reason that i use pokemon set and pokemon is because if i want to go and extend selection this is a little bit bad in this case but um and i do command d to go and extend selection then i pick up pokemon and pokemon set together so if i were to go in and i want to change this to i don't know creatures then that works right whereas if i done pokemon and set pokemon and i wanted to change this to creatures then i would do creatures and then i have to go over here and capitalize the sea is that ridiculous yes it probably is but you know honestly it's it's fine um i i just i saw somebody doing this as a convention and i kind of picked up on it and i haven't i haven't looked back since i thought set triple x was the recommended convention i don't know if it's recommended um but you know honestly it really doesn't matter you can call it flub blarb you know if you want really you know but hey if if your company is like dude you got to do set up xyz then you do set x xyz um okay what happens uh when the return type does not interface no oh does not match the interface well yeah well that's a really great question flatline because what what's kind of tripping you up there is you have this expectation that typescript is actually running that there's something about typescript that's keeping you safe at runtime and there's nothing keeping you safe typescript is only compile time so no there is no checking at all in fact if i went over here right now to pokemon json and put in there you know a1 b2 that sort of thing the code would happily run right but it's going to blow up let's watch it blow up oops yeah okay at the very least it doesn't run um but no there's nothing in typescript that's this that's keeping you from uh it's doing any kind of runtime checking and the reason is because the maxim of typescript is that were you to remove all of the typescript typing from a file that the behavior of the file would remain the same so they don't add any additional code to do run time type checking so that's something you actually have to account for yourself how is renaming working with explicit how's your name without working without explicit type class interface definition how is the renaming working renaming of of what the pokemon i i didn't get that one andrew so from real api i generate types from a swagger definition denio from a real-life api i'd be using graphql sorry i just want to plug graphql are you there my bad uh jonathan such a coincidence that i'm doing a course on typescript and react at the moment just got drawn into the live stream though thank you nice to have you here if you have any questions from your your course i don't know what courses are out there i just want to go and create content and sometimes i guess i collide with other courses or not um i actually had somebody ask me a couple of days ago why i give all this stuff away for free and i'm like why not because you guys should have this you know i mean yeah uh oh josh has got an option for me on on the uh looking back in the code a little bit const list list item can i take a look at that for a second here let me pop that in there okay uh okay so yeah got a little extra commas we can pop those out that works okay nice all right well if that if that works i'm in cool um google knows all you have awesome content oh thank you very much um such coincidence yeah okay well okay so one more thing um i don't know if this interests you at all over in on the discord server actually over in that lightbot channel that vlad has now covered in well i don't know lots of light light stuff uh we actually did have a weird off-topic conversation about moan ads and functional programming so if that's interesting to you and you've never really understood what a monad is then uh you know be sure to put that in the comments and i'll do a video on sort of basic functional programming concepts in typescript and javascript the reason i wouldn't go full hog on on functional programming is i think that there's a nice like kind of half step between the the programming that we do and functional programming with while using maps and slice and and map and for each and flatten and flat map and filter and those sort of things that are whoa whoa whoa okay wow thank you uh so wow thank you abad that is fantastic i don't know how much that is but that's wonderful thank you um anyway so if that would be of interest to you and it looks like ayush says it is then that'd be great i think that people they get really into into functional programming i'm not a huge like functional programming advocate but i think there are parts of functional programming that are really valuable to uh to understand and make for very great make for much more testable code and i think that's really where i like to stand on it is is it making the code more testable and idempotent functions you know things where you can always say for a given set of inputs you're going to get these outputs makes for very testable code so i think that's that's great uh okay well listen this has been wonderful thank you so much amad for your donation that is fantastic i'm gonna jump over onto the discord server there is a uh a general channel over there that i'm gonna be on and i'll just be there just chilling for you know 30 minutes or so you can ask me any questions you want we can just chat it's not recorded you can ask me anything you want and uh all right i'd love to see you there so jump on over to our discord server let me go and get the where's i was able to find like a discord server setting or something but anyway it's in the description right in down below so go and grab the the discord server jump on you like it it's fun and uh okay here we go oh for you jazz i'll put the link to the server so where hold on let me see uh youtube my my channel whoa youtube with my channel and discord link in a new tab there we go here we go there you go jazz come on over to the server say hello super friendly thank you so much for the donation you guys are great see you next time see you next week we'll do uh hooks and typescript next week all right bye guys it was great

Channel: Jack Herrington

Views: 3,154

Keywords:

Id: fu10QR3IU-k

Length: 52min 10sec (3130 seconds)

Published: Sat Jan 30 2021