hey guys welcome back one thing we
forgot when do manufacturing in the last
video is we forgot to refactor the app
component now at this moment the app
component is a stateful component
meaning that it’s basically created as a
class and it works perfectly fine
there’s no issues with the app
whatsoever become dull timer works just
fine but if you watch the previous
episode so you probably heard me saying
that one of the disadvantages of
stateful components is that they’re a
bit slower than the functional
components and although we get a lot of
benefits from the lifecycle hooks and
all the other functionality stateful
components are still a bit slower than
functional components so without further
ado let’s just convert this component to
a functional component so what I’m gonna
do is I’m gonna say constant F equals
let’s do in this case let’s have props
although we don’t have any props we’re
not passing any props from index.js
right well but we could but let’s just
have that and let’s do a turn actually
are just going to put this countdown
directly like so so this is going to be
an error function that basically returns
a countdown and I’m gonna remove the old
code like so but save it let’s go back
to the browser this is still going to
work now of course we have a warning the
component here a named import we know
what we’re needed so I’ll just kill it
and let’s say that now as you can see
here the app component itself is sort of
superficial or you might say useless
here because it’s really not doing
anything it’s sort of like a wrapper for
the countdown component the a countdown
component is where the needs of the
project reside at this point it’s sort
of like just a wrapper around the
countdown component which actually
houses all the internal logic of the
application so one thing you could do is
you could just simply remove the app
component right so what we could do is
instead of importing the app in here we
could have just imported the countdown
itself and the application until it
functional we’ll be fine but when it
comes to larger applications typically
you have more than one component so
countdown is one but you might have
other ones you know you might have an
application that has a navigation bar
you know a footer or you might have you
know other components or as other
behaviors that you want to include in
that case it would make sense to have
the app component and the app component
would basically act as a wrapper or
basically as a glue for all those
different components that you want to
glue up together to tie up together in a
single application in that sense it
makes a lot of sense to have the app
component for now I’m just gonna keep it
because typically for most projects you
have it but like I said again it’s up to
you and if you don’t want to clog your
application with that extra component or
extra wrapper you can just simply move
it it’s up to you but so with that out
of the way let’s move on to forms and
react so what I’m gonna do is I’m gonna
create a new file here and let’s call it
date picker is now the idea here for the
date picker I like I mention in the
previous video is they want to have a
form and want to have an input where you
type a date you click Submit and then
that date is going to be used in the
calculation of the countdown timer right
so instead of having the date of now and
the date of New Year we want to replace
the new year date with the date that the
user types to the input box so we’re
gonna have to refactor there quite a bit
but we’re gonna start with the date
picker so the first thing we’ll do let’s
do import react from react next let’s
create the component leads to constant
date picker will be a functional
component for now and let’s see so we’re
using boma here in this project so I’m
going to go to the Puma documentation
and let’s go to let’s see Docs let’s go
to form if you scroll down there’s
obviously a lot of different examples
here the one that I’m looking for is the
one that basically uses an input with a
button so let’s just copy this block of
code it’s basically a field that
contains two paragraphs one of the
paragraphs contains the input the other
one will include a button this is
precisely what we want we’re gonna take
it a little bit but let’s let’s just put
it in for now
the fix the indentation here and the
reason you see mismatch of colors is
because in react whenever you have a tag
it always needs to be closed it’s a bit
different from HTML because HTML is more
permissive and it’s actually going to
forgive you for let’s say not closing
tags properly like for example here I
have a div in normal HTML if I didn’t
happy closing early closing forward
slash it would still work in normal HTML
but it’s not going to work in react and
like I said the reason you have color
mismatch here is because we need to
close the input right there I need to
put the forward slash and this and this
rule applies to things like image tags
and things of that nature but so we’re
gonna save that and of course like I
said we need to replace classes with
class name very important because we’re
using gsx here and class is a reserved
keyword in Java scripture refers to any
a sixth class the keyword itself was
reserved even in es5 but it was actually
being used as a way at 6 for classes so
we need to replace that so with that
being saved let’s go to index yes so
that’s actually move moment here to the
top and for component let’s do report
date picker from David’s vicar
now let’s go down let’s see so we’re
probably going to put the date picker
just below that timer so did date picker
close it off again you have to close the
tag be careful don’t forget the forward
slash and let’s go back to the browser
okay export default okay I think we
forgot to put export statement of course
export default date picker and there we
go so the reason that the date picker it
takes full width is because of the class
that we added actually I’m going to
remove is expanded this will make the
input box as well as the button expand
as much as possible it’s not exactly
what we want so I’m going to kill that
for now
and let’s actually Center this now there
is the class for centering groups let’s
actually look for that class in the
documentation centered I’m just gonna
put it – has at on center let’s see
let’s keep searching there we go it’s
group centered I think we’ve used this
class before so if I apply that class to
the field let’s do this grouped centered
okay let’s say that if we go back the
the fuel is basically going to be
centered just like we wanted and as you
can see here would be nice if we were
able to add some margin at the bottom or
padding for that matter I think what I’m
gonna do is we’re just gonna go back to
the editor in a second but if I went to
add let’s say 40 pixels yeah I think
that would look much better let’s
actually go back what I’m gonna do here
is I’m going to add a style property now
the style is similar to the inline
styling that you would typically do in
HTML and of course we could create a
separate CSS file and then import that
file to apply the styling but at this
point there’s only one simple style
didn’t want to apply we just want to set
margin bottom let’s say we wanted to
have at 40 pixels yeah I think this is
pretty much it I don’t need to create a
separate file for that so inline styling
again there’s pros and cons to that but
I think it’s just fine for now so I’m
gonna keep it that way and here we need
to be careful because okay so the thing
is when you put two curly braces this is
basically going to expect an expression
so the expression that we need is an
object so in this case you need to put
the code races again and these curly
braces represent the object the object
has a property margin bottom set to 40
and of course besides that you could
also do you know forty pixels it’s going
to have the exact same effect and you
could remove it it’s just going to
default to pixels by itself now let’s
continue tweaking the styling here one
thing I’ll do is need type attribute is
optional so we don’t actually need to
include it we don’t have to
and then I’ll do let’s say sighs a date
for the placeholder next I’ll do let’s
say is medium that’s gonna make the
input a little bit larger
there’s also another class that’s been
added in version zero six two and this
class is gold is rounded and that’s
gonna make the input rounded like this
so I’m just gonna add that class all so
let’s do is rounded and for the button
I’m going to do let’s do is light let’s
see how this works okay so the input is
going to be around it the button is
going to be light also a class is out of
mind and I’m also gonna add a class
let’s do is medium as well as is
grounded and of course if you are
confused about the classes feel free to
go back to the documentation
specifically for buttons you would go to
elements button but see the rounded
we’ve already used this class before but
this is just basically going to make the
button rounded for the colors there’s a
bunch of them let’s see you have primary
you have primary you have link you have
in full success warning danger
but there’s also you know white light
dark black and a simple text and lastly
the one I used is also is outlined this
is just basically going to apply that
that type of styling to the button and
this is safe let’s go back to the app
this is what it looks like so we have an
input and we have a button let’s rename
the button but to instead of search list
to reset and also I’m not going to have
an anchor I’m actually going to have a
button okay and next I’d like this to be
a form as well so it’s to form
everything else in here is going to be
wrapped inside of that form so let’s
plug this div let’s inject it in there
okay let’s say that and there we go this
is a form with an input like this and also a button
forgot when do manufacturing in the last
video is we forgot to refactor the app
component now at this moment the app
component is a stateful component
meaning that it’s basically created as a
class and it works perfectly fine
there’s no issues with the app
whatsoever become dull timer works just
fine but if you watch the previous
episode so you probably heard me saying
that one of the disadvantages of
stateful components is that they’re a
bit slower than the functional
components and although we get a lot of
benefits from the lifecycle hooks and
all the other functionality stateful
components are still a bit slower than
functional components so without further
ado let’s just convert this component to
a functional component so what I’m gonna
do is I’m gonna say constant F equals
let’s do in this case let’s have props
although we don’t have any props we’re
not passing any props from index.js
right well but we could but let’s just
have that and let’s do a turn actually
are just going to put this countdown
directly like so so this is going to be
an error function that basically returns
a countdown and I’m gonna remove the old
code like so but save it let’s go back
to the browser this is still going to
work now of course we have a warning the
component here a named import we know
what we’re needed so I’ll just kill it
and let’s say that now as you can see
here the app component itself is sort of
superficial or you might say useless
here because it’s really not doing
anything it’s sort of like a wrapper for
the countdown component the a countdown
component is where the needs of the
project reside at this point it’s sort
of like just a wrapper around the
countdown component which actually
houses all the internal logic of the
application so one thing you could do is
you could just simply remove the app
component right so what we could do is
instead of importing the app in here we
could have just imported the countdown
itself and the application until it
functional we’ll be fine but when it
comes to larger applications typically
you have more than one component so
countdown is one but you might have
other ones you know you might have an
application that has a navigation bar
you know a footer or you might have you
know other components or as other
behaviors that you want to include in
that case it would make sense to have
the app component and the app component
would basically act as a wrapper or
basically as a glue for all those
different components that you want to
glue up together to tie up together in a
single application in that sense it
makes a lot of sense to have the app
component for now I’m just gonna keep it
because typically for most projects you
have it but like I said again it’s up to
you and if you don’t want to clog your
application with that extra component or
extra wrapper you can just simply move
it it’s up to you but so with that out
of the way let’s move on to forms and
react so what I’m gonna do is I’m gonna
create a new file here and let’s call it
date picker is now the idea here for the
date picker I like I mention in the
previous video is they want to have a
form and want to have an input where you
type a date you click Submit and then
that date is going to be used in the
calculation of the countdown timer right
so instead of having the date of now and
the date of New Year we want to replace
the new year date with the date that the
user types to the input box so we’re
gonna have to refactor there quite a bit
but we’re gonna start with the date
picker so the first thing we’ll do let’s
do import react from react next let’s
create the component leads to constant
date picker will be a functional
component for now and let’s see so we’re
using boma here in this project so I’m
going to go to the Puma documentation
and let’s go to let’s see Docs let’s go
to form if you scroll down there’s
obviously a lot of different examples
here the one that I’m looking for is the
one that basically uses an input with a
button so let’s just copy this block of
code it’s basically a field that
contains two paragraphs one of the
paragraphs contains the input the other
one will include a button this is
precisely what we want we’re gonna take
it a little bit but let’s let’s just put
it in for now
the fix the indentation here and the
reason you see mismatch of colors is
because in react whenever you have a tag
it always needs to be closed it’s a bit
different from HTML because HTML is more
permissive and it’s actually going to
forgive you for let’s say not closing
tags properly like for example here I
have a div in normal HTML if I didn’t
happy closing early closing forward
slash it would still work in normal HTML
but it’s not going to work in react and
like I said the reason you have color
mismatch here is because we need to
close the input right there I need to
put the forward slash and this and this
rule applies to things like image tags
and things of that nature but so we’re
gonna save that and of course like I
said we need to replace classes with
class name very important because we’re
using gsx here and class is a reserved
keyword in Java scripture refers to any
a sixth class the keyword itself was
reserved even in es5 but it was actually
being used as a way at 6 for classes so
we need to replace that so with that
being saved let’s go to index yes so
that’s actually move moment here to the
top and for component let’s do report
date picker from David’s vicar
now let’s go down let’s see so we’re
probably going to put the date picker
just below that timer so did date picker
close it off again you have to close the
tag be careful don’t forget the forward
slash and let’s go back to the browser
okay export default okay I think we
forgot to put export statement of course
export default date picker and there we
go so the reason that the date picker it
takes full width is because of the class
that we added actually I’m going to
remove is expanded this will make the
input box as well as the button expand
as much as possible it’s not exactly
what we want so I’m going to kill that
for now
and let’s actually Center this now there
is the class for centering groups let’s
actually look for that class in the
documentation centered I’m just gonna
put it – has at on center let’s see
let’s keep searching there we go it’s
group centered I think we’ve used this
class before so if I apply that class to
the field let’s do this grouped centered
okay let’s say that if we go back the
the fuel is basically going to be
centered just like we wanted and as you
can see here would be nice if we were
able to add some margin at the bottom or
padding for that matter I think what I’m
gonna do is we’re just gonna go back to
the editor in a second but if I went to
add let’s say 40 pixels yeah I think
that would look much better let’s
actually go back what I’m gonna do here
is I’m going to add a style property now
the style is similar to the inline
styling that you would typically do in
HTML and of course we could create a
separate CSS file and then import that
file to apply the styling but at this
point there’s only one simple style
didn’t want to apply we just want to set
margin bottom let’s say we wanted to
have at 40 pixels yeah I think this is
pretty much it I don’t need to create a
separate file for that so inline styling
again there’s pros and cons to that but
I think it’s just fine for now so I’m
gonna keep it that way and here we need
to be careful because okay so the thing
is when you put two curly braces this is
basically going to expect an expression
so the expression that we need is an
object so in this case you need to put
the code races again and these curly
braces represent the object the object
has a property margin bottom set to 40
and of course besides that you could
also do you know forty pixels it’s going
to have the exact same effect and you
could remove it it’s just going to
default to pixels by itself now let’s
continue tweaking the styling here one
thing I’ll do is need type attribute is
optional so we don’t actually need to
include it we don’t have to
and then I’ll do let’s say sighs a date
for the placeholder next I’ll do let’s
say is medium that’s gonna make the
input a little bit larger
there’s also another class that’s been
added in version zero six two and this
class is gold is rounded and that’s
gonna make the input rounded like this
so I’m just gonna add that class all so
let’s do is rounded and for the button
I’m going to do let’s do is light let’s
see how this works okay so the input is
going to be around it the button is
going to be light also a class is out of
mind and I’m also gonna add a class
let’s do is medium as well as is
grounded and of course if you are
confused about the classes feel free to
go back to the documentation
specifically for buttons you would go to
elements button but see the rounded
we’ve already used this class before but
this is just basically going to make the
button rounded for the colors there’s a
bunch of them let’s see you have primary
you have primary you have link you have
in full success warning danger
but there’s also you know white light
dark black and a simple text and lastly
the one I used is also is outlined this
is just basically going to apply that
that type of styling to the button and
this is safe let’s go back to the app
this is what it looks like so we have an
input and we have a button let’s rename
the button but to instead of search list
to reset and also I’m not going to have
an anchor I’m actually going to have a
button okay and next I’d like this to be
a form as well so it’s to form
everything else in here is going to be
wrapped inside of that form so let’s
plug this div let’s inject it in there
okay let’s say that and there we go this
is a form with an input like this and also a button
Please follow and like us: