React Class vs Functional Component | ReactJS tutorial Series Part 3

hey guys and react there are two ways to ride components the one is called class components which you ride by extending the react component objects and the second kind is functional es6 components they're much easier to write compared to the class components so we're going to look at the syntax of each the pros and cons and which one to use there and by the way if you're not following the entire series you can do so I'll provide a link here this is the react series I'm talking about from the start to finish and welcome to Texas tutorials alright let's just start by creating a new project using Create react after react app slash the name of the new project so I'm gonna say react - class versus es6 pull nine components alright so it has created the project now I'm gonna just CD into the project react class versus es6 component and let me clear it and open it into atom the first thing I'm gonna do is I'm gonna remove all the garbage from the app Gaius so we can start working I should sort of load the logo from here and now so what I'm gonna do is I'm gonna create two components one which is class component and the second would be or es6 functional component so let's start with a class component so it's in a source folder I'm going to create a new folder called users and inside the users let's create a new component a new file call users dot J s alright because it's a class-based component we gonna extend it using the react components so we need to import the component library so it's a import react and opponent component from react and since a class-based component we have to say class the name of the component is users extends this component all right and once you create a class we need to export it so it's a export default users and inside the class there's only one method call it render so I would say render and inside I'm just gonna return a div alright so I have my class component and I'm gonna include this in my apt GS so if I go into a PS I have to now import that component so I would have to say import users from now it's gonna be from users folder so I'm gonna say user slash users because we don't use J s it automatically understands because it's a component and - so we have imported it we can use it as an as a tag inside so I can say users and that should do it now let's compile the project and see how it works I should go back to the command line I would say NPM start and that should compile the project and opening on to a port 3000 alright so now I could see that test so it's working so that's I have a habit of just you know doing a little test as I go along so I know if working with Vita before writing too much code and if you're new to react I just understand that when you write a component and you want to make sure that because there's a custom component you want to make sure that it's capitalized so so it can differentiate between a regular HTML tags so here let's see if I had a component called a custom component called there then I can write something like this and it it would know that this is actually a custom component compared to this is a div tag which is an HTML tag which is native also another important thing to notice is that if I'm only one line here I can dis write it like this but if I have multiple lines let's say if I were to do something like this then I would need to do this another important thing is to remember is that you only want to have one main parent tag inside a component so here I have only div I do not want to do this now I have two tags inside no that's if I rendered it if I save it that's it what happens I would get an error saying that must be wrapped in an enclosing tag so that's what basically say needs only one tag I'm having two parent text right now so that's why it's giving you error some browsers they're little flexible they allow it but I would recommend is having one tag and this would enclose all the other tags inside now let's create our es6 functional component now this component would be a sub component to this user's component so we're gonna have a component name user which we which would be one of the users in users component so for that I'm just going to create a new file inside the users call user GS now you can have a GS or GS X file it's fine but the new convention is just to use GS even if you're writing GS x inside all right so here we're not gonna extend it's gonna be pure function but we still need to import react so I would say import react from react that we have to do now we're gonna write a pure function so the name of the function is going to be user but before that let's define it as a Const so we are we get mutated but we cannot replace the entire thing so we're gonna say user equal to and let's write as an error function and unlike the class component we don't have to have a render function we can just simply return the JSX so I would say return and when I say div user slash def so it's very simple however I still have to export it because it's a module I have to import something and export something so I would say export default user and let's use this component inside the users so inside the users I still have to import it as an import users user from user so now I can use this tag inside the users component so instead of test I would simply say user here so now let's see what it renders all right it has rendered the user tag inside now if I want to have multiple users I would simply do this and it would be reused okay now I have four user but these are still very static we need to put some content so we can make it dynamic so in order to make it dynamic let's pass a name of the user so I'm going to do something like this inside I would pass a value of the user name so the name would be here let's say John Jill and I'd say Peter ok now if I render it it still says users because even though I passed it it doesn't the the user component still doesn't know that I have passed it so I do let it know and use it inside the user so if I pass anything like this as a content in an element or component inside the user I can I can use it as a prop because it's automatically available as a prop so in a function component you have to explicitly pass props here and now this prop would have a property called children which would be nothing but this name here so I can say props dot children but I have to use it inside the curly bracket so that sort of like interpolation so now if I look at it it is rendering John Jill and Peter so when I use a functional component I have to use props however inside the class component I automatically have that property that props so here if I want to pass something to users which I can do it through app dodges here I can have a property called title equal to let's say users list and so inside the users I don't really have to pass the props I can simply use this as let's add a title here so in tight inside the div I am going to have an h2 h1 tag this dot props dot title which means whatever I'm passing through grab that title from the now I have a title called users list similarly I can pass properties into the each user let's try age equal to let's say twenty thirty and forty jealous thirty and Peter is forty years old but still it won't show up here because I still need to use it inside the user so I would go inside the user and here I would say say name space and age space or I can use a pipe here so that it looks more presentable and age would be props dot H all right so I go back to the users list I have name which is John and age is showing up by the way if you're still enjoying the video please take a few second and like the video because most of the user don't go all the way to the end so just a reminder and if you do like it thank you alright so the next thing is what if I just wanna what if somebody passes just this without the age so we can fix it inside the user and here we can write some logic so that we know that it doesn't have AIDS so don't display it so here I would say let H equal to let's say props dot age is invalid if valid that props dot H use any and instead of props our age I can use this constant age so now if I go here I would have n a also if there is no if I don't pass the the name here then there is no point of you even having a user right so let's say if I remove this completely there is no point of actually showing this user so I can go here and I can say props dot children then if there are children then do this else return invalid entry or something well in in your practical application that would be a little bit better solution than this but for now we're just gonna use this so now it's showing invalid inch so let's recap the differences between the the class component and an es6 function compliant so obviously you don't have to in the class component you have to import component in the es6 component you don't have to import the imported class component we are obviously extending the component to build a class and es6 you're just simply writing a function also there's no render method here because it's only part of the class second thing is the prompts in the component in the class component this prop is automatically available es6 function component you have to pass as an argument and then you can use prompts and you don't have to do this on prompts and so where do I use class component and where do I use the es6 clock functional components I would suggest use the es6 function component as much as possible however whenever you want to maintain the state you cannot use the functional components because we will look at in the next tutorial how the state works but but you can only use it in the class component the function component doesn't have a way to actually define a state so that is a one thing if you need a container component container component is like the top level component which encloses all other components that is usually written as a class component so here I have the users component which is the top level component and user component which is I would more say it as a presentational complex in the next tutorial we are going to look at States and props in react which is very important and you can follow that tutorial I provide a link at the end of this tutorial and I hope you learned something from this tutorial and if you did please like subscribe and provide a nice comment thank you you

Channel: techsith

Views: 101,717

Rating: 4.9414864 out of 5

Keywords: react components, reactJs, react.js, react 16, react fiber, react 2018, class components, functional components, react lessons, react from scratch, reactjs tutorials, techsith, techsithtube

Id: uGgPINlKqBs

Length: 15min 44sec (944 seconds)

Published: Tue Nov 28 2017