Complete React Tutorial (& Redux) #4 - React Components

Key Takeaways

all right then gang so in this video we're going to create our very first react component now I've already said that react components are the lifeblood of react and we use them to take control of different things or different elements inside our websit such as the Navar search bar a contact form those kind of things in this video we'll create a react component to take control of this thing right here this div with an ID of app so we need to create that comp component in JavaScript so first of all let's do our script tags now how do we create a react component well there's a few different ways in this video we're going to use JavaScript classes a class-based component but I will show you other ways as we go forward through the course as well so to create a class-based component first of all we need the class keyword and by the way if you want to learn more about JavaScript classes I've got an objectoriented JavaScript tutorial Series right on this channel I'm going to leave that link down below but essentially classes are a way for us to blueprint objects in JavaScript but anyway we're going to create this class and give it a name called app you can call this whatever you want I'm calling it app since we're going to use it to control this app ID right here and this class is going to extends react. component so we have access to this react object right here because we added this script to react and we're using this this thing on the react object component to inherit all the base functionality of a component into this class so now this class right here is going to represent our component now class-based components must have inside at least one function and that function is called render so the render method right there that is what is responsible for rendering our template to whatever element we want to render to so what we're going to do inside this method is return a value and this value is going to be our jsx template now typically this return value is going to go inside parenthesis because a lot of the time our return value is going to go over one line all right then so remember jsx is a way for us to write HTML code inside JavaScript because that's what we're doing here we're inside a JavaScript block so we want to write some HTML code here so we'll use jsx to do that and it looks very much like HTML so let's create our jsx template we'll create a div first of all and then inside that div we'll just do an H1 so in there H1 and we'll just say hey ninjas all right so that there is our jsx template and it looks identical to HTML at the minute now there's a couple of limitations when using jsx that you should be aware of of the first one is that we should always generally return one root element at the top so div div like so we can Nest as many elements inside that root element but there should generally always be one root element at the top now if we did something like this at the moment and did three root elements this is not going to work right because there's three root elements we need to have just one root element there are ways around this but I'm not going to delve into those right now so the other limitation is that we can't use the keyword class to add a CSS class to this class in JavaScript is a reserved keyword we use it to create classes so we have to instead say class name equals to whatever so I'll call this app hyphen content so there's a couple of limitations that you should remember when working with jsx one roote element and we use class name instead of class for CSS classes all right then so we have our component right here but at the minute it's not really doing anything we want to render this component to this thing right here and nothing inside this JavaScript is saying to react do that yet now remember we added this second script up here called react Dom this is the glue layer that takes our components and can render them to the Dom so the way we take this component right now and render it to the Dom is by saying react Dom we get access access to that from here and we use a method called render and inside we pass in two parameters the first parameter is which class or which component we want to render to the Dom we want to render this one right here but we don't just say app like so we add it as a tag bit like jsx so we take the component name and put it inside a tack which is self closing the second parameter is going to be where we want to render it to to the D so we want to render it right here so we can say document. getet element by ID and then pass in app and that's going to tell react Dom to render app this component to this thing right here so let's give this a world and I'm going to right click over here and go to open with live server now I can do that because I've got a package installed called live server so if you you want to do the same thing you can install that and that means that on any um HTML page like this you can right click and go to open with live server that's going to open it in a browser for you well it should do anyway open with live server okay so at the minute we can see nothing is in here it's not taking this and it's not rendering it to the do and we should actually see an error in the console if we open this up and it says syntax error unexpected token angle bracket and that's referring to this jsx right here so it's not recognizing this stuff the jsx and that's because jsx out of the box is not supported in browsers so we need a way to take this code and transpile it into something that is supported in browsers now that is not complex to do at all we just have to use a tool called B so go to Babel js. then go to setup then go to in the browser and we're going to grab this thing right here this script tag so Babel is going to transpile our code right here into something that a browser does understand and we need to do one more thing we need to grab this stuff you see where we have a script tag we have to say type equals text SLB I'm just going to zoom in so you can see that and I'm going to grab that stuff and paste it over here so this should fingers crossed now work so if we go over to the browser now we should see hey ninjas rendered to the D and if we inspect this element then we can see that right here inside the div within ID of appap we're rendering our component so it doesn't get rid of the root div right here doesn't get rid of this it just nests our component inside that div make sense okay so this is all well and good but what is the point I mean at the end of the day I could have just grabbed this and just pasted it inside here hardcoded that right instead of creating this component then rendering it to the Dom now the idea of react is that we can actually output Dynamic content if it was just always static content like this it would be useless but we can output Dynamic content inside our components now how do we do that first of all let's do another tag not all that stuff A P tag and inside the P tag what we'll do is a couple of curly braces like this so this means that we can output Dynamic JavaScript content inside these curly braces so if I wanted to now I could do a bit of JavaScript like take the math object and say math. random this is just basic JavaScript then I'm going to multiply that by 10 so I want a random number which gets me a random number between 0 and one like. 764 whatever and I'm going to times that by 10 and then I'm outputting this dynamically to the template I couldn't just do this without the curly braces because that would just render this as a string and you'll see that if I save it view that in a browser we just get this back but if I output this inside curly braces then we're saying hey this is actually JavaScript uh Dynamic stuff we want to run here and I want you to render the result of this to the Dom so if I save this now then we should see that random number on the screen let me just zoom in you see that so I can refresh and get a different number each time because at the end of the day this is just rerunning every time we run the file okay so that's the power of react components and it's not always going to be random numbers like this again that would be useless but it could be data from a database or UI state is something open or is something closed and we're going to see all that as we get further into the course but for now that my friends is how to create a basic component in react