right so we’ve got our application set
up let’s create our first component here
so might create a folder let’s call it
components and I’m going to create a
countdown component so that’s gonna be
calm GS so that’s pretty the first
components in this case let’s begin with
a functional component so if you don’t
know the difference between functional
and class-based components basically the
simplest component in react is just
simply a function so to create let’s say
a function here so it’s two Const
countdown I’m going to use an arrow
function and it’s gonna accept props and
it’s basically going to return a JSX
element a react element so in this case
let’s just return a div that’s how a
title new year is coming okay gonna
close that off say that right and so
once you have that set up you would also
need to do it sports default I’m done
because we want to make sure that this
function gets exported so we can import
it in FGS we’re gonna do that next so
let’s to import countdown from it’s
gonna be in fact what I’m gonna do is I
want to comment this out I want to move
up js2 component because app GS is also
a component in itself so that’s kind of
break things up because we need to
adjust the important in – yes to do
components okay that’s gonna be saved
and let’s see how we’re doing yep this
still works
get back here at GS okay so I’m what to
import the account down let’s see so
it’s basically just going to be a count
down our new component here and then
want to have the title let’s do calm
down but I’m pretty sure that this is
not going to work let’s see yep you get
an error and the error basically tells
you that you can’t have two elements
like this so you need to have a a
wrapping element around them so let’s
have a div and we get an error because
we did not import reactant out so that’s
the other thing so the syntax here as
you already seen this index is what’s
known those gsx so JSX very briefly it’s
just simply extension to JavaScript and
it basically allows you to have XML like
syntax in JavaScript so this sort of
like looks like HTML but as we’re gonna
go along I’m not explaining to you that
basically this is not exactly HTML and
in fact the stuff right there the
deadlock with the h1 tag that basically
gets converted to react create element
call so essentially behind the scenes
this is just playing JavaScript in fact
I’m gonna show it to you right now so
let’s go to react.js org and if you look
through some of the examples here you’re
gonna see a link to babble rebel grapple
just stands for read eval print loop I
think right so let’s look at the simple
example right here so we’ve got an
element here
it’s basically a gsx or a react element
it basically describes what needs to be
rendered to the Dom so in this example
we want to render a simple heading to
the Dom that’s gonna be relevant we
assign that to the element variable and
next we have a container so this is just
simply a Adal Helaman through the idea
of route
the spacing so that makes more sense
like so we get the element we store it
in the container variable and then we
just call react render to renter that
element that we just created the hitting
right to render it to the container root
element so this is where the element
block is going to be mounted to and as
you can see here on the right what this
gets converted to so the blog of JSX
code that we wrote it gets converted to
a call to react create element and this
is what the code is basically going to
look like once we compile JSX with bable
bable is just basically going to replace
all of the instances of this code right
that looks like HTML or xml but Billy
isn’t and it’s going to convert it to
react create element so the first
argument would pass is going to be a
string so that’s the h1 tag the second
one is going to be the object that’s
going to contain all of the properties
on that on that element and the last one
we pass the text note so let’s say we
wanted to add a class here and the other
thing to keep in mind is that JSX is the
extension of JavaScript not HTML so in
this case I can’t use the class right
because the class is a reserved keyword
in JavaScript we use classes to create
classes like let’s say class human right
that’s just going to be a class and
that’s going to be converted to a
function of the yet once once it’s
compiled with Babel right so class is a
reserved keyword so instead we use
what’s known as class name you might
have seen it before if you’ve been
working with just plain Dom elements
right if you have let c
document.getelementbyid e if you wanted
to modify that last name on that element
you would just simply do just copy that
you just do class name equals and then
you assign it to whatever you want right
so we used class name instead of class
and JavaScript so we do what’s a class
name heading and as you can see we get
the class name on the right so this is
going to be the object containing all
the properties of that element you might
let’s say id equals heading1 or
something and that property is also
going to be part of that same object now
let’s say that inside of the h1 tag you
also wanted to have some children so
let’s say you wanted to have a span and
that’s gonna be just hello or something
[Music]
and as you can see right there instead
of just a simple text note we get
another react create element call so the
purpose here is just to show you that
all of the the JSX attacks that you see
right there it basically gets compiled
to react create element behind the
scenes so back to the editor and like I
said we forgot to inform we yet from
react okay so that’s the only thing and
I think it shouldn’t work from that on
let’s go back yep that seems to be
working fine right so the other thing
here is because we’re gonna have a
countdown timer right but basically I’ll
have a few sections or boxes where you
have like days hours minutes and seconds
we’re gonna need some styling here and I
don’t wanna make this course about CSS
so I think what I’m gonna do is I’m just
gonna import a library so one of the
cool CSS libraries that I’ve been
working on in the past is boma so boom
is just a cool CSS framework that works
kind of the same as push up but it
basically has all at different elements
that you can think of you know buttons
items images
there’s also components like modal’s
dropdowns cards and of course the
regular layouts and the cool thing is
that the library is also based on the
Flex box model and CSS so it’s pretty
versatile if you were to look at the
column section it’s pretty easy to use
as you’re gonna see if you had a bunch
of columns so I’m going to use that
library I’m gonna do is I’m going to
stop the server here so do NPM I – s
hold on
so this is basically the same as doing
NPM install – gotta say alright it’s
and that’s basically going to install
the library for us and in the meantime
I’m going to go back to the website
let’s open it up and I’m going to go to
the documents I want to go to layouts
and the heroes I want to use the hero
banner for the countdown timer so let’s
see that’s finished up I’m just gonna do
NPM start but so back in the error and
the next thing I’m going to do is my go
to node modules I’m gonna find the boom
uh library that we got installed here so
I’m gonna do let’s go to index
let’s do import boom on CSS boom uh dot
CSS so that should basically apply all
the styling and as you can see right
there it the styling got applied and the
design got changed already
so what I’m gonna do is I’m gonna go to
app GS so we got there calm down here
let’s go to that countdown and in fact
what I’m gonna do is let’s go let’s
scroll down here so I’m gonna find a
full height here oh let’s see so yeah I
think we’re gonna use this one so this
is basically going to be a section
what’s going here to countdown
someone replace to do with this set of
code just to do let’s indent a little
bit and the next thing I’m gonna do is
which we’ve got classes here so that’s
not going to work in fact if you try to
save it go back you’re gonna see that
yep that breaks invalid property class
so we gotta replace that so I’m gonna do
is replace the glass with a class name
it glaze all
and this should work okay so that looks
fine and then back in app she has a
thing I’m on a little feed title you
don’t need it so we’re just gonna have
to count down and this is what the countdown is going to look like
up let’s create our first component here
so might create a folder let’s call it
components and I’m going to create a
countdown component so that’s gonna be
calm GS so that’s pretty the first
components in this case let’s begin with
a functional component so if you don’t
know the difference between functional
and class-based components basically the
simplest component in react is just
simply a function so to create let’s say
a function here so it’s two Const
countdown I’m going to use an arrow
function and it’s gonna accept props and
it’s basically going to return a JSX
element a react element so in this case
let’s just return a div that’s how a
title new year is coming okay gonna
close that off say that right and so
once you have that set up you would also
need to do it sports default I’m done
because we want to make sure that this
function gets exported so we can import
it in FGS we’re gonna do that next so
let’s to import countdown from it’s
gonna be in fact what I’m gonna do is I
want to comment this out I want to move
up js2 component because app GS is also
a component in itself so that’s kind of
break things up because we need to
adjust the important in – yes to do
components okay that’s gonna be saved
and let’s see how we’re doing yep this
still works
get back here at GS okay so I’m what to
import the account down let’s see so
it’s basically just going to be a count
down our new component here and then
want to have the title let’s do calm
down but I’m pretty sure that this is
not going to work let’s see yep you get
an error and the error basically tells
you that you can’t have two elements
like this so you need to have a a
wrapping element around them so let’s
have a div and we get an error because
we did not import reactant out so that’s
the other thing so the syntax here as
you already seen this index is what’s
known those gsx so JSX very briefly it’s
just simply extension to JavaScript and
it basically allows you to have XML like
syntax in JavaScript so this sort of
like looks like HTML but as we’re gonna
go along I’m not explaining to you that
basically this is not exactly HTML and
in fact the stuff right there the
deadlock with the h1 tag that basically
gets converted to react create element
call so essentially behind the scenes
this is just playing JavaScript in fact
I’m gonna show it to you right now so
let’s go to react.js org and if you look
through some of the examples here you’re
gonna see a link to babble rebel grapple
just stands for read eval print loop I
think right so let’s look at the simple
example right here so we’ve got an
element here
it’s basically a gsx or a react element
it basically describes what needs to be
rendered to the Dom so in this example
we want to render a simple heading to
the Dom that’s gonna be relevant we
assign that to the element variable and
next we have a container so this is just
simply a Adal Helaman through the idea
of route
the spacing so that makes more sense
like so we get the element we store it
in the container variable and then we
just call react render to renter that
element that we just created the hitting
right to render it to the container root
element so this is where the element
block is going to be mounted to and as
you can see here on the right what this
gets converted to so the blog of JSX
code that we wrote it gets converted to
a call to react create element and this
is what the code is basically going to
look like once we compile JSX with bable
bable is just basically going to replace
all of the instances of this code right
that looks like HTML or xml but Billy
isn’t and it’s going to convert it to
react create element so the first
argument would pass is going to be a
string so that’s the h1 tag the second
one is going to be the object that’s
going to contain all of the properties
on that on that element and the last one
we pass the text note so let’s say we
wanted to add a class here and the other
thing to keep in mind is that JSX is the
extension of JavaScript not HTML so in
this case I can’t use the class right
because the class is a reserved keyword
in JavaScript we use classes to create
classes like let’s say class human right
that’s just going to be a class and
that’s going to be converted to a
function of the yet once once it’s
compiled with Babel right so class is a
reserved keyword so instead we use
what’s known as class name you might
have seen it before if you’ve been
working with just plain Dom elements
right if you have let c
document.getelementbyid e if you wanted
to modify that last name on that element
you would just simply do just copy that
you just do class name equals and then
you assign it to whatever you want right
so we used class name instead of class
and JavaScript so we do what’s a class
name heading and as you can see we get
the class name on the right so this is
going to be the object containing all
the properties of that element you might
let’s say id equals heading1 or
something and that property is also
going to be part of that same object now
let’s say that inside of the h1 tag you
also wanted to have some children so
let’s say you wanted to have a span and
that’s gonna be just hello or something
[Music]
and as you can see right there instead
of just a simple text note we get
another react create element call so the
purpose here is just to show you that
all of the the JSX attacks that you see
right there it basically gets compiled
to react create element behind the
scenes so back to the editor and like I
said we forgot to inform we yet from
react okay so that’s the only thing and
I think it shouldn’t work from that on
let’s go back yep that seems to be
working fine right so the other thing
here is because we’re gonna have a
countdown timer right but basically I’ll
have a few sections or boxes where you
have like days hours minutes and seconds
we’re gonna need some styling here and I
don’t wanna make this course about CSS
so I think what I’m gonna do is I’m just
gonna import a library so one of the
cool CSS libraries that I’ve been
working on in the past is boma so boom
is just a cool CSS framework that works
kind of the same as push up but it
basically has all at different elements
that you can think of you know buttons
items images
there’s also components like modal’s
dropdowns cards and of course the
regular layouts and the cool thing is
that the library is also based on the
Flex box model and CSS so it’s pretty
versatile if you were to look at the
column section it’s pretty easy to use
as you’re gonna see if you had a bunch
of columns so I’m going to use that
library I’m gonna do is I’m going to
stop the server here so do NPM I – s
hold on
so this is basically the same as doing
NPM install – gotta say alright it’s
and that’s basically going to install
the library for us and in the meantime
I’m going to go back to the website
let’s open it up and I’m going to go to
the documents I want to go to layouts
and the heroes I want to use the hero
banner for the countdown timer so let’s
see that’s finished up I’m just gonna do
NPM start but so back in the error and
the next thing I’m going to do is my go
to node modules I’m gonna find the boom
uh library that we got installed here so
I’m gonna do let’s go to index
let’s do import boom on CSS boom uh dot
CSS so that should basically apply all
the styling and as you can see right
there it the styling got applied and the
design got changed already
so what I’m gonna do is I’m gonna go to
app GS so we got there calm down here
let’s go to that countdown and in fact
what I’m gonna do is let’s go let’s
scroll down here so I’m gonna find a
full height here oh let’s see so yeah I
think we’re gonna use this one so this
is basically going to be a section
what’s going here to countdown
someone replace to do with this set of
code just to do let’s indent a little
bit and the next thing I’m gonna do is
which we’ve got classes here so that’s
not going to work in fact if you try to
save it go back you’re gonna see that
yep that breaks invalid property class
so we gotta replace that so I’m gonna do
is replace the glass with a class name
it glaze all
and this should work okay so that looks
fine and then back in app she has a
thing I’m on a little feed title you
don’t need it so we’re just gonna have
to count down and this is what the countdown is going to look like
Please follow and like us: