Beginner React Tutorial | Create React App, Components, Props, State Variables and MORE!!

hello everyone in this video we are going to go over how to um get started with react um this is just going to go over concepts of react not really how you set up react in order to get react working you're going to need some type of editor um and like i have bs code here and also you're gonna need node.js um installed on your computer once you have that um you can go to a terminal here if you're using um vs code you just go up here in new terminal and you'll get a new terminal down here and we're you can see here we're under the youtube directory so if we run the command npx create dash react dash app and give the act a name so we can call this react some simple demo and hit enter it's important to know that you can't use any capital letters in the name of the react app um it won't let you um use that as a name um this command takes a little bit to run so it's gonna take a couple of minutes so once that command is finished running we can see that he created a directory here with the same name that we gave it react simple demo and there's a bunch of stuff inside this folder so in the terminal let's cd into that for folder we can see here that it suggests cd into the folder and then running npm start so npm start will start the app and this is going to start the live um react app server um here it is by default it runs on localhost 3000 and so let's split our screen with this on one side and this on the other um so we can see we have some default um stuff showing up here if we go to source and app.js um we can see we have default stuff written here for us that we did not create ourselves this is what happens when we ran the command npx create react app we can see that there's a learn react here and also a learn react over here so if we delete this and save we can see it's deleted on this side as well so everything here is over here so if we delete everything and save we can see we just have a white screen if we type in hello and save we can see it shows up um it's but it's centered and that's because there's also some default css so if we delete all that and save we can see hello is not centered anymore so let's go back to app.js and now let's create something called components um we can call this folder anything but it's usually called components and inside this components folder let's have component one and component two so a folder called component one another folder called component two and let's create js and css files in each of these so inside component two folder we have component2.js and also component2.css oops that says 20. and inside component 1 we're going to do a similar thing component one dot js and component two dot js 2.1.css i mean okay now that we have those two components uh created let's go inside 2.1.js and let's actually write the component so it's going to be an arrow function if i can spell it and this is the syntax for an arrow function it's going to return some default not default it's going to return some html so yeah we have a div here and we're going to export now in order to be able to use this component this should be called component one same as the file name now in order to be able to use this component we're going to need to export it and this is how you would do that export default and then the name of the function component one's the name and we're also going to want to import the css file for this and we give the relative path and there's the css file that we created right now just empty um so let's type hello here and type in hello one and just save and we can see nothing's happening because we didn't actually use it yet so if we go back to app.js let's delete this hello and save you see we have nothing here let's import the component one that we just created component one so this name has to be what we're exporting so we're exporting component one which means that's what we need to write here and where are we exporting it from we give the relative path to that file and now since we've imported it now we can use it so component one and this is how you would be able to use it with this syntax here save and we can see it says hello one which is what we have written here now if we copy all of this and put it in component two but let's change everything to two instead of one even the hello to i mean hello one strange out to two and save now back to app.js now let's import component two same idea save that and now let's use component two and save and we can see we have component one component um so now let's go over variables so instead of saying hello one let's say hello and then let's give a name first we have to define what type it is that's it's a const and name let's say this equals billy and save now in order to use name let's say we want to say hello billy what we can do is first let's get rid of this one then inside squiggly brackets we can type in what's called jsx code what that means is we have access to these javascript variables now so we can type in name here and it's going to refer to this variable which is equal to billy so this should say hello billy if we save yep and says hello billy let's go to component 2 let's do the same thing let's go const name we can also go let that's another way we can define variables let's go const name equals say steve and let's save that now you can say this one says hello billy and then and this one says hello steve now let's say in this component 2.js variable we want access to billy not steve we want access to billy right so what we can do is we can't we can't share variables between sibling components and these are sibling components because they have the same parent and the parent is app the app component so if we want to share variables between them we have to define the variables in the parent component so instead of saying hello steve here we can instead define steve over here let's delete steve from this actually let's keep steve here let's give let's say this is steve one and this is steve two so now we have name now in order to pass this variable to these components what we can do is um we can pass them through through something called props so we can write name is equal to name so we're saying give component one access to a variable called name and it's equal to name it's equal to this steve 2. now we don't need to give it uh it doesn't have to be called the same thing we can say give component 1 access to a variable called x and x is equal to name similarly we can do the same thing here we can go x equals name i like to keep it the same uh just so it doesn't get confusing so i go name is equal to name save now in order to use it in these components we have to use something called props and then we so we find props up here now in order to access this name variable well first let's save this and see what happens so right now we have hello steve one because that's coming from here but instead if we go props dot name now it's going to refer to the prop variable name which is steep 2. so if we go here and save we can see it says hello steve 2. we can go hello let's get rid of steve one and two let's say this is actually sally save that let's save this and let's say hello props.name and name and if we save we can say it says hello sally and steve props.name refers to sally and this name refers to the local variable steve and if we want component one to have access to sally well we already gave it access to sally by um by the prop we give it to both components so if we go to component one we can go and props dot oops dot name remember to define props up here though and save and we can see that this also says billy and sally so this is referring to the prop variable this is referring to the prop variable and billy and steve are the local variables okay so that's how two components can access the same variables and also update them if they need to so how do we update so let's say we have a button here actually yeah actually yeah let's just say we have a button here and on click function click and this takes an arrow function as say change name is the function save we can see we get an error because change name is not defined so let's define it change name is an arrow function save so right now change name doesn't do anything let's have some words in here so we have a button but that one right now doesn't do anything so let's make it do something let's say we want to change the name so we can go name equals let's say we want to change it to sally one you can see this is not going to work so if we click refresh and click on change name we can see we get an error here and that's because we cannot change this name says assignment to constant variable so this is a constant variable and it cannot be changed so in order to have a variable that you can change what we need to do is use the use state function and i'll show you how this works so now we have a variable name name and its value is equal to sally that's the initial state now in order to use be able to use this function we're going to need to import it and we can import this from react so import use state from react and it's also i think you don't always need this but we can also import react from react and since we already have this react up here we can go like this apparently we can't there we go and so we want to change the value of name and we know we can't change it this way so what we can do is we can use the use state which lets us define a variable and the function to change that variable so this set name here is the function that will will allow us to change the name variable so right now we can see name is equal to sally and it's showing up sally's sally but let's say when we hit this button we want to change the name so we can do that by using the set name function and to use the set name function this is how you would use it and then now inside of here we give the new value we want for name let's say with a new value we want is um valley one save so now if we refresh and if we hit this change name button now sally in both cases should change to sally one and we can see it does okay now let's say we want to change the names inside of these components right and not not have the button out here so what we can do so let's delete this button save refresh okay so we passed the name variable we could also pass the function that changes the name so we can do is we can pass the set name function to both of them if we want to be able to change it inside both of them save let's delete this since we're not changing the name from app so now component.js has access to this set name function so similarly we can have a button here inside of this component and this changes the name of changes the name of this prop variable and we can say change name component one or this is component two and change name is not defined so let's define it quickly save right now doesn't do anything now let's do the same thing in component1.js and let's copy over the button as well but this one will say component one instead okay so we can change the name in component one and we change the name component two so we we know we have access to the function that that changes the name for us which is set name so you can go 1.2.js here and if we hit this button here we want it to set the name now we need to use props because we're passing down that function through props set name to ally and let's save let's go to component one if we hit component one we want to set name to um allison let's save let's refresh so if we hit this button for component one component one will change the name to alison and the name is originally sally now sally we can see is used here and here but if we hit this button it's going to change it for both because it's changing this parent variable name so if we hit this it changes it to allison for both and if we hit this one it'll change it to ally for both so we can see that it's doing what we're expecting um so that's pretty much the basics of react and this is really all you need to start coding your first project in react um i like oops sorry about that i i like to use i mean i like to um code the tic-tac-toe game in whatever language that i'm learning for the first time so i would suggest trying to make a tic-tac-toe game using react um and i i also video on that if you need help if you get stuck along the way i have a tic tac toe video and react um so i that's what i would suggest you do next if you're trying to learn react and i'm gonna cover just one last topic and i think you guys are ready to be able to do that so we imported the css file here um so in order to to actually give these styles to style this we're going to use the css file let's say this button has class name of button and since it's component 2 let's say just say button 2 save then we can go to the css file of component 2. we'll go button 2 let's say height 100 pixels actually that might be too big 50 pixels width fit content background color let's go background image ooh and your gradient let's go blue to green um comma save because it's not a good looking button but we can see that it changed the style there so that's how you can uh link the styling between the js and css files all you really have to do is import the file by giving the relative path and then um the important thing here is normal html it's usually write class but in react it's class name everything else is i think the same like if you want an id it's just id and also um if you want classes to like kind of change or like toggle you can use class name equal and then you can give some jsx code here so you can write you can have like a flag const uh use blue or whatever and you can see that's true and then you can write if blue so you can write use blue question mark so if if blue is true which it is then the class name is let's say blue else use class name white something like that so if this variable is true use this class name if it's not used this class name so you can write jsx code to define the class names or the ids right so if you have an id let's say const number let's say equal to five you could say id equals you can use the tix and you can write id number and then the dollar sign squiggly brackets again and then you'll have access to the variable like that or if you just want the number and no so if you do this this is going to be text and a variable if you just want the number variable you can just one set of squiggly back its number like that okay that's uh the basics in react um i hope you guys learned a lot from this video and if you need any help with uh the tic-tac-toe project i recommend it make sure to check out the video that i already have up covering that thank you and remember to subscribe and like this video

Channel: Avoid Infinite Loops

Views: 257

Keywords:

Id: WrkNNgTbLDE

Length: 23min 56sec (1436 seconds)

Published: Sat Nov 06 2021