hey guys welcome back to react to our
series in this tutorial we’re gonna
apply material UI to a project so the
very first thing I did is actually
updated image URLs in stored JSON file
because some of the images here were
actually as big as 1 megabyte so I had
to update those the other thing I’ll do
is I’ll go to in the XPS file and I’m
gonna move react dumb from there instead
I’ll have a named import of render
method and we’re gonna call it directly
the other thing I’ll changes in index.js
file in errors folder instead of having
an import statement with an export
statement we can just have one export we
can export default the not found
component from 404 and in that case we
don’t need to have the old export
statement below so we can remove that
the other thing I’ll do is I’ll go back
to the terminal and if you do cat
package.json you’re gonna see that some
of the dependencies here actually
outdated
for example react has been updated to 16
for 0 since we lasted a tutorial in this
series so one thing you could do is you
could obviously go to your editor you
can go to package JSON file and you
could basically update these
dependencies manually but in some
projects you might have as many as
dozens of dependencies and updating them
manually obviously is pretty cumbersome
so the alternative to that would be to
go to the terminal and one thing you
could do is you could do yarn upgrade
with the latest flag and what the latest
flock is gonna do is it’s actually gonna
update your dependencies in package.json
file so it’s going to overwrite the
existing versions with the latest
versions based on whatever you have
specified based on the carrot symbols
I’m gonna let the command finish and
once it does we can do package.json
again and you’re gonna see that some of
the dependencies have been updated
successfully so finally I’m gonna do a
yarn start and this is gonna start the
project so we can see where we’re at
okay so I’m gonna maximize the window
and this is basically what it is right
so we have a writers and then we can
basically see the information about the
writers themselves as well as the books
that they have written so we’re gonna do
in this tutorial is we’re actually gonna
apply material UI like I said
so the next thing I’ll do is I’ll
actually stop the server for a moment
and then I’ll do yarn add material UI /
core and the reason that we have to use
that syntax well if you go back to the
browser for a second I am here on the
material UI documentation page so this
is the homepage of Miceli while if you
click on get started you’re gonna see
the instructions as to how to install it
previously we use the next flag in order
to install the beta version but because
materia has been updated to version 1 in
May actually last month we now need to
reference material UI / core so at
present time material UID 1 as well as
the version 0 20 both exist in the
master branch so in order to
differentiate between the two the newer
version of Mozilla has actually been
moved to the core subfolders so we need
to reference that in order to get the
latest version of module UI and then
besides the framework itself or the
library itself I should say we’re also
gonna add another dependencies it’s
gonna be material UI / icons we’re gonna
add the material icons so we could use
them in our project as well what I’m
gonna do is I’m gonna go back to app
Gia’s component so the very first thing
I’d like to do in this project is I’d
like to add a drawer so let’s go to
documentation for a second I’m gonna
click on component demos let’s go to
drawers and the one that I’m interested
in for the time being is the last one so
here is you’re gonna see a it’s known as
responsive drawer so the advantage of it
is that it’s actually responsive on
mobile desktop and as well as the other
devices so if I go to let’s say a mobile
device let’s see an iPhone or is he
gonna see the drawer changes so now we
have this hamburger menu which we can
click on and we can see all of the items
but if I go back to the desktop mode
you’re gonna see that the hamburger menu
disappears and you’re gonna see all of
the links on the Left pane so this is
the code we’re gonna use let’s click on
the source and let’s see what it
basically looks like so we have a render
method so it’s a class-based component
we’re gonna need to keep track of this
property called mobile open so what I’ll
do is I’ll actually cop
this div well this markup let’s go back
to our project instead of putting it in
app kiosk what I’d like to do is I’d
like to actually create a dedicated
component so I’ll create a new file
let’s call it layout and in layout I’m
gonna create an index j/s let’s import
react from react as we always do and we
also have to export default let’s have a
class it’s gonna extend component not
composition component and we’re gonna
have a render method we’re gonna need to
return something we’re gonna return a
div let’s fix the indentation and we’re
gonna need to import component as well
so for now what I’m gonna do is I’m just
gonna try to make this thing work so
we’re gonna need to have a bunch of
imports so the imports are gonna come
from a chilli why core and we’re gonna
have a bar let’s see tool bar I’m
basically just looking at the different
elements or components we’re using and
I’m basically putting them in let’s have
an icon button let’s have a per graphi I
have a hidden component here let’s have
a drawer looks like that’s pretty much
it for the time being
besides we’re gonna need to go back and
we also have a drawer element or a
drawer constant so let me copy those two
things back in here what I’ll do is I’ll
paste them in the drawer also have a
divider element which I’m not sure if
we’re actually gonna use but let’s just
keep it there for the time being and the
two variables here actually come from
the documentation we can go to get up
and grab them from there but for now I
think I’m just gonna delete them let’s
just put some dummy content the theme
object I don’t think we’re gonna need it
this is actually used for the direction
right or left in this case it’s not
relevant at all and then the mobile open
property well I’m gonna grab it from the
state in here so let’s have a Const
mobile open this is gonna come from this
state of course that’s going to need to
have to be added to our component as
well so we’re going to need to add
States let’s go back to the editor okay
here so we’re gonna need to add the
property on the state by default it’s
gonna be false and then we also need to
have panel drawer toggle method which is
basically used when we click on the
hamburger menu button actually the theme
here I’m gonna move it we have our
classes and let’s see if this actually
works so we’ll go back to the browser
this is the project we’re gonna need to
stop the server again because I have to
stop it so we could install the
dependency so the yarn start and let’s
see I think something’s gonna break
actually no nothing broke but that’s
because we’re not actually using the
layout component that’s why okay so I’ll
go back to you app j/s I’m gonna remove
this unordered list we’re not gonna have
any links an app component but instead
we’re actually gonna use the layout
component instead so I’ll remove the
fragment but I’ll put in the layout okay
so we’re gonna have a layout component
and I’m actually got passing children
inside of it so by that I mean whatever
the layout component needs to render is
gonna be passed to it as eat children so
it’s gonna be passed between the two
tags so having said that I’m gonna also
need to go back and in this main between
the main tags instead of having a
typography element I’m actually just
gonna say children so the children
property is something that comes from
this crops and it’s going to contain
whatever we pass between the tags like I
said it’s gonna be the switch element
basically and I think we’re also gonna
need to pass the writers as a prop and
this is so that we can actually loop
through them and we can display them
inside a drawer as list items so we’re
gonna do that in a second but for now
what I’ll do is I’ll actually import
layouts component from layout like that
and I’m gonna remove the link component
from react right or down because we’re
not gonna need it in this component and
having done that let’s go back and
rights is not defined in AB KS that’s
because it should be writers not rights
menu icon is not defined okay so we did
actually import oops we did actually
import material UI icons like
but we forgot to import menu component
from that library so let’s do exactly
that
let’s grab menu from material UI icons
and let’s search for a menu icon when I
change it to menu because menu is
actually the name that’s used for that
specific component so that’s gonna give
us the hamburger menu icon okay classes
toolbar is not defined that’s because we
don’t have any styling so go back to
this example in the documentation we
forgot to grab the Styles let me go here
and grab all of these Styles from there
and I’ll paste them in in this index.js
file and let’s see going back to the
docs I’m also going to need to grab what
Styles hoc helper so I’ll paste it over
here and we’re gonna need to actually
use it so instead of doing an export
default I’ll have a class let’s call it
component and we’ll have an export
default below we’ll have with styles I’m
gonna pass in the styles and then I’ll
pass in the app component actually we’re
gonna need to call it layout because
we’re in layouts file ok I’ll call it
layout instead of app sorry about that
this would be class layout okay so this
should be fine now we should have styles
I’ll go back in here the side can be
reach okay so we did actually get
something it’s not very beautiful just
yet but that’s already something so
let’s see the problem we’re having is we
have a height of 430 I’m gonna remove
that first of all and this is what its
gonna look like now the other thing is
because we have this margin around
basically around the elements over here
that’s because we need to apply what’s
known as CSS base lights so I’ll put a
knee fragment here let’s have a fragment
and this fragment will need to go at the
very bottom after the div let’s have the
fragment and I’ll fix the indentation in
just a second okay we’re gonna need to
import that fragment the reason I want
to pull in the fragment is because I
also want to add CSS baseline like I
said so CSS baseline what it basically
allows us to do is if you guys are
interested I’ll show you real quick we
have the CSS baseline what it does is it
basically applies normalizations to to
your project so that your project is
gonna look pretty much the same on
different browsers because you probably
know different browsers will try to
apply different layouts different styles
like adding for example margin around
divs for example on the body element as
we can see here the body has margin 8 by
default so these are user agent style
sheet styles these come from Chrome
itself so it’s gonna apply a bunch of
styles that are unnecessary and they’re
not gonna be the same depending on the
browser so what we can do is we can
apply this CSS baseline component it’s
gonna apply the base set of styles
across all the browsers so that the
project is gonna pretty much look the
same regardless of what browser we’re
using okay so I’m gonna apply that CSS
layout components let’s put it in here
and let’s save that and let’s see if it
kills the margin and it looks like it
does the other thing I’ll do is in
documentation I’m actually gonna go back
and in this drawers section we also have
a clipped drawer so a clip drawer
basically has the app bar over the over
the left pane itself over the list of
links so what we can do here is we can
basically apply the z-index that’s gonna
be one of the styles we’re gonna need
but in our app drawer we’re also going
to need to remove all of the other
styles things like position:absolute
this can actually be applied on each or
itself only in the app bar component
itself so I’ll do position let’s have
absolute so that way we can remove this
style I’m also going to move margin left
and actually this calculation we don’t
need any more because I want the app bar
to take full width so I’ll just apply
the Z
index and let’s see if that fixes it so
I’m back to our project here we go we
have a responsive drawer at the top and
we have the left pane on the Left taking
exactly 240 pixels okay that’s fine for
now and then instead of saying
responsive drawer I’m actually gonna put
in my own title let’s say writers blog
so see how that looks like this is what
its gonna be like okay so now we have
the drawer and the thing is if we go to
a mobile mode let’s see what its gonna
look like on mobile for example things
like iPhone 6 7 & 8 if I open the
hamburger menu you’re gonna see this
hello pop up but the thing is we also
have a weird space above which I don’t
really like so one thing we could do is
in our drawer component we can make this
day of conditional so what I’ll say is
this div is actually necessary on
desktop devices because we’re gonna need
to make sure that we have a space above
the hello element so that we have enough
space so that the app bar above can
actually show up otherwise the hello
element is gonna be hidden behind it so
if we actually move it that’s gonna
screw things up because you’re not gonna
be able to see the hello elements right
but at the same time we’re gonna need to
make sure that it doesn’t show up on
mobile devices so we can actually copy
this element known as hidden and in this
case we actually need this one okay so
the hidden element allows you to show or
hide elements conditionally it’s
actually a component in module UI so by
applying that element we’re saying we
don’t want to show that div on any small
or extra small devices so this is what
small down means so anything smaller
than small is not gonna have the div
inside of it okay so I hope that makes
sense if we refresh the project I go
back to the mobile device now we don’t
see that spacing at the top we don’t see
that div element with the spacing showing up
series in this tutorial we’re gonna
apply material UI to a project so the
very first thing I did is actually
updated image URLs in stored JSON file
because some of the images here were
actually as big as 1 megabyte so I had
to update those the other thing I’ll do
is I’ll go to in the XPS file and I’m
gonna move react dumb from there instead
I’ll have a named import of render
method and we’re gonna call it directly
the other thing I’ll changes in index.js
file in errors folder instead of having
an import statement with an export
statement we can just have one export we
can export default the not found
component from 404 and in that case we
don’t need to have the old export
statement below so we can remove that
the other thing I’ll do is I’ll go back
to the terminal and if you do cat
package.json you’re gonna see that some
of the dependencies here actually
outdated
for example react has been updated to 16
for 0 since we lasted a tutorial in this
series so one thing you could do is you
could obviously go to your editor you
can go to package JSON file and you
could basically update these
dependencies manually but in some
projects you might have as many as
dozens of dependencies and updating them
manually obviously is pretty cumbersome
so the alternative to that would be to
go to the terminal and one thing you
could do is you could do yarn upgrade
with the latest flag and what the latest
flock is gonna do is it’s actually gonna
update your dependencies in package.json
file so it’s going to overwrite the
existing versions with the latest
versions based on whatever you have
specified based on the carrot symbols
I’m gonna let the command finish and
once it does we can do package.json
again and you’re gonna see that some of
the dependencies have been updated
successfully so finally I’m gonna do a
yarn start and this is gonna start the
project so we can see where we’re at
okay so I’m gonna maximize the window
and this is basically what it is right
so we have a writers and then we can
basically see the information about the
writers themselves as well as the books
that they have written so we’re gonna do
in this tutorial is we’re actually gonna
apply material UI like I said
so the next thing I’ll do is I’ll
actually stop the server for a moment
and then I’ll do yarn add material UI /
core and the reason that we have to use
that syntax well if you go back to the
browser for a second I am here on the
material UI documentation page so this
is the homepage of Miceli while if you
click on get started you’re gonna see
the instructions as to how to install it
previously we use the next flag in order
to install the beta version but because
materia has been updated to version 1 in
May actually last month we now need to
reference material UI / core so at
present time material UID 1 as well as
the version 0 20 both exist in the
master branch so in order to
differentiate between the two the newer
version of Mozilla has actually been
moved to the core subfolders so we need
to reference that in order to get the
latest version of module UI and then
besides the framework itself or the
library itself I should say we’re also
gonna add another dependencies it’s
gonna be material UI / icons we’re gonna
add the material icons so we could use
them in our project as well what I’m
gonna do is I’m gonna go back to app
Gia’s component so the very first thing
I’d like to do in this project is I’d
like to add a drawer so let’s go to
documentation for a second I’m gonna
click on component demos let’s go to
drawers and the one that I’m interested
in for the time being is the last one so
here is you’re gonna see a it’s known as
responsive drawer so the advantage of it
is that it’s actually responsive on
mobile desktop and as well as the other
devices so if I go to let’s say a mobile
device let’s see an iPhone or is he
gonna see the drawer changes so now we
have this hamburger menu which we can
click on and we can see all of the items
but if I go back to the desktop mode
you’re gonna see that the hamburger menu
disappears and you’re gonna see all of
the links on the Left pane so this is
the code we’re gonna use let’s click on
the source and let’s see what it
basically looks like so we have a render
method so it’s a class-based component
we’re gonna need to keep track of this
property called mobile open so what I’ll
do is I’ll actually cop
this div well this markup let’s go back
to our project instead of putting it in
app kiosk what I’d like to do is I’d
like to actually create a dedicated
component so I’ll create a new file
let’s call it layout and in layout I’m
gonna create an index j/s let’s import
react from react as we always do and we
also have to export default let’s have a
class it’s gonna extend component not
composition component and we’re gonna
have a render method we’re gonna need to
return something we’re gonna return a
div let’s fix the indentation and we’re
gonna need to import component as well
so for now what I’m gonna do is I’m just
gonna try to make this thing work so
we’re gonna need to have a bunch of
imports so the imports are gonna come
from a chilli why core and we’re gonna
have a bar let’s see tool bar I’m
basically just looking at the different
elements or components we’re using and
I’m basically putting them in let’s have
an icon button let’s have a per graphi I
have a hidden component here let’s have
a drawer looks like that’s pretty much
it for the time being
besides we’re gonna need to go back and
we also have a drawer element or a
drawer constant so let me copy those two
things back in here what I’ll do is I’ll
paste them in the drawer also have a
divider element which I’m not sure if
we’re actually gonna use but let’s just
keep it there for the time being and the
two variables here actually come from
the documentation we can go to get up
and grab them from there but for now I
think I’m just gonna delete them let’s
just put some dummy content the theme
object I don’t think we’re gonna need it
this is actually used for the direction
right or left in this case it’s not
relevant at all and then the mobile open
property well I’m gonna grab it from the
state in here so let’s have a Const
mobile open this is gonna come from this
state of course that’s going to need to
have to be added to our component as
well so we’re going to need to add
States let’s go back to the editor okay
here so we’re gonna need to add the
property on the state by default it’s
gonna be false and then we also need to
have panel drawer toggle method which is
basically used when we click on the
hamburger menu button actually the theme
here I’m gonna move it we have our
classes and let’s see if this actually
works so we’ll go back to the browser
this is the project we’re gonna need to
stop the server again because I have to
stop it so we could install the
dependency so the yarn start and let’s
see I think something’s gonna break
actually no nothing broke but that’s
because we’re not actually using the
layout component that’s why okay so I’ll
go back to you app j/s I’m gonna remove
this unordered list we’re not gonna have
any links an app component but instead
we’re actually gonna use the layout
component instead so I’ll remove the
fragment but I’ll put in the layout okay
so we’re gonna have a layout component
and I’m actually got passing children
inside of it so by that I mean whatever
the layout component needs to render is
gonna be passed to it as eat children so
it’s gonna be passed between the two
tags so having said that I’m gonna also
need to go back and in this main between
the main tags instead of having a
typography element I’m actually just
gonna say children so the children
property is something that comes from
this crops and it’s going to contain
whatever we pass between the tags like I
said it’s gonna be the switch element
basically and I think we’re also gonna
need to pass the writers as a prop and
this is so that we can actually loop
through them and we can display them
inside a drawer as list items so we’re
gonna do that in a second but for now
what I’ll do is I’ll actually import
layouts component from layout like that
and I’m gonna remove the link component
from react right or down because we’re
not gonna need it in this component and
having done that let’s go back and
rights is not defined in AB KS that’s
because it should be writers not rights
menu icon is not defined okay so we did
actually import oops we did actually
import material UI icons like
but we forgot to import menu component
from that library so let’s do exactly
that
let’s grab menu from material UI icons
and let’s search for a menu icon when I
change it to menu because menu is
actually the name that’s used for that
specific component so that’s gonna give
us the hamburger menu icon okay classes
toolbar is not defined that’s because we
don’t have any styling so go back to
this example in the documentation we
forgot to grab the Styles let me go here
and grab all of these Styles from there
and I’ll paste them in in this index.js
file and let’s see going back to the
docs I’m also going to need to grab what
Styles hoc helper so I’ll paste it over
here and we’re gonna need to actually
use it so instead of doing an export
default I’ll have a class let’s call it
component and we’ll have an export
default below we’ll have with styles I’m
gonna pass in the styles and then I’ll
pass in the app component actually we’re
gonna need to call it layout because
we’re in layouts file ok I’ll call it
layout instead of app sorry about that
this would be class layout okay so this
should be fine now we should have styles
I’ll go back in here the side can be
reach okay so we did actually get
something it’s not very beautiful just
yet but that’s already something so
let’s see the problem we’re having is we
have a height of 430 I’m gonna remove
that first of all and this is what its
gonna look like now the other thing is
because we have this margin around
basically around the elements over here
that’s because we need to apply what’s
known as CSS base lights so I’ll put a
knee fragment here let’s have a fragment
and this fragment will need to go at the
very bottom after the div let’s have the
fragment and I’ll fix the indentation in
just a second okay we’re gonna need to
import that fragment the reason I want
to pull in the fragment is because I
also want to add CSS baseline like I
said so CSS baseline what it basically
allows us to do is if you guys are
interested I’ll show you real quick we
have the CSS baseline what it does is it
basically applies normalizations to to
your project so that your project is
gonna look pretty much the same on
different browsers because you probably
know different browsers will try to
apply different layouts different styles
like adding for example margin around
divs for example on the body element as
we can see here the body has margin 8 by
default so these are user agent style
sheet styles these come from Chrome
itself so it’s gonna apply a bunch of
styles that are unnecessary and they’re
not gonna be the same depending on the
browser so what we can do is we can
apply this CSS baseline component it’s
gonna apply the base set of styles
across all the browsers so that the
project is gonna pretty much look the
same regardless of what browser we’re
using okay so I’m gonna apply that CSS
layout components let’s put it in here
and let’s save that and let’s see if it
kills the margin and it looks like it
does the other thing I’ll do is in
documentation I’m actually gonna go back
and in this drawers section we also have
a clipped drawer so a clip drawer
basically has the app bar over the over
the left pane itself over the list of
links so what we can do here is we can
basically apply the z-index that’s gonna
be one of the styles we’re gonna need
but in our app drawer we’re also going
to need to remove all of the other
styles things like position:absolute
this can actually be applied on each or
itself only in the app bar component
itself so I’ll do position let’s have
absolute so that way we can remove this
style I’m also going to move margin left
and actually this calculation we don’t
need any more because I want the app bar
to take full width so I’ll just apply
the Z
index and let’s see if that fixes it so
I’m back to our project here we go we
have a responsive drawer at the top and
we have the left pane on the Left taking
exactly 240 pixels okay that’s fine for
now and then instead of saying
responsive drawer I’m actually gonna put
in my own title let’s say writers blog
so see how that looks like this is what
its gonna be like okay so now we have
the drawer and the thing is if we go to
a mobile mode let’s see what its gonna
look like on mobile for example things
like iPhone 6 7 & 8 if I open the
hamburger menu you’re gonna see this
hello pop up but the thing is we also
have a weird space above which I don’t
really like so one thing we could do is
in our drawer component we can make this
day of conditional so what I’ll say is
this div is actually necessary on
desktop devices because we’re gonna need
to make sure that we have a space above
the hello element so that we have enough
space so that the app bar above can
actually show up otherwise the hello
element is gonna be hidden behind it so
if we actually move it that’s gonna
screw things up because you’re not gonna
be able to see the hello elements right
but at the same time we’re gonna need to
make sure that it doesn’t show up on
mobile devices so we can actually copy
this element known as hidden and in this
case we actually need this one okay so
the hidden element allows you to show or
hide elements conditionally it’s
actually a component in module UI so by
applying that element we’re saying we
don’t want to show that div on any small
or extra small devices so this is what
small down means so anything smaller
than small is not gonna have the div
inside of it okay so I hope that makes
sense if we refresh the project I go
back to the mobile device now we don’t
see that spacing at the top we don’t see
that div element with the spacing showing up
Please follow and like us: