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