you guys welcome back this is Chloe
Ellen my name is Alex fan in this
tutorial I’d like to introduce you to
material you are we’re going to build a
simple react application it’s gonna be a
simple crud application built in react
and we’re gonna be using material UI as
a framework for styling so if you don’t
know material UI is basically a UI
framework that provides a bunch of
different isolated and independent
components or react elements that can be
used as building blocks for building
more complex user interfaces so the UI
components themselves house all the HTML
CSS and JavaScript built into them and
the cool thing about those components is
that it can actually be used
independently without any dependencies
on external libraries like normalize the
SS or jQuery or anything like that so
first things first I’m actually on coats
and bucks
io and I decided that be using this
environment as the local set up for
coding and the first thing we’ll do is
let’s actually just refresh the page and
just when you land on the page you’re
gonna see this button open react if you
click on it it’s basically going to
butcher up a simple react application
and it’s actually going to be based on
create react app so out of the box we
get a full set up you can see we have a
public folder well index.html file this
is going to be the only HTML file in the
project but we also get this index J S
which is basically the entry point of
the application as you can see here
we’ve got a basic set up we’ve got an
app component and it’s being rendered to
the Dom using react Dom as you can see
here and we also have the hello J s just
a simple functional component for a demo
and of course you can see package.json
here as you can see this is basically
just the normals that up with everything
that you would expect we have react
dependency we have Dom as well as react
scripts and in fact if you look over the
dependencies here you can see that we’ve
got all of them in there now on the
right you can actually see the output so
the cool thing about this cloud setup is
that whenever we change something let’s
actually change the text over here so
let’s say hello from code sandbox
you can see that as I actually typed
this is being hook reloaded on the right
so everything you everything that you
basically type is going to be updated
almost immediately on the right and
there’s a few other options as well you
can integrate and let’s get up you could
actually download the whole setup all
the files yourself so it’s pretty
flexible it’s pretty cool actually if
you click on this button over here open
in your window you can see the
application running in a separate window
and actually expect it and see all the
different components over here so for
instance going to where you see the app
component we’ve got all the other markup
as well now the first thing I’d like to
do is we’re gonna be using material UI
so what I’m gonna do is just I’m just
gonna look for material UI in Google and
it’s gonna be the first thing that pops
up in a search results now for this demo
for this tutorial we’re actually going
to be using material wine next so
material ey next is the very next
version of much earlier that that is
coming that is coming up very soon and
in fact if you click on the icon over
there and get out you could see the
project on get up as well you can find
some documentation here as well now if
you click on releases at the top you’re
gonna be seeing a bunch of different
versions that came out recently now as
you can see there’s quite a few versions
based on version 1 and they have a bunch
of different release candidates but in
fact the fact of the matter is they
actually have a stable version version
0.20 I believe or something like that
and that version actually been around
for quite some time here you see right
there
0:20 zero at the end probably was the
latest release for that for that range
now the actually actually the next
branch that’s coming up as you can see
here is the next branch now the next
branch contains a rewrite of the library
and in fact there’s been quite a few
changes in it so one thing for example
they went from less to jss the CSS and
JavaScript that was one changed a bit in
terms of styling but they also rewrote a
lot of the components a lot of the UI
elements as well now I guess that the
version 0 20 is the stable one and it’s
probably the one you would typically see
in production
when this library is being used but
we’re actually going to be looking at
maturely wiring next
just this this branch the next branch
has actually been in development for
several years now and this is the branch
that’s gonna be coming up in the future
so the future is now it’s coming up so
we’re gonna be using the very latest and
greatest features of the of the library
of the framework now with that out of
the way let’s actually go back to the
docks and if you can see here at the top
you’re going to see a small paragraph
you can click on that text over there
you’re going to be redirected to
maturely line XCOM so we’re going to be
using that website be sure to use that
link specifically because that’s where
the documentation besides for the
correct version of the library now click
on get started and you’re going to be
redirected to the main page here on the
installation page so we need to do in
order to install the libraries need to
run in p.m. install with the say flag
and meter so material you are and
specifically the next branch of the
library now what we’re gonna be doing
here is well first of all let’s save the
file ok we just work through a positive
Orion and what I’m gonna do next is when
I click on dependencies and I’m gonna
add the dependencies so search for a
material UI ok now the very first thing
you see in the list is there is
basically a framework that we need to
install but make sure to select to click
on the on the drop-down box make sure to
select version 1 now at the time of this
recording the version is 1 0 0 beta 34
so that’s the one I’m gonna be using and
I just click on it and just gonna be
installed it’s gonna take a couple of
seconds in order to install and the
project is going to resolve all of the
dependencies itself so ok now we’re
actually gonna get to coding right now
any kind of application that I’d like to
build with this setup would be a simple
fitness application because I’m actually
just besides of coding I’m also into
fitness so we’re going to create a
simple exercise database with this
application so it’s just gonna be a
simple normal crud application and react
you’re gonna be able to add modify
delete and you exercises so it’s sort of
like sort of like a similar to the to-do
application you would typically build
but it’s just gonna be a little bit of a
different
and we’re gonna be using material UI for
the UI elements as well okay so the
first thing I’m going to do is and when
I click on preferences and in the editor
what I’m going to do is I’m actually
gonna disable pretty apply the reason
I’d like to do that is because well
there’s actually several reasons if
you’ll become the prettier settings
there’s actually a few things you could
do so for instance you could disable
semicolons at the end of statements you
could also use single quotes but when I
noticed this whenever you guys save the
files it it tends to indent them in ways
that are not necessarily congruent with
the way I would like to sell them so I’m
pretty confident in my skills so I’m
gonna be using my own styling of course
it’s up completely up to you if you want
to enable pretty flying in fact you
should probably enable it because it’s a
good guide it’s just a basically a good
guide for you to to index your stuff so
use it if you’d like to but in this case
I’m just gonna disable it I’m also gonna
replace all the semicolons that’s just a
personal thing that I like to do when my
projects always use semicolons and we’re
gonna clear up this just a little bit so
and just have a simple dev here and have
the app component let’s also put some
text in there so I’m just gonna say hi
react okay that now there’s no import
for the hello component in fact I’m just
gonna delete it okay this is basically
the clean setup that we have so the
first thing we like to do is it like a
create a new folder I’m gonna call it
components and I’m actually gonna create
the app component in there so I’d like
to move the app component from here
actually to the component file itself to
the module so when I do it here is let’s
import right or its react from react
that’s the first thing we have to do
next I’m going to export the faulty
function it’s going to see the props
even though we probably don’t have any
props but it’s just gonna be
and empty uh and I’m defined actually
okay and I’m the object and we’re gonna
indent this a little bit and this should
be good I think so we can import app
from components okay see that as you can
see we get the same out with us before
but so what I’d like to in the next days
I’d like to actually have a header at
the very top and for the header we’re
probably going to be using so back in
the documentation click on component
demos you can see there was the only
components that are present in the
libraries so the very first time I’d
like to use is the app bar at opponent
so it’s just gonna be a navigation bar
we’re also gonna have a header and we’re
also going to have the main content
obviously but let’s begin with a header
first so I’m just gonna create a
subfolder Michael and layouts and let’s
create a header header file in fact it’s
gonna be very similar to what the
structure is and fgs and just got copied
over and here I’m just gonna say I’m
gonna have a div with h1 it’s just we’re
just gonna say hair okay right now let’s
also create a footer like I said create
footer let’s go to that module
alright so any footer GS I’m just gonna
face the same thing but they put her in
there and let’s go back to app so the
thing about the app component I created
as a functional component but I think
what we’re actually gonna do is we’re
gonna have our state’s reside in the app
component I think so I’m actually gonna
convert it to a class based components
I’m just gonna do an export default
class it’s gonna be an anonymous class
extending the component from react and
of course we need to import that as well
let’s have the e component and in there
we’re just gonna have the render method
we’re going to return
some markup okay let’s have a div in
fact I’m going to put a fragment in here
no for those of you who don’t know the
fragment is basically a component and
react that allows you to have a an outer
wrapper for your elements so the problem
here is for instance let’s say I have
two elements so I have an h1 tag and you
should probably know this by now
but I’ll just explain that anyways and
you have some text in here in the
paragraph now what if you wanted to have
both of those elements at the same time
of course that’s not possible right so
you need to have a rapper a rapper
basically for those two elements
so one thing you would typically do is
you would how they did and of course
then you would have it closing to it but
in some scenarios you might also want to
have just a rapper that doesn’t actually
include any markups elicited will
actually be present on the page so you
have your body tags and then inside your
body you have the div that contains the
h1 tag and then the paragraph below it
in this case if you put the fragment the
cool thing is the fragment one actually
include any markup in and of itself so
we would just simply have the h1 tag and
paragraph directly below the body that’s
what I’m gonna be using you fragment of
course you have to import it from react
I’m just gonna save that but the misc
scenario I don’t want any header or
paragraphs so what I’m going to do is
I’m actually gonna have the header and
and this has to be capitalized of course
otherwise it’s gonna be treated as a
normal header in HTML the header is
actually a valid a valid element in
html5 and of course we need to import a
header from let’s see we need to go to
components layouts and then the header
and the same thing I’ll do for the
footer so the footer needs to be
imported from layouts ok
oh my bad sorry the components is
actually not necessary because we are in
the components folder so let’s save that
there we go we got the header and the
footer and then we’re also gonna have
the main content so what I’m gonna do
for the main content all of the Olympic
business logic is actually going to
and let’s call it exercises older and
the one thing I’ll do first is always as
you can see here we have a header and
the footer the only thing here is that
the path is actually duplicated and it’s
a little bit redundant so what I’m gonna
do is in layouts I’m actually gonna
create another file I’m gonna call it
index J s and an index J s what I’m
gonna do is I’m actually gonna import
header from header okay and the same
thing I also do for the footer and what
I’m actually gonna do in this file this
file will not do anything extraordinary
except it’s just basically going to
import the header and the footer using
the default keyboard and it’s also going
to export them from me from the module
and why am I doing this you might ask
well instead of having its who imports
of the header and footer separately
because these are default imports and we
have to have actually two separate
statements because these are two
separate modules but now because we had
at the index.js file what I can do now
is I can actually import the Harrow in
the footer in one line using the named
import I can just simply say go to
layouts and that’s it I don’t need to
use the header or the footer post fix
afterwards and I can just save that and
it’s going to work the way it works
just to clarify mention it several times
before on my channel as well in other
projects but basically the idea is once
you go to a folder in this case well
first of all is gonna look for layouts
J’s file right under components but
there’s no such file so it’s gonna look
for the folder so it sees okay we’ve got
the layouts folder let’s go through that
folder and let’s go to index yes because
it’s actually gonna look for the entry
files and SJS and goes in there imports
the two components and then exports time
using name to export and once we’ve got
that let’s go back to the exercise what
I’m going to do here is am I trying to
create a new file that’s also holding
into XJS and this file is actually going
to house all of the business logic so
we’re gonna import react from react
we’re also going to export defaults a
function
ROPS it’s gonna accept the props and
it’s going to return some markup right
now I’m just gonna have a div with a
closing tag let’s say hello from
exercises okay let’s say that let’s go
back to ops yes and I’m also going to
import exercises from exercises no I
don’t need to use a name important in
this case because we are actually doing
it default export okay so we don’t need
to do that and of course you could
adjust it or change it to your needs so
you might actually use a name and export
and if you’d like to but I’m just didn’t
keep it for that way for now so what we
have here is would basically have a very
primitive rudimentary setup that allows
us to have a header the main content of
the page as e as you might expect and as
well as the footer so what we’re gonna
do from this point is we’re actually
going to use this Kelton in order to build out the application
Ellen my name is Alex fan in this
tutorial I’d like to introduce you to
material you are we’re going to build a
simple react application it’s gonna be a
simple crud application built in react
and we’re gonna be using material UI as
a framework for styling so if you don’t
know material UI is basically a UI
framework that provides a bunch of
different isolated and independent
components or react elements that can be
used as building blocks for building
more complex user interfaces so the UI
components themselves house all the HTML
CSS and JavaScript built into them and
the cool thing about those components is
that it can actually be used
independently without any dependencies
on external libraries like normalize the
SS or jQuery or anything like that so
first things first I’m actually on coats
and bucks
io and I decided that be using this
environment as the local set up for
coding and the first thing we’ll do is
let’s actually just refresh the page and
just when you land on the page you’re
gonna see this button open react if you
click on it it’s basically going to
butcher up a simple react application
and it’s actually going to be based on
create react app so out of the box we
get a full set up you can see we have a
public folder well index.html file this
is going to be the only HTML file in the
project but we also get this index J S
which is basically the entry point of
the application as you can see here
we’ve got a basic set up we’ve got an
app component and it’s being rendered to
the Dom using react Dom as you can see
here and we also have the hello J s just
a simple functional component for a demo
and of course you can see package.json
here as you can see this is basically
just the normals that up with everything
that you would expect we have react
dependency we have Dom as well as react
scripts and in fact if you look over the
dependencies here you can see that we’ve
got all of them in there now on the
right you can actually see the output so
the cool thing about this cloud setup is
that whenever we change something let’s
actually change the text over here so
let’s say hello from code sandbox
you can see that as I actually typed
this is being hook reloaded on the right
so everything you everything that you
basically type is going to be updated
almost immediately on the right and
there’s a few other options as well you
can integrate and let’s get up you could
actually download the whole setup all
the files yourself so it’s pretty
flexible it’s pretty cool actually if
you click on this button over here open
in your window you can see the
application running in a separate window
and actually expect it and see all the
different components over here so for
instance going to where you see the app
component we’ve got all the other markup
as well now the first thing I’d like to
do is we’re gonna be using material UI
so what I’m gonna do is just I’m just
gonna look for material UI in Google and
it’s gonna be the first thing that pops
up in a search results now for this demo
for this tutorial we’re actually going
to be using material wine next so
material ey next is the very next
version of much earlier that that is
coming that is coming up very soon and
in fact if you click on the icon over
there and get out you could see the
project on get up as well you can find
some documentation here as well now if
you click on releases at the top you’re
gonna be seeing a bunch of different
versions that came out recently now as
you can see there’s quite a few versions
based on version 1 and they have a bunch
of different release candidates but in
fact the fact of the matter is they
actually have a stable version version
0.20 I believe or something like that
and that version actually been around
for quite some time here you see right
there
0:20 zero at the end probably was the
latest release for that for that range
now the actually actually the next
branch that’s coming up as you can see
here is the next branch now the next
branch contains a rewrite of the library
and in fact there’s been quite a few
changes in it so one thing for example
they went from less to jss the CSS and
JavaScript that was one changed a bit in
terms of styling but they also rewrote a
lot of the components a lot of the UI
elements as well now I guess that the
version 0 20 is the stable one and it’s
probably the one you would typically see
in production
when this library is being used but
we’re actually going to be looking at
maturely wiring next
just this this branch the next branch
has actually been in development for
several years now and this is the branch
that’s gonna be coming up in the future
so the future is now it’s coming up so
we’re gonna be using the very latest and
greatest features of the of the library
of the framework now with that out of
the way let’s actually go back to the
docks and if you can see here at the top
you’re going to see a small paragraph
you can click on that text over there
you’re going to be redirected to
maturely line XCOM so we’re going to be
using that website be sure to use that
link specifically because that’s where
the documentation besides for the
correct version of the library now click
on get started and you’re going to be
redirected to the main page here on the
installation page so we need to do in
order to install the libraries need to
run in p.m. install with the say flag
and meter so material you are and
specifically the next branch of the
library now what we’re gonna be doing
here is well first of all let’s save the
file ok we just work through a positive
Orion and what I’m gonna do next is when
I click on dependencies and I’m gonna
add the dependencies so search for a
material UI ok now the very first thing
you see in the list is there is
basically a framework that we need to
install but make sure to select to click
on the on the drop-down box make sure to
select version 1 now at the time of this
recording the version is 1 0 0 beta 34
so that’s the one I’m gonna be using and
I just click on it and just gonna be
installed it’s gonna take a couple of
seconds in order to install and the
project is going to resolve all of the
dependencies itself so ok now we’re
actually gonna get to coding right now
any kind of application that I’d like to
build with this setup would be a simple
fitness application because I’m actually
just besides of coding I’m also into
fitness so we’re going to create a
simple exercise database with this
application so it’s just gonna be a
simple normal crud application and react
you’re gonna be able to add modify
delete and you exercises so it’s sort of
like sort of like a similar to the to-do
application you would typically build
but it’s just gonna be a little bit of a
different
and we’re gonna be using material UI for
the UI elements as well okay so the
first thing I’m going to do is and when
I click on preferences and in the editor
what I’m going to do is I’m actually
gonna disable pretty apply the reason
I’d like to do that is because well
there’s actually several reasons if
you’ll become the prettier settings
there’s actually a few things you could
do so for instance you could disable
semicolons at the end of statements you
could also use single quotes but when I
noticed this whenever you guys save the
files it it tends to indent them in ways
that are not necessarily congruent with
the way I would like to sell them so I’m
pretty confident in my skills so I’m
gonna be using my own styling of course
it’s up completely up to you if you want
to enable pretty flying in fact you
should probably enable it because it’s a
good guide it’s just a basically a good
guide for you to to index your stuff so
use it if you’d like to but in this case
I’m just gonna disable it I’m also gonna
replace all the semicolons that’s just a
personal thing that I like to do when my
projects always use semicolons and we’re
gonna clear up this just a little bit so
and just have a simple dev here and have
the app component let’s also put some
text in there so I’m just gonna say hi
react okay that now there’s no import
for the hello component in fact I’m just
gonna delete it okay this is basically
the clean setup that we have so the
first thing we like to do is it like a
create a new folder I’m gonna call it
components and I’m actually gonna create
the app component in there so I’d like
to move the app component from here
actually to the component file itself to
the module so when I do it here is let’s
import right or its react from react
that’s the first thing we have to do
next I’m going to export the faulty
function it’s going to see the props
even though we probably don’t have any
props but it’s just gonna be
and empty uh and I’m defined actually
okay and I’m the object and we’re gonna
indent this a little bit and this should
be good I think so we can import app
from components okay see that as you can
see we get the same out with us before
but so what I’d like to in the next days
I’d like to actually have a header at
the very top and for the header we’re
probably going to be using so back in
the documentation click on component
demos you can see there was the only
components that are present in the
libraries so the very first time I’d
like to use is the app bar at opponent
so it’s just gonna be a navigation bar
we’re also gonna have a header and we’re
also going to have the main content
obviously but let’s begin with a header
first so I’m just gonna create a
subfolder Michael and layouts and let’s
create a header header file in fact it’s
gonna be very similar to what the
structure is and fgs and just got copied
over and here I’m just gonna say I’m
gonna have a div with h1 it’s just we’re
just gonna say hair okay right now let’s
also create a footer like I said create
footer let’s go to that module
alright so any footer GS I’m just gonna
face the same thing but they put her in
there and let’s go back to app so the
thing about the app component I created
as a functional component but I think
what we’re actually gonna do is we’re
gonna have our state’s reside in the app
component I think so I’m actually gonna
convert it to a class based components
I’m just gonna do an export default
class it’s gonna be an anonymous class
extending the component from react and
of course we need to import that as well
let’s have the e component and in there
we’re just gonna have the render method
we’re going to return
some markup okay let’s have a div in
fact I’m going to put a fragment in here
no for those of you who don’t know the
fragment is basically a component and
react that allows you to have a an outer
wrapper for your elements so the problem
here is for instance let’s say I have
two elements so I have an h1 tag and you
should probably know this by now
but I’ll just explain that anyways and
you have some text in here in the
paragraph now what if you wanted to have
both of those elements at the same time
of course that’s not possible right so
you need to have a rapper a rapper
basically for those two elements
so one thing you would typically do is
you would how they did and of course
then you would have it closing to it but
in some scenarios you might also want to
have just a rapper that doesn’t actually
include any markups elicited will
actually be present on the page so you
have your body tags and then inside your
body you have the div that contains the
h1 tag and then the paragraph below it
in this case if you put the fragment the
cool thing is the fragment one actually
include any markup in and of itself so
we would just simply have the h1 tag and
paragraph directly below the body that’s
what I’m gonna be using you fragment of
course you have to import it from react
I’m just gonna save that but the misc
scenario I don’t want any header or
paragraphs so what I’m going to do is
I’m actually gonna have the header and
and this has to be capitalized of course
otherwise it’s gonna be treated as a
normal header in HTML the header is
actually a valid a valid element in
html5 and of course we need to import a
header from let’s see we need to go to
components layouts and then the header
and the same thing I’ll do for the
footer so the footer needs to be
imported from layouts ok
oh my bad sorry the components is
actually not necessary because we are in
the components folder so let’s save that
there we go we got the header and the
footer and then we’re also gonna have
the main content so what I’m gonna do
for the main content all of the Olympic
business logic is actually going to
and let’s call it exercises older and
the one thing I’ll do first is always as
you can see here we have a header and
the footer the only thing here is that
the path is actually duplicated and it’s
a little bit redundant so what I’m gonna
do is in layouts I’m actually gonna
create another file I’m gonna call it
index J s and an index J s what I’m
gonna do is I’m actually gonna import
header from header okay and the same
thing I also do for the footer and what
I’m actually gonna do in this file this
file will not do anything extraordinary
except it’s just basically going to
import the header and the footer using
the default keyboard and it’s also going
to export them from me from the module
and why am I doing this you might ask
well instead of having its who imports
of the header and footer separately
because these are default imports and we
have to have actually two separate
statements because these are two
separate modules but now because we had
at the index.js file what I can do now
is I can actually import the Harrow in
the footer in one line using the named
import I can just simply say go to
layouts and that’s it I don’t need to
use the header or the footer post fix
afterwards and I can just save that and
it’s going to work the way it works
just to clarify mention it several times
before on my channel as well in other
projects but basically the idea is once
you go to a folder in this case well
first of all is gonna look for layouts
J’s file right under components but
there’s no such file so it’s gonna look
for the folder so it sees okay we’ve got
the layouts folder let’s go through that
folder and let’s go to index yes because
it’s actually gonna look for the entry
files and SJS and goes in there imports
the two components and then exports time
using name to export and once we’ve got
that let’s go back to the exercise what
I’m going to do here is am I trying to
create a new file that’s also holding
into XJS and this file is actually going
to house all of the business logic so
we’re gonna import react from react
we’re also going to export defaults a
function
ROPS it’s gonna accept the props and
it’s going to return some markup right
now I’m just gonna have a div with a
closing tag let’s say hello from
exercises okay let’s say that let’s go
back to ops yes and I’m also going to
import exercises from exercises no I
don’t need to use a name important in
this case because we are actually doing
it default export okay so we don’t need
to do that and of course you could
adjust it or change it to your needs so
you might actually use a name and export
and if you’d like to but I’m just didn’t
keep it for that way for now so what we
have here is would basically have a very
primitive rudimentary setup that allows
us to have a header the main content of
the page as e as you might expect and as
well as the footer so what we’re gonna
do from this point is we’re actually
going to use this Kelton in order to build out the application
Please follow and like us: