it’s a window from this point on is
we’re actually going to use this set up
in order to be able to use material UI
so the first thing we’ll do is we’ll
work on the header component so back in
the documentation if you go to component
demos app bar you can see that we have
several demo app bars over here so the
one I’m actually using is this one and
if you click on the source icon over
there you’re gonna be able to see the
actual source of this component now the
component structure itself is using the
app bar wrapper and it’s also using the
tool bar and then under that you
basically include all your content so
they have the icon but you also have the
diaper ography over here in the title
and they have a login button as well so
we’re gonna be using a similar set up
what I’m gonna do is I’m just gonna copy
over that markup and back to header GS
so we’re not gonna have any dip over
here instead we’re gonna have an app bar
and of course in this case we need to
import the F bar so this is where
material UI actually comes in now the
way you would do this as you can see in
the ducts is one thing to do is you
could import them separately so let’s
begin with the app bar component so
we’re gonna import that bar from
material UI / app bar the slash bar is
actually important in this case so we’re
looking for the app bar component of
material UI but there’s also an
alternative way to import elements is
I’m going to show you in a few seconds
but for now let’s also import the
toolbar from material UI UI / toolbar I
believe I’m gonna save that and in this
scenario I’m just gonna kill all the
inner stuff for now this is what its
gonna look like and like I said there’s
also an alternative to this approach so
whenever you import multiple elements
from material UI as you can see over
here they have the app bar toolbar as
well as the typography element that
gonna be used for text the one thing you
can do is instead of using the full
imports from different sections or
segments of that library for different
UI elements you could also import them
using the named import so in this case
I’m just gonna import the app bar as
well as the tool bar using the named
import but in this case I’m just gonna
import them directly from a material UI
and in this case we can kill it the
second line and save it and it’s gonna
give us the same output and of course
it’s not enough
we’re also want to be able to use a
broker filament now an important note
what needs to be said about the text
fonts over here in this library so the
way we work with text and material UI is
that we actually depend on several
different font sizes so of course you
have access to CSS and in fact what the
library does is it actually uses CSS and
GS approach instead of something like
less or sass as you might be familiar
with but and other frameworks like
bootstrap or bulla or anything like that
instead of actually relying on anything
of that sort what the library does it
uses the old GS s or CSS and JavaScript
approach now of course you are able to
manipulate font sizes yourself but
there’s already built in default styles
or sizes that you can use so for
instance they have different sizes for
titles or display this one for headline
there’s one for title and then there’s a
bunch of other ones for the normal text
let’s say the body text all of you in
your application and as you can see here
the element there’s only one component
or UI element that we would use for text
and it’s called typography the way you
manipulate this size of typography is by
the variant property on that on that
component this is as you can imagine
this is just a normal component because
the material library itself uses react
under the hood so all the different
components in the you see over here so
the tab bar the tool bar those are just
normal we add components this is just
that their style and they already have
built in behavior that’s
concealed behind the scenes in the
library itself
okay so like I said we’re gonna be using
the typography elements so let me just
copy one back in here and just base it
in there and we’re just gonna say
exercise database now of course as you
might expect me to import the typography
element now as you can see this is
pretty big so we can use something
different so let’s use let’s say
headline or now instead of display for
let’s use the headline it different
variant is going to give you a different
text size as well okay and I’m gonna
move the gutter bottom as well so this
is gonna set it a little bit and the one
thing we’ll do is it will also have the
color property and I’m gonna set it to
in Garrett now when it comes to
different properties as you can see here
to change the color to white so it
inherited the color from the root or the
parent component whenever you’re not
sure about the different properties that
the API exposes make sure to go back to
the documentation click on component API
and look for the specific element that
you have in mind so in this case I’m
looking for typography it’s gonna be
somewhere at the bottom and as you can
see here only typography page we have a
list of different properties that we can
use so for instance we were to use the
variant property as you saw and that’s
the property over here that allows us to
manipulate the size of the typography
element and we’ve got different options
as you can see we’ve got displays from
one to four we’ve got titles subheadings
body button and a few other ones and
besides that of course as you might
expect there’s classes property so you
could pass different classes to your
typical element there is the component
allows you to manipulate the component
the underlying component per girl for
out there’s a bunch of other ones but
the one I’m interested in actually for
now is the color property so we use the
inherit value for that color property
and as you might expect it’s not it
doesn’t require any brain science it
just uses it just allows you to set the
color of the text or that typography
love it and I think this is good for now
we’re gonna save that for the header and
in the footer element back in here so
what I’m gonna do next is let’s close
off all of the other
and for the footer what I’d like to use
is actually tabs so let me go back to
the documentation and let me click on
tabs so when it comes to tabs actually
the one that I’d like to use is this one
so we’re going to be able to use these
different tabs we’re probably going out
more than three but these ones are
actually going to be useful because
they’re gonna allow us to switch between
different views and it’s going to make
sense eventually once we dive into the
exercises so the actual meat of the
application but for now what I’m gonna
do is I’m actually gonna just copy over
that markup and I’m going to replace
everything that we have in the forum
whether that markup and of course we
need to import all the different
elements so what’s important to let’s
import tags from material UI and okay
and when it comes to tabs like
individual tabs we actually have to use
a bit of a different important because
we need to import them from material UI
/ tabs because this is a subcomponent
for those tabs in fact to check based on
the import statement over here so that’s
what I’m basically doing and I’m putting
the tab but the tabs can be part of the
same important name important for
material UI now I’m going to remove the
class name for now I’m also consuming
the value and the on change for now so
we’re gonna save that and this is what
it looks like now actually for the value
this value needs to be an index so
anything from 0 up to the number of
elements that you have -1 so in this
case we have 3 so I could use either 0 1
or 2 and if you refresh the page like I
said in some cases you actually need to
do that it’s kind of painful but if you
refresh the page you can see that the
first item is being underlined as you
might expect now if you change it to
let’s say 1 the second one is gonna be
underlined and of course – that’s gonna
affect the last ones I’m going to set it
to 0 for now and this is basically it
now that can excercises index.js file
this is basically the file that’s going
to house all the business logic for the
application what I’m going to do for now
is we’re actually going to reach out to
the grid component so we go to layout
let’s expand the example over here and
let’s see how this allows us to use the
grid component in material UI so what
I’m looking for is actually being able
to split the screen into two separate
elements and actually back and footer
and just a simple side note so we use
the tabs element of course but I wrapped
it into the paper or element the paper
element is sort of like a panel that
looks like a paper it does have a box a
shadow as you can see and I’m actually
going to use that element for the two
panes so like the left pane and the
right pane that we’re gonna put in the
middle instead of the exercise hello for
exercises h1 tag or whatever we have so
back in the docs here like I said what
we’re actually looking for is being able
to split the display into two sides two
elements two columns as you might call
them if you use something like bootstrap
so if we’re not just going to have the
grid element and let’s also import that
grip from maturity-wise
okay wrong material you I am now the
grid itself cannot be used like that so
it either has to be a container that’s
going to be the container element or it
could also be an item okay which means
that it’s basically a child element so
let’s say this is going to be the left
pane let’s also have the right pane over
there okay let’s say that and the reason
that you actually don’t see them taking
a full-width like taking 50% each is
because we did not specify the size of
those elements so when it comes to
maturity why there’s actually five
built-in breakpoints if you go back to
layout basics you can see that they have
the extra small small medium large and
extra large elements over here and those
obviously correspond to different sizes
or breakpoints based on the device width
okay so back in the greater the one
thing what you do is we can simply set
the size so I’m going to set it to small
okay
said it’s small for both of the items
and as you can see here they’re gonna
take 50% of the weapon because they’re
basically be adjusted automatically the
other thing you could do is if you look
at the documentation you would actually
set it manually so you could set this
size on the container for instance let’s
set it to small 12 and as you probably
guessed the framework or the library
itself uses a 12 column layout similar
to Bushra or Bulma just about any other
library that uses grid setup and by the
way it’s also using the Flex box model
but back in our application here the
other thing we would do is of course you
could set the other one to for us the
six okay and the second one of course
you would also set it to six but as you
can see here that’s actually not
necessary if I switch back and undo all
those steps say the file as you can see
we’re gonna get the exact same output
the cool thing about the automatic
sizing is that we can actually add more
elements and the display is gonna be
adjusted automatically so that you don’t
actually have to set these sizes
manually okay now what I’m gonna do next
is I’m gonna have a paper elements over
here okay let’s close it off what’s also
important paper from the framework okay
let’s have the same thing at the bottom
on the left but I’m just gonna do is I’m
gonna say left pane and on the right
that’s gonna be the same thing except
right pane yeah and once we save that
this is what it looks like the other
thing I’ll do is let’s also add styles
over here so nothing in fancy really I’m
just going to have an object with a
property hold paper and this one’s gonna
hold some CSS that I’d like to add very
primitive for now and as you’re gonna
see there’s multiple ways to go about
styling so as I’ve mentioned multiple
times the library uses GSS so it’s a an
interesting solution to CSS or styling
in your react projects in general but
for now I’m just gonna use inline
styling and it just like
to set padding at 220 in fact what I’m
gonna do is I’m actually gonna get that
and I’m just gonna set it directly on
the paper element itself so I’m gonna
set style to that object
what’s it padding 220 okay for both of
them actually and I’m just gonna use
inline styling for now because we don’t
actually have that many styles I think
that’s fine for now let’s also add
margin so we set it to 10 pixels margin
bottom to 10 and let’s do the same thing
for the second one as well but I copy
them and paste in fact at this point
because this is duplicated I’m actually
going to create a separate variable so
this is very flexible make sure to do
this based on your needs as you as you
were progressing as you’re building out
your app if it’s getting ugly if it’s
getting duplicated make sure to use
variables use wherever you can there’s
also other approaches like I mentioned
we’re gonna explore them as we go along
but inline styling for now is exactly
what we need so this is the basic
skeleton as you can see we’ve got two
panes in fact the very last thing I’ll
do is I’m actually gonna export them to
separate files so let’s create a left
pane yes let’s also create another file
right pane
yes so the idea is basically for now the
index she has what it’s actually going
to be is a functional component that
receives data from a PS file okay and
the other panes are basically going to
be separate elements than that contain
all of the logic necessary to be
displayed so I’m going to move the left
pane as
I expect to wet theme itself and this
element or this module is going to
import react from react as always and
it’s going to exploit the faults the
function that’s going to receive props
and it’s just going to have a purple of
Bieber element inside of it and we’re
gonna need that paper element import and
the file as well let’s get rid of that
grid not using that now for the styling
gets a little bit trickier I think what
we’re gonna do is we’re actually gonna
pass in these styles as the property so
let’s have the left pane and the styles
are gonna be the properties just going
to refer to that object and be confident
that we created and we can I have a
similar concept for the right pane but
of course it’s going to have a different
content so I can just correct that left
right right pane okay even both need to
be imported obviously we still need the
grid but we no longer need the paper for
now at least
so when I remove that lets it import
left Mina from left pane okay and let’s
also import right home right and here
this style is not defined let’s actually
be structured so I’m gonna take it from
the Styles property passed down and
we’re gonna get the paper elements okay
this is already good so let’s say for
that let’s go back to right pane and in
here I’m just gonna say right thing
everything else stays the same good
right so having this Kelton we can
actually move on to implementing the
logic of the application I’m gonna stop
here for now this is going to be a
multi-part series and we’re gonna
continue next week and we’re actually
going to build out the application you
have a list of exercises on there on the
left so it’s basically going to be
exercises organized by category and on
the right we’re actually going to have a
simple view that allows us to see the
title the description and maybe some of
the other details pertaining to that
specific exercise so you will be able to
select the exercise on the left from the
list
and when it comes to the bottoms when it
comes to the buttons at the bottom
you’re actually gonna be able to switch
to different views in the application
maybe we’re gonna basically when you
click on different different categories
these are going to be like different
categories of the exercises once you
click on them you’re going to be able to
switch between the views and sort the OS
top exercises based on the selected
category and besides that the force
we’re gonna add functionality to add
different exercises out of them delete
and probably some of the other
functionality as well but for now we’re
gonna stop at this point so I hope you
enjoy the tutorial and I’m gonna see you next week bye
we’re actually going to use this set up
in order to be able to use material UI
so the first thing we’ll do is we’ll
work on the header component so back in
the documentation if you go to component
demos app bar you can see that we have
several demo app bars over here so the
one I’m actually using is this one and
if you click on the source icon over
there you’re gonna be able to see the
actual source of this component now the
component structure itself is using the
app bar wrapper and it’s also using the
tool bar and then under that you
basically include all your content so
they have the icon but you also have the
diaper ography over here in the title
and they have a login button as well so
we’re gonna be using a similar set up
what I’m gonna do is I’m just gonna copy
over that markup and back to header GS
so we’re not gonna have any dip over
here instead we’re gonna have an app bar
and of course in this case we need to
import the F bar so this is where
material UI actually comes in now the
way you would do this as you can see in
the ducts is one thing to do is you
could import them separately so let’s
begin with the app bar component so
we’re gonna import that bar from
material UI / app bar the slash bar is
actually important in this case so we’re
looking for the app bar component of
material UI but there’s also an
alternative way to import elements is
I’m going to show you in a few seconds
but for now let’s also import the
toolbar from material UI UI / toolbar I
believe I’m gonna save that and in this
scenario I’m just gonna kill all the
inner stuff for now this is what its
gonna look like and like I said there’s
also an alternative to this approach so
whenever you import multiple elements
from material UI as you can see over
here they have the app bar toolbar as
well as the typography element that
gonna be used for text the one thing you
can do is instead of using the full
imports from different sections or
segments of that library for different
UI elements you could also import them
using the named import so in this case
I’m just gonna import the app bar as
well as the tool bar using the named
import but in this case I’m just gonna
import them directly from a material UI
and in this case we can kill it the
second line and save it and it’s gonna
give us the same output and of course
it’s not enough
we’re also want to be able to use a
broker filament now an important note
what needs to be said about the text
fonts over here in this library so the
way we work with text and material UI is
that we actually depend on several
different font sizes so of course you
have access to CSS and in fact what the
library does is it actually uses CSS and
GS approach instead of something like
less or sass as you might be familiar
with but and other frameworks like
bootstrap or bulla or anything like that
instead of actually relying on anything
of that sort what the library does it
uses the old GS s or CSS and JavaScript
approach now of course you are able to
manipulate font sizes yourself but
there’s already built in default styles
or sizes that you can use so for
instance they have different sizes for
titles or display this one for headline
there’s one for title and then there’s a
bunch of other ones for the normal text
let’s say the body text all of you in
your application and as you can see here
the element there’s only one component
or UI element that we would use for text
and it’s called typography the way you
manipulate this size of typography is by
the variant property on that on that
component this is as you can imagine
this is just a normal component because
the material library itself uses react
under the hood so all the different
components in the you see over here so
the tab bar the tool bar those are just
normal we add components this is just
that their style and they already have
built in behavior that’s
concealed behind the scenes in the
library itself
okay so like I said we’re gonna be using
the typography elements so let me just
copy one back in here and just base it
in there and we’re just gonna say
exercise database now of course as you
might expect me to import the typography
element now as you can see this is
pretty big so we can use something
different so let’s use let’s say
headline or now instead of display for
let’s use the headline it different
variant is going to give you a different
text size as well okay and I’m gonna
move the gutter bottom as well so this
is gonna set it a little bit and the one
thing we’ll do is it will also have the
color property and I’m gonna set it to
in Garrett now when it comes to
different properties as you can see here
to change the color to white so it
inherited the color from the root or the
parent component whenever you’re not
sure about the different properties that
the API exposes make sure to go back to
the documentation click on component API
and look for the specific element that
you have in mind so in this case I’m
looking for typography it’s gonna be
somewhere at the bottom and as you can
see here only typography page we have a
list of different properties that we can
use so for instance we were to use the
variant property as you saw and that’s
the property over here that allows us to
manipulate the size of the typography
element and we’ve got different options
as you can see we’ve got displays from
one to four we’ve got titles subheadings
body button and a few other ones and
besides that of course as you might
expect there’s classes property so you
could pass different classes to your
typical element there is the component
allows you to manipulate the component
the underlying component per girl for
out there’s a bunch of other ones but
the one I’m interested in actually for
now is the color property so we use the
inherit value for that color property
and as you might expect it’s not it
doesn’t require any brain science it
just uses it just allows you to set the
color of the text or that typography
love it and I think this is good for now
we’re gonna save that for the header and
in the footer element back in here so
what I’m gonna do next is let’s close
off all of the other
and for the footer what I’d like to use
is actually tabs so let me go back to
the documentation and let me click on
tabs so when it comes to tabs actually
the one that I’d like to use is this one
so we’re going to be able to use these
different tabs we’re probably going out
more than three but these ones are
actually going to be useful because
they’re gonna allow us to switch between
different views and it’s going to make
sense eventually once we dive into the
exercises so the actual meat of the
application but for now what I’m gonna
do is I’m actually gonna just copy over
that markup and I’m going to replace
everything that we have in the forum
whether that markup and of course we
need to import all the different
elements so what’s important to let’s
import tags from material UI and okay
and when it comes to tabs like
individual tabs we actually have to use
a bit of a different important because
we need to import them from material UI
/ tabs because this is a subcomponent
for those tabs in fact to check based on
the import statement over here so that’s
what I’m basically doing and I’m putting
the tab but the tabs can be part of the
same important name important for
material UI now I’m going to remove the
class name for now I’m also consuming
the value and the on change for now so
we’re gonna save that and this is what
it looks like now actually for the value
this value needs to be an index so
anything from 0 up to the number of
elements that you have -1 so in this
case we have 3 so I could use either 0 1
or 2 and if you refresh the page like I
said in some cases you actually need to
do that it’s kind of painful but if you
refresh the page you can see that the
first item is being underlined as you
might expect now if you change it to
let’s say 1 the second one is gonna be
underlined and of course – that’s gonna
affect the last ones I’m going to set it
to 0 for now and this is basically it
now that can excercises index.js file
this is basically the file that’s going
to house all the business logic for the
application what I’m going to do for now
is we’re actually going to reach out to
the grid component so we go to layout
let’s expand the example over here and
let’s see how this allows us to use the
grid component in material UI so what
I’m looking for is actually being able
to split the screen into two separate
elements and actually back and footer
and just a simple side note so we use
the tabs element of course but I wrapped
it into the paper or element the paper
element is sort of like a panel that
looks like a paper it does have a box a
shadow as you can see and I’m actually
going to use that element for the two
panes so like the left pane and the
right pane that we’re gonna put in the
middle instead of the exercise hello for
exercises h1 tag or whatever we have so
back in the docs here like I said what
we’re actually looking for is being able
to split the display into two sides two
elements two columns as you might call
them if you use something like bootstrap
so if we’re not just going to have the
grid element and let’s also import that
grip from maturity-wise
okay wrong material you I am now the
grid itself cannot be used like that so
it either has to be a container that’s
going to be the container element or it
could also be an item okay which means
that it’s basically a child element so
let’s say this is going to be the left
pane let’s also have the right pane over
there okay let’s say that and the reason
that you actually don’t see them taking
a full-width like taking 50% each is
because we did not specify the size of
those elements so when it comes to
maturity why there’s actually five
built-in breakpoints if you go back to
layout basics you can see that they have
the extra small small medium large and
extra large elements over here and those
obviously correspond to different sizes
or breakpoints based on the device width
okay so back in the greater the one
thing what you do is we can simply set
the size so I’m going to set it to small
okay
said it’s small for both of the items
and as you can see here they’re gonna
take 50% of the weapon because they’re
basically be adjusted automatically the
other thing you could do is if you look
at the documentation you would actually
set it manually so you could set this
size on the container for instance let’s
set it to small 12 and as you probably
guessed the framework or the library
itself uses a 12 column layout similar
to Bushra or Bulma just about any other
library that uses grid setup and by the
way it’s also using the Flex box model
but back in our application here the
other thing we would do is of course you
could set the other one to for us the
six okay and the second one of course
you would also set it to six but as you
can see here that’s actually not
necessary if I switch back and undo all
those steps say the file as you can see
we’re gonna get the exact same output
the cool thing about the automatic
sizing is that we can actually add more
elements and the display is gonna be
adjusted automatically so that you don’t
actually have to set these sizes
manually okay now what I’m gonna do next
is I’m gonna have a paper elements over
here okay let’s close it off what’s also
important paper from the framework okay
let’s have the same thing at the bottom
on the left but I’m just gonna do is I’m
gonna say left pane and on the right
that’s gonna be the same thing except
right pane yeah and once we save that
this is what it looks like the other
thing I’ll do is let’s also add styles
over here so nothing in fancy really I’m
just going to have an object with a
property hold paper and this one’s gonna
hold some CSS that I’d like to add very
primitive for now and as you’re gonna
see there’s multiple ways to go about
styling so as I’ve mentioned multiple
times the library uses GSS so it’s a an
interesting solution to CSS or styling
in your react projects in general but
for now I’m just gonna use inline
styling and it just like
to set padding at 220 in fact what I’m
gonna do is I’m actually gonna get that
and I’m just gonna set it directly on
the paper element itself so I’m gonna
set style to that object
what’s it padding 220 okay for both of
them actually and I’m just gonna use
inline styling for now because we don’t
actually have that many styles I think
that’s fine for now let’s also add
margin so we set it to 10 pixels margin
bottom to 10 and let’s do the same thing
for the second one as well but I copy
them and paste in fact at this point
because this is duplicated I’m actually
going to create a separate variable so
this is very flexible make sure to do
this based on your needs as you as you
were progressing as you’re building out
your app if it’s getting ugly if it’s
getting duplicated make sure to use
variables use wherever you can there’s
also other approaches like I mentioned
we’re gonna explore them as we go along
but inline styling for now is exactly
what we need so this is the basic
skeleton as you can see we’ve got two
panes in fact the very last thing I’ll
do is I’m actually gonna export them to
separate files so let’s create a left
pane yes let’s also create another file
right pane
yes so the idea is basically for now the
index she has what it’s actually going
to be is a functional component that
receives data from a PS file okay and
the other panes are basically going to
be separate elements than that contain
all of the logic necessary to be
displayed so I’m going to move the left
pane as
I expect to wet theme itself and this
element or this module is going to
import react from react as always and
it’s going to exploit the faults the
function that’s going to receive props
and it’s just going to have a purple of
Bieber element inside of it and we’re
gonna need that paper element import and
the file as well let’s get rid of that
grid not using that now for the styling
gets a little bit trickier I think what
we’re gonna do is we’re actually gonna
pass in these styles as the property so
let’s have the left pane and the styles
are gonna be the properties just going
to refer to that object and be confident
that we created and we can I have a
similar concept for the right pane but
of course it’s going to have a different
content so I can just correct that left
right right pane okay even both need to
be imported obviously we still need the
grid but we no longer need the paper for
now at least
so when I remove that lets it import
left Mina from left pane okay and let’s
also import right home right and here
this style is not defined let’s actually
be structured so I’m gonna take it from
the Styles property passed down and
we’re gonna get the paper elements okay
this is already good so let’s say for
that let’s go back to right pane and in
here I’m just gonna say right thing
everything else stays the same good
right so having this Kelton we can
actually move on to implementing the
logic of the application I’m gonna stop
here for now this is going to be a
multi-part series and we’re gonna
continue next week and we’re actually
going to build out the application you
have a list of exercises on there on the
left so it’s basically going to be
exercises organized by category and on
the right we’re actually going to have a
simple view that allows us to see the
title the description and maybe some of
the other details pertaining to that
specific exercise so you will be able to
select the exercise on the left from the
list
and when it comes to the bottoms when it
comes to the buttons at the bottom
you’re actually gonna be able to switch
to different views in the application
maybe we’re gonna basically when you
click on different different categories
these are going to be like different
categories of the exercises once you
click on them you’re going to be able to
switch between the views and sort the OS
top exercises based on the selected
category and besides that the force
we’re gonna add functionality to add
different exercises out of them delete
and probably some of the other
functionality as well but for now we’re
gonna stop at this point so I hope you
enjoy the tutorial and I’m gonna see you next week bye
Please follow and like us: