React Native Web Game Logic (P7D4) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with jesse i'm jesse and today we're going to try to add some logic to our game that we were working on earlier in the week uh let me go to the live chat real quick and say hello oh wow there's a lot in the live chat already um they have goop to ask if uh if i teach react while streaming and if i do a new project every time no we work on the same project usually over a series of streams and i i do try to explain a little bit what i'm doing so it's not really a tutorial but hopefully you'll learn a little bit about react as as we go through the project um nobody savage says hi jesse you beautiful sob you with a little heart emoji thank you i appreciate that all right let's see i'm skipping through a lot there's just a lot of message retracted stuff so that was most of is on here um all right then a couple questions about what we're going to learn about so yeah we're using react native web and that's basically it's basically the same as react native but we are our target right instead of android or ios our target is the dom right the the web so we're building a web app using react native why would we want to do that because eventually first we're going to build a web app but then we're going to also make android app and maybe an ios app out of this and we'll be be able to do that with pretty much the same code so i'm aiming for 90 plus percent uh of the same code to be used everywhere all right so here's the code but let me start with the ui just to give a refresher and for everybody that hasn't seen it yet i'll show you the ui i'm gonna start this pomodoro timer okay when i start this timer if that means for the next 25 minutes i'm going to focus mainly on the code and i'm not really going to look at the chat very often after this timer goes up i'm going to go back to the chat and try to catch up on all the questions there if you have a question just hang in there and i'll get to it in about 25 minutes so here's our ui basic concept is we have our hero over here we have our enemies over here you're given a math problem if you get the problem right one of the enemies disappears if you get all the enemies to disappear you win if you get the problem wrong a new enemy appears right uh and it'll so the the logic that we want to make today is we want to verify that the user has the right answer um or wrong answer right when they enter something in and hit submit and we want to generate uh random math problems right we're only going to worry about addition for now that'll be the the our proof of concept uh our our mvp right is just gonna be addition problems right and that'll basically be level one single digit edition is usually where they start children out so that that'll be level one of our of our math game okay um let's go to the code and well let's decide what we're going to do first um i'd say the first thing i think it'd be easier to do is let's stick with a hard-coded math problem two plus two and then let's try to verify a correct answer first and then if there's a correct answer we'll remove this if one of these enemies if it's a wrong answer we'll add an enemy once we get that down then we'll add in basically changing the problem uh every time yeah every time that's a there's a submission we change the problem okay that'll be step two so step one is just verifying the answer okay so our entire app right now is pretty much just this app.js file for the purposes of the stream it's easier to have everything in this file right now once it starts to get too complicated we can break some of it out um but this just kind of simplifies there's way less clicking around in different files uh because i want the font size to be big enough for you all to see i can't really have screens side by side uh so it does make it harder to have multiple files open all right so we already have our controlled input so we know what the input's going to be and it's going to be in state it's going to be text now [Music] let's change that text was what we copied and pasted in here from an example of a controlled input but really it's going to be a number right so let's call it answer it'll might eventually when it gets more complicated it might make it a bit easier to reason about if we say answer is the answer okay so now the value of this input is whatever this state answer is and then every time the text text is entered it changes the state of answer right so text on text or on change text changes the state and change in state triggers a change in value right and that's that's the concept of a controlled input in react okay so we have that and our submit button right now is just console logging well this a text but really it's it's going to be answered but we're going to get rid of this console log because on submit now we're going to check so let's say this dot um check answer right so now let's make a check answer oops and we're going to use an arrow function here for check answer forgot an equals there we go so we're going to use an arrow function uh i definitely recommend using arrow functions inside your your class components because it helps to reason about the value of this um a lot easier and you don't have to worry about binding this somewhere else so uh i prefer this sorry i prefer arrow functions in this case all right so when we check the answer we're gonna say um all right so for now it's gonna be two plus two um let's see how we're going to do this i guess we could just say um this state answer um equals to where's the plus side uh the keyboard i'm using on this computer like for streaming is just um it's a different so my typing is a little off okay and actually so like right now this is very simple check answer is just gonna return true or false um actually um yeah let's change that a little bit check answer returns true or false [Music] we don't want to return that though we would say all right so we're going to say let correct equal so basically this is going to return true if it's true obviously false if it's false so if correct is true then we'll say if correct we're going to call this dot remove enemy else we're gonna call dot add enemy okay so we haven't created these yet uh we need to though so i'm going to add enemy remove enemy and then no matter what we need to after that uh say this dot um new problem so we're we're going to actually let me just put this outside of it since we're going to do it no matter what so new problem so every time we check an answer no matter what happens we're going to get a new problem and then depending on the whether the answer is right or wrong we're going to either add or remove an enemy okay and yeah that's going to run okay all right i'm just gonna save this just to make sure we don't have any uh like syntax errors going on okay everything looks good let me check my timer too okay in about 15 minutes i'm gonna go back to the chat and let's create some of these remove enemies at enemies i think i may want to do it like this um enemy enemies uh how about this about number of enemies so we're gonna start always we're gonna start with three for now and then our remove enemy and add enemy is just going to affect the state so we can say remove enemy we'll do this dot set state and we're going to say number of enemies is gonna be number of enemies plus oops minus one sorry almost added one okay for this one we'll just do a plus sign and we'll change this to add okay all right so now we should be able to test out whether or not this is working we're not doing anything with the ui yet we haven't defined this we'll probably get an error when i try to do that so let's define this at least oops new problem okay so new problem for now is just going to log something console log new just to make sure it's working all right okay so let's try this so let's look at our our state so here's our uh you can't oh yeah you can see that i wonder if i can make it bigger though okay so you should be able to see hopefully this number of enemies three and we should see this number change so let's try to do so already see our answer changed right let's submit all right so we got it wrong so now the number enemies is four we got it okay i think i know what's happening let's answer we need to change this state answer to be a number so let's check really quick um string to number and java no that's not what i wanted i don't want a number with comma i just want to string to a number parseint there we go for now person will work i don't think we're going to be dealing with decimals uh since this is a very basic math game so let's just go with parse int normally uh i would recommend going to mozilla developer network so that's a great resource if you check out mdn there's so much info on on everything and then examples so that's usually the first thing to come up when you look up something like that it wasn't this time but i i definitely recommend mozilla developer network so it's developer.mozilla.org okay but anyway for for our purposes uh for parse in it takes two arguments so the first one is whatever the string is that you're trying to turn into an integer and then the second one is the uh the the base so um like we could do like base 16 which is like hex stuff base 2 which is binary in this case we want base 10 which is the normal number system that that we're using right so let's do that we'll go back to our code and say pars int so our first argument is our string and our second argument is the base base 10 might be the default i'm not sure but it's not going to hurt to put 10 in there it'll make it clear to anybody that we are using base 10 which most of the time you're probably going to use base 10. let's save that and see if that was the issue let's see so number of enemies is three there we are okay so the issue was simply that it was comparing a string to a number and those of course are not going to be equal right so even if it seemed like it was the right answer it wasn't because behind the scenes it was comparing two different types and so let's let's verify that the wrong answer still increases yep all right awesome so our logic works there the next step would be to actually add or remove enemies on the screen and i think i'm maybe almost all right eight minutes in about eight minutes i'm gonna go back to the chat and um and answer some questions i can i can see there's a lot going on in the chat so uh hang in there i will get to the chat soon oh we got a lot of viewers so hey everybody thanks for watching so here is where we are actually adding in the enemies so what we want to do now is add in enemies based on the value of in state of number of enemies so now we're gonna do we're gonna drop into some javascript right so in react inside of a component that kind of looks like html this is called jsx we can do javascript if we put these little curly brackets and so we're going to do this state number of enemies and see how we'll do this i guess i was gonna normally when i do this i'm like going over an object so all right this is this is not normally i'm just like here take this bit of data that's an array and let's map over it right but that's not the case we just we actually just have a number okay at some point it might be different if we have different types of enemies but for now let's just say we can do a for loop actually now i'm confused i don't think i've ever tried to do uh like a a loop just a simple loop in uh inside of jsx all right well let's give it a shot i don't think you can do a for loop though let's check this out actually i do want to look this up so let's say uh loop in jsx there we are how to loop inside react um let's go to stack overflow first let's see um trying to do loop okay yeah that's basically what we're trying to do i'll make this bigger you can't lose use a for loop yeah you can make an array and pass that as an argument okay hmm all right yeah i think we're gonna situation off and map is a good answer yeah i think we're gonna have to make an array and then maybe map over that oh actually that arrow function stop map all right this looks interesting let's look into this all right let's try this uh the idea is we're going to use this a spread operator to basically just create an array on the fly and then map over that i like that i like that idea let's try that let's just copy this for now and we'll modify it as we need it okay so in here this will have this so i also don't need these curly brackets i already have them and this is gonna be this state um number of enemies we're gonna map over that i don't know why we're gonna have i don't really need x i just need i and in that case i don't need these i don't need this object row but i would like to have this key okay i'll explain what i just did here okay so what i think is gonna happen we'll see uh is that an array will be created with the the number of elements in the array will be equal to the number of enemies then we'll map over that we're going to get the uh the index of of each one of these and add it as a key so in react any time you're you're adding the same elements uh to to the dom you need to have a key to differentiate the the elements okay all right so let's see if that works so you should be able to tell right away hey cool number of enemies now we don't actually even need to do the math we could just change it four nice let's see how it does when we add a bunch whoa 12 okay so yeah so for right now this is imperfect because right once we get high enough up there it it's just a wall of enemies so we'll have to add in some logic to handle that uh maybe drop into like two rows like we'll figure that out but for now [Music] basically you know this works right uh probably the best thing to do for now would be to place a limit like you know they'll never be more than let's say if with the six work yeah so like let's say they'll never be more than six enemies at once we won't let you get above six and that'll be like a temporary solution to that issue um we can add this in i guess to add enemies if a number of enemies if this state number of enemies is less than six then we will do this okay so otherwise we won't so let's uh let's try this out again say like so we can see i can never get more than six enemies at once that's not bad realistically like if there were a kid you know a young kid learning math and he kept getting the answer he or she kept getting the answer wrong it would be pretty discouraging if there were a ton of enemies they'd feel like they'd never be able to win so this is probably a reasonable thing to do anyway uh all right cool so the timer just went off so i'm gonna set five minute break here and go back to the chat answer as many questions as i can let me scroll up a bit let's see where i left off wow there's a lot in the chat i'll try to do as much as i can i don't know if i'm gonna get through it all in five minutes though uh all right so education says uh hello bro can we add native code in react native project yes you can add native so i'm assuming you're you're talking about adding um like native android or ios code right in that case the answer is yes so there's there are definitely ways to do that so i mean i would like look at the documentation for specifically how you would do that in android or ios let's see oh michael says i know what proof of concept is what is nvp uh mvp is minimum viable product so sometimes you'll hear people talk about really a proof of concept um is usually like a step before minimum viable product so your proof of concept is just like okay like is this idea like even doable at all like we need something to show like people higher up in the organization that this actually can work and then your minimum viable product would be what you actually launch with um so they might be like your your very first version of the product it's supposed to be like have minimum functionality and the idea is that you would then add functionality as it becomes more popular oh and i see mana already said it so thanks for that and amman uh put the link right in there to uh be able to use native code with with react native so thank you so much a lot of people are saying hi i'm just going to wave and say hi to everybody because i don't want to take up um too much time since we only have an hour let's see if he's been on programming uh ahmed says i want to learn programming uh that's awesome uh nino says are there any free courses for game developers i'm sure they're out there i don't know of any good ones myself because i i don't normally really do game development but if anybody in the chat knows of any good free courses you know let let nino know please uh wallace says i need a 3js tutorial anyone here can help me yeah i don't know of any tutorials in 3js off the top of my head but if somebody does please put that in the chat menthon says every time i open programming live stream the first word i hear is um i apologize for that i noticed on the last stream that i was saying um a lot more i think i'm out of practice you know when i used to stream pretty much every day i don't think i was as bad and now that i've gotten out of practice i i think i'm not communicating as well as i did before so i'm gonna work on that i'm gonna try it definitely takes mental effort to stop myself from saying it dragon hunter says i'm just getting interested in writing a react native game using a webview component and boom a live coding with jesse oh awesome that's really cool that that worked like that nobody savage says hit that like button awesome so my uh i i do have to say this so my team at work is i'm going to keep the story short but like basically they claim that they that at on one of my live streams i ended with smash that like button fam i never remember saying that and they've never been able to actually show me the stream where that happened but they always want me to actually say it so i'm gonna say it just one time to make them happy so anybody watching right now smash that like button fam all right there i i said it now it's it's uh official um rabbitworks says make your life easier and either do it fully native views or just do react at building apps to run inside a webview component is counterproductive um yeah actually so dragon hunter was talking about doing a native game inside a webview yeah i don't i don't think you need the the webview um yeah i would try to do if you're gonna do react native you know just do react native uh don't worry about the the webview if if you can do it i mean if there's some reason why you need the webview that's cool obviously i don't know the details of the project but uh you know i do recommend that there are advantages to not doing the the webview all right let me i don't have any pens or anything to write with i was going to write down where i left off so i could find it later but ah here it is i had a cup with pens in it and it just got knocked over so let's see all right oh wait a second it's not giving me time stamps no toggle times there we go i had had the time stamps turned off okay now i should be able to get right back to where i left off in the chat so if i didn't get to your question right now i will get to it after our next pomodoro session all right so where do we leave off at right now we can add and remove enemies depending on whether or not we get the correct answer but we still only have two plus two next step let's give a random math problem for now the constraints are we want it to be single digit addition so it's always going to be addition and it's always going to be something that is uh zero through nine okay so that should be pretty simple you know given those constraints i i just noticed uh nikki says loving the beige screen green screens are overrated it's jus it's this is a temporary office in the corner of my basement those are tablecloths hanging up to make walls so everybody gets on me for my my terrible looking office but i am i made a bid i put a bid in on a house and i think everything's gonna work out i'm gonna move and uh the house will have uh it has a basement that has enough space for me to build a real office in so hopefully it'll be a little bit better of a background i'll try to do like soundproofing and stuff and make it a legit office that i can do these youtube streams from okay let's see how we're gonna do this let's make some of this in state so i guess we can just make two values in state and then set them to a random number each time right okay um about one and let's just start out with 0 about 2 0 and let's make random number so we're just going to make a function that will give us a random number we probably don't need a random number function i could just do this but let's just let's do it since we we wouldn't we already did this uh so actually i'll just look up the syntax instead of messing it up and then looking it up um random number there we are so math random there's what i wanna i knew we'd have to do math floor um get random and that's basically what we want right um it's output all right cool yeah this is perfect let's just take all of this um but i'm just gonna take this much okay so our random number generator um is we're gonna give it a max and this is actually good because right now we only want like one through nine but eventually we could increase the difficulty of the game by giving this a higher max right so then what we can do is oop you know we already have a new problem don't we we do okay so when we go for a new problem it could just be this dot set state and we'll go val 1 is going to be this dot um randomnum and we'll say max is nine and then we'll do the same thing here for val2 let's make sure i got that number right um if we pass in three okay let's pass in 10 then okay uh all right so this should give us when you say new problem all right great now let's plug in there's gonna be a couple places we're gonna we're going to need to plug in these values so here it's going to be this state oops val one state val 2. okay so now we'll actually know what the the values are the problem that comes up and then in our ui we also want to have the correct values where do we have that so instead of hard coding two plus two we'll do this state oops we gotta put these in in brackets here so this state one and this state vowel two all right let's try that out it should we should see zero zero first and this should actually be zero wait did we get the wrong answer for that hold on a second zero plus zero should equal zero right what what the heck why did that happen okay that one is zero well two is zero our answer is going to be zero right all right we found a bug for some reason when the answer is zero um it doesn't work that's not going to matter for right now we will have to solve that eventually like when we get to um let's say i'm i'm basically just gonna skip it for now right let me see if somebody oh did i misspell something all right sorry where did i misspell masso says i mistyped val1 and i wrote va1 okay let's see where did i do that va1 all right thank you i'm glad i looked up there all right let's test this out now all right let's try zero zero all right that works now now i don't want the first problem to always be zero plus zero so we're going to do component did mount and on component did mount we are going to call new problem right so now we should get a random problem every time right so we're going to refresh random problem random problem great let's play through the game uh and just to make sure that it works so oops you know what i just noticed we didn't uh add a way for the user to press enter and for this to work so let's do that oh three plus six i'm interested to see what will happen now will it go negative ah we got an error cool so we definitely need to make sure we can't go negative so let's say when we go to check the answer if it's correct we remove the enemy and then let's check and say if this state number number of enemies equals zero [Music] then we'll say let's say display u1 i'm just going to name the function u1 because that sounds cool right this this dot u1 u1 is going to for now all it's going to do is just display um state it's going to set states and we'll go this state 1 which will create that value oops that's not what i want i'm just going to say 1 equals true and yeah for now that's that's what we'll do so we'll say one equals true and then up here let's add one false all right uh anytime you have anything that's going to affect the ui at all you probably want to keep track of it in state because a change in state will trigger a re-render of the component and that's what you want to change your ui so if that happens we're going to want to display [Music] let's see so instead of this math container let's just put in one if one is true then let's put in this um let's just say victory and then otherwise let's display this this view right and this obviously isn't styled yet oh yeah i say this state one right all right so let's see if that works and we can skip the actual game and just set this right no all right let's try it again if this one's nine oh yeah you know what it hm one is still false all right i think there's something wrong with my logic here so let me check up here um let's see all right so we're checking so we're doing this dot remove enemy which should take the state down and then we're checking for if the state number of enemies is equal to zero you know we could do i mean we probably could move this honestly to here anyway um okay all right let's see now uh 9 14 [Music] 4. hmm still something wrong with it let me see shouldn't it be inside the if all right let's see okay nikki said this headstate is not sync use updated function to guarantee you get the latest value uh um yeah i was worried about that so you think the problem then is that i'm i'm checking state before state has had a chance to actually update use updater function nikki what's the updater function let me check my time to all right we've got about nine minutes this sets the previous state equals logic all right awesome uh so nikki let me know if i'm using this wrong set state like this yep all right let's see if this works i'm glad we set these as really easy math problems be embarrassing if i couldn't figure out the problems no all right still didn't work actually we can just test to see what comes up anyway all right so we did if we can get one to signal true then we will get this victory to come up okay so it doesn't look great now but at least that that does come up and then i evidently i did this wrong all right let's see hey horseshit's here how's it going because we'll change the number in state first so all right oh okay this pre-state number enemy that would ensure the state is updated and you get the right value all right let's see [Music] all right let me i'm getting a lot of advice here so let me read this so um harsh is saying the syntax is wrong you can use callback as a second parameter uh this free state number of enemies this will ensure the state is updated and you get the right value replace that first set state um syntax is wrong use the second parameter okay all right i did so many so many things here okay um so nikki saying const and call your logic with number two enemies if that all right so nikki's saying i could do const oops and then hardship has one too so michael said start over for number of enemies previous numbers enemies on this one oh i see what you're saying with the callback now all right let me let's uh all right let's so this dot set state previous number of enemies okay so we're setting number of enemies the previous number of enemies minus one and then as our callback then we're gonna do this stuff right what the heck unexpected character hang it i think since i copied and pasted it it's giving me it's messing me up here have to type this out this dot set state tree yeah let me see i guess all right okay let me just copy and paste this for now so i'll type it all out and say um line 32 as the error all right where's my my error here after that first preview number 10 is minus one put uh [Music] this one okay all right there we go i spelled i spelled enemies wrong enemies know what now it's now it's suggesting that spelling to me enemies there we are all right let's uh let's walk through this for my sake and for everybody's sake so um so what we're doing here is saying uh when we go to remove the enemy then we're going to call this set state we're going to look at the previous state and we're going to set the new state the new number of enemies to the previous number of enemies minus one then after that occurs and that's it's in this callback right we're gonna say if the number of enemies is why does it say less than what the heck was i doing um if the number of enemies equals zero then whoa why did i just do that no i copied the wrong stuff dang it um all right let me let me go back here for a second because i totally copied the wrong thing all right so now our ad enemy is here what i wanted to do here was if the number of enemies equals zero then i want to call you won okay all right now let's try this yay i won victory all right my timer definitely buzz what time is it yeah okay so that's pretty i mean we basically achieved what i had hoped to achieve for this one so got a little crazy there at the end but i'm kind of glad we went through that because uh that's some cool syntax and it's nice that that i learned that and that we learn that here on the stream let me commit this for all right so i'm going to git commit uh with the am flag that means we're adding in we're doing a git add then a git commit with the message in line uh i'm saying it's a new feature right and this is we add the logic for single digit edition i'm gonna push that all right cool so that's now on github uh at this point i'm gonna go to the chat and try to get in as many questions as i can and i'm also going to turn on my work labs up just to make sure that i don't have any meetings coming up i don't think i have a meeting but better safe than sorry right okay okay all right i'm gonna skip through like a lot of the discussion and and kind of just focus on questions okay i'm good i don't have any meetings right now so i can't get through this uh okay so mayor says hey uh how can you get the output of a js on microsoft studio 2019 um i have no idea so i've never used microsoft studio so sorry about that if anybody knows the answer that question please put it in the chat okay pavin says which one is good for creating a discord bot node.js or python uh i don't i don't really know because i've never created a discord bot if i was going to do it i would do it node.js because i i know node.js and i'm not good with python um so that's just me but i don't know what the official like but if there is a best way to do it i don't i don't know like john hanson says the musketeers are here for our yeah i like so for for those of you that didn't watch before there's a couple of people for that used to watch the live streams regularly uh kind of a couple months back when i was doing them pretty pretty much every day uh so it's it is really cool to have you all have you all back i gotta i i missed i missed hanging out uh all the time you know all right so uh david put in a link to an edx course on game dev so when you paste the link into the chat it's hidden automatically i just unhid it so you all can check that out let's see um is it true so you have a question that says uh is it true if you get a certificate with free code camp i can use it on my resume yeah i mean you do get a certificate at least like an electronic certificate and yeah i would definitely put it on a resume um under like certificates or education you know like i i got a certificate for um the udacity react nano degree program and that that is on my resume so uh i yeah i would definitely put that on there anybody that's familiar with free code camp will know you know what that means is making fun of me here it says looks around for paper and pencil we're having a computer with notepad that's so true i definitely i could have just like i had an editor open why did i think i needed a notepad oh yeah patrick says that background makes you look like a hardcore hacker all right i feel better about it now so that's that's a good way to look at it harshit says oh classes twitter people will say it's a crime now yeah so if now that react hooks are out they're actually not out officially yet in react native so um i think they're gonna come out the latest i saw was either monday or tuesday of next week they'll come out in a stable version 0.59.0 but yeah so for now i think classes are still acceptable and react native but otherwise everybody's saying just use hooks right and go with your functional components i'm going to try to add in hooks as much as i can but really realistically i'm so used to classes at this point it would it's faster for me to just use classes john says install a disco ball there's not enough of that effect on coder streams at the moment you know what i'm gonna do about uh once i i get enough uh views on my personal channel to do the um like the super chat i'll make it a thing on the super chat that like if you donate five dollars the like disco ball will spin around and lights will go off or something how about that let's see all right john hanson's just to give you a little bit more info about hooks john says hooks are very simple and efficient when you realize how to get them to work when you change a complex class component with a lot of state props and timing involved to a function getting there yeah a hooks look amazing if you don't know about hooks look up dan abramoff's talk introducing react hooks and um also oh what's his name right after that talk at the same conference uh someone else did a talk where they actually demoed react hooks and i can't remember what this guy's name was like i actually went to an in-person training with him and i can't remember his name um anyway but that was at oh what conference was that at it was like the end end of last year maybe or something that it was announced i don't know if anybody knows what videos i'm talking about if you put the link in the chat i'll unhide the link um kubiworld says what vs code font is that i do not know it's i guess it's whatever the default font was because i don't think i ever changed my font the theme is called seti scti oh nikki says remember the uh prevent default in your submit handler though okay yeah we can so uh nikki's idea earlier we were talking about how i can't right now i can't hit enter to submit so i said if i just make it a form of automatic access accessibility support but i have to remember to prevent default so it doesn't do your normal like post back on the form and refresh the page that's a really good idea i have to make sure though would that work because like in react native would that work if i want to turn it into a a mobile app i have to double check on that uh matt asks says i'm just starting off with python does anyone have any advice on fun codes to learn starting off uh i'm not really sure i don't do much with python oh nikki just said oh does that work in react native so you realize that before i did all right i'm gonna skip a lot here because a lot of it was just that back and forth trying to figure out what syntax i should use uh right here all right uh dash dash mook says please make tutorials on react native navigation in 2019 um okay i'll think about that i am i am going to have to work with react native navigation at some point like at my my real job so i'll think about doing a tutorial like when i when i get into that as well uh rabbit work says cheers jesse another fun stream i'll be back for more good luck thanks thanks i appreciate it uh marion says is the source available online yes the source is available online the link is in the description michael says back in the day there only be five or six of us yelling at at freecodecam.org now there's 100. yeah there's a lot a lot more viewers which is great um we were well over 100 viewers at one point we dropped down a little bit now but um yeah it's free code cam channels just took off like there's so many subscribers now um we have any channel for react beginners uh i'm not sure i do have my my channel does have some react stuff on it um i don't know which channel would you all suggest now for react videos oro says another great stream uh i have motivation overdose thank you mr jesse oh you're welcome thanks for watching alright somebody put no [Music] all right somebody did put a link into uh hold on a second let me put a link in [Music] to this react react today and tomorrow 90 cleaner with react hooks this is this is the talk that i was talking about and unfortunately oh there we go all right now it's coming back i lost all the chat for a second because i i clicked on the link and navigated away now it's coming back it's just going to take a second to load but anyway i i pasted that in there i'll also show the the link m4t got the link uh that is the one ryan florence there we go the the man who did the like demo on react hooks where he actually took an existing project and converted it over to using hooks is ryan florence yeah then he is the guy that made react router um nation says uh can i use react for ui validation only without needing back end uh you can use react only on the front end i'm not exactly sure if that's what you're asking but you you can do just front and react um tanya says how many languages do we need to make a responsive website um you can make a responsive site with just html and css if you want to do anything more complicated though you will need javascript somebody asked if the screen is stuck no probably not i'm just not coding right now and i maybe my face was really still um make a video of how to make a ludo star game i don't know what ludo star is so i probably not the right person to make that video all right cool so i think i've gotten through everything if i missed your question i'm sorry you can put it in the comments below the video and i'll try to answer it later or you can wait till the next stream and ask me or you know feel free anybody if you have questions to message me on any social media uh i'm i'm active on twitter and instagram mostly uh the links to uh my social media stuff and my youtube channel are down in the description um so i'll be back next week probably be back on wednesday i may do a graphql tutorial at some point this weekend on my channel so if you're interested in that i'm going to be using apollo server to wrap an existing rest api in graphql so hopefully i can get that done this weekend if you're interested subscribe to my channel um and then you'll be notified whenever whenever that video comes out uh otherwise have a have a great weekend uh thanks for thanks for watching and helping me out and i'll see you next week