alright so in the previous video we
added a holidays model so now if you
click on the holidays button it’s going
to launch a model for us and what I want
to do here is I want to display a table
of holidays so we already have a
countdown timer here going on and if you
recall we actually have a state here and
the index.js file or in the countdown
component we have a current date here
which is basically a moment object
representing the date and time of now we
also have a next day that represents the
end of the year of course you can also
enter a custom date now what I want to
do here is I actually want to display a
list of all of the holidays between the
two dates so in order to do that we
would need to reach out for an external
library of course now we could implement
it manually but I’ll probably take a lot
of time so let’s just use it an external
library from NPM now one library that I
actually found to be pretty useful
pretty interesting is moment holiday by
Cody so what I’m gonna do is I’m
actually gonna pull in that library so
let me stop the server I’m gonna do NPM
install with – s that’s gonna save the
library and I’m just gonna say moment
holiday so let’s give it some time to
install and back in here if you watch
the video about es6 modules there’s also
another syntax for importing modules in
es6 or in JavaScript with es6 so one
thing you can do is you could import the
module and assign it to a local variable
so for example in this case we have a
moment binding that refers to the moment
library but it also important module as
is and it’s basically just going to run
the code from that module without
actually binding the library or module
itself to anything so in this case
that’s exactly what I want to do so I
want to import moment holiday and that’s
just basically going to execute the code
from that library and what I need to do
here is let’s bring back the
a deaf server the web back that server
and once you refresh you’re gonna see
that we get an error here and the thing
it complains about is that I can’t find
the module so I think this is actually
intrinsic to how the library itself is
structured and there’s not much we can
do about that in fact I actually try to
use this library on called sandbox IO
and I didn’t have any issues so for
instance I have a simple application
here basically just added a moment
holiday the same type of import and it
just two are fine like you go to the
full screen mode and open up the console
so you can the application loads just
fine and there’s nothing in the console
so what the host has to do with it back
configuration yeah of course the one
thing we could do is we could use the
last resort of doing NPM running check
it’s just basically going to dump all
the web back configuration and then we
can play with that but again it’s gonna
take some time there’s a quick
workaround that I was able to do
specifically with regards to moment
moment holiday library so if you scroll
down let’s find that library in the list
of node modules there it is so the file
it is actually looking at is moment
holiday us men GS so if you go to that
file let’s go to build here it is that’s
the file that’s basically the minified
version and like I said there’s probably
a better way to do this and I can’t
foresee that it probably requires like I
said to eject the web pack configuration
and then tweak it a little bit but we’re
just gonna do here is let’s just copy
this pattern over here and this
basically is what is being used to
require the moment library you search
for that and replace it with a simple
require moment okay and you do replace
all and you save that if you go back we
would also need to restart the
application where you’re starting server
so let’s just do that
NPM start and back in here reload you
can see that pretty much works so once
we have that set up we can actually use
the library
so I miss let’s just close that so back
in an XJS we have moment holiday and
with that import we actually get a bunch
of methods for working with moment
objects as holidays and the very first
method I’m going to use and by the way
I’m actually just on the github page of
that library so if you click on holidays
between that’s a handy method it
basically allows us to get all the
holidays between the two dates so for
instance when you click them when you
call that method on a moment instance
and you pass another instance of moment
that’s basically that infants plus one
year you’re gonna get a whole bunch of
holidays that are basically between
those two dates and Lincoln also
converts those instances to actual
strings by using is holiday method so
for instance and here is down for
instance if you just call that method on
a string it’s going to give you a string
representation of that holiday so for
instance New Year’s Eve okay and we’re
going to use a combination of those
methods so back in index GS let’s
actually add a method here so I’m going
to call it get the holidays holidays and
we’re just gonna do this okay so let’s
first of all extract the two dates we
need access to card date as well as next
date and just as always I’m gonna use
destructuring here so let’s get the
current date as well as the next date
okay we’re gonna get them from the state
and we are going to return current date
dot holidays between and we’re gonna
pass next day to it okay and let’s
actually call that method from component
did mount just see what this method is
going to return so once you go back and
something going on here holidays I keep
making the same
typos guys sorry about that holidays
with an why in the middle okay I can
hear and we get an array of moment
objects what wasn’t actually perfect
because once we get the moment object we
can also use formatting methods and what
it’s you format the outputs of those
objects to the user to the UI so this is
great
and what I’m gonna do is let’s go back
and remove that console up I’m actually
gonna extract the methyl alcohol and
let’s just let’s go down and here and
have another constant here let’s call it
the holidays okay and we’re just gonna
invoke that method off the class and of
course I’m also going to pass the
holidays to a model so it’s pass that
array down to the model I’m also gonna
adjust the positioning here the
attributes just to make it more readable
okay let’s save that and in holidays
model we’re gonna expect the holidays
property so everything seems to be
running just fine
so back in the model let’s actually add
a table here now if you go back to the
Beaumont documentation you could
actually see the table element under
elements table and that’s an example of
a table you can use and if you click on
show code you could basically see the
mark-up for a typical table so you have
a table element for the class of table
you have a tea hat as well as seafood
seafood is optional if you do have it
don’t forget to put it after tea hat but
before tea body and tea body is actually
the table by you in the table contents
they’re gonna have all the data in here
so we’re going to use the same pattern
so let’s have a table and it’s also at a
class of table okay we’re gonna have
table a head
we also gonna have table by okay
now what I’m gonna do in table had is
first of all let’s add a role and we’re
gonna have a couple of headings okay
actually to one of them is going to be
for the dates so I want to show the
actual date string okay so for instance
25th December of 2018 which would be a
new year alright and the next thing I’d
like to show is the holiday itself so
this would say new year for example okay
now in the body we’re actually going to
output a list so the way we would do
this is using the following syntax so
what you talked about gsx expressions no
GSX expressions could have you know
calculations inside of them they could
also be method calls so for example if I
had a method here where you function
actually so I don’t know something
random an arrow function that returns
something and I wanted to call that
function I could simply invoke it like
that
and besides functions like I said it
could be method calls and objects it
could be all sorts of expressions but in
this example we want to display an array
and actually we do have an array it’s
going to be an array of holidays what we
want to do is we actually want to map
through it so when you call the map
function
it basically expects a callback and the
callback is going to be an error
function now in this example I expect
one argument it’s going to be the
holiday and the holiday is going to hold
the element of the holidays array
through which we are currently looping
and the callback function needs to
return something though what it’s going
to return like I said it’s receives a
holiday object it’s going to be a moment
object whatever the holidays array
contains all those elements one by one
but we need to return something from
this callback and we’re actually going
to return a table row okay and inside of
that table what we’re going to have two
elements of table data
I’m just gonna copy that the first one
is going to be the date now for the
dates because we have the holiday moment
object here we can actually call
calendar method on it that’s the killer
method you saw before you could also use
the format function of course but I find
calendar just shorter I stick to that
and the second one would actually be the
holiday itself now there’s no such
method in moment to achieve that but
because we pulled in the library moment
holiday there is actually a method for
getting the holiday so for instance our
string you call is holiday that’s gonna
give you the name of the holiday this is
the method we want to use so is holiday
we’re gonna call that and let’s actually
save it let’s go back and see if we get
any errors now you click on holidays and
you see a table here which is pretty
neat now we do actually get a warning on
the right so it says that each child in
an array our iterator should have a
unique key property not new yet whenever
you return an array from a JSX
expression every element in that array
needs to have a special key actually and
the key actually basically allows react
to keep track of all of the elements in
the array whenever something changes or
new elements are added or old elements
are removed
so basically the key property just
simply allows me to keep track of all of
the elements and most of the time
because the key has to uniquely identify
each element in the array typically it
would use something like ID or you know
some kind of a unique identifier that
you get with the object so for instance
you make a call to the API you get a
list of users and every user has the I
has an ID and typically would use that
ID that unique identifier from the
database for your list or of course it
could be a time step or it could be
pretty much anything that uniquely
identifies the each element or each
sibling inside of that array or list in
this case we don’t actually have such an
identifier so I’m going to use an index
of the array element it’s
now I get if you’re confused about the
map function feel free to stop by and
just go to documentation and you’ll see
the array.prototype map method and like
I said the map method creates a new
array with results of the provided
callback so for instance here we have a
list of numbers you call the map
function on let me provide a callback I
want every single element to be
multiplied by two and if you cancel out
the results of that expression you’re
gonna get a brand new array with all the
elements multiplied by 2
like I was saying the Kolbe after you
pass and it’s going to have the current
value so in this example it’s the
holiday moment object but it’s also
going to allow us to have the index of
the array element that we are currently
dealing with and we’re gonna use that
index as the key for react so that it
stops complaining ok if you go back and
this is just going to work fine now you
got to be careful with array indices and
the reason for that is for example you
have a simple to do application and
let’s say you add new to-do items when
you remove them well I’ve actually going
to change the array on the state right
so for example you had 5 items you
remove something from the middle and you
end up with 4 well that actually changes
the indices of all the elements in the
array right and that means that we add
will also had to rerender the whole list
because the key for each of the elements
in the array has changed and that’s not
very optimal and that’s why I typically
react in the react documentation if you
read them they suggest not to use the
index as the key for your list items and
the last thing I’ll mention is the IDs
that you use for your list well they
don’t actually have to be unique for
that list if it’s being used some rules
so the IDS have to be unique for those
elements within the list but it doesn’t
mean that you might have the same list
with the same ideas in a few in fact we
have two tables here and if I say that
it’s going to work there’s not gonna be
any errors it’s basically going to be
the thing was duplicated but the reason
it works is because those IDs those keys
have to be unique but
for the sibling elements within that new
array that the map function returns if
we have to map calls here they’re
basically independent so we can have the
same exact IDs as long as those IDs are
unique within the new array that the map
function creates we’re fine
we don’t get any errors and we could
actually have as many lists here as we
want for the same identical key values
if you go back to the table
documentation on the boma site there’s
also a bunch of other useful classes
that you could apply to your tables for
example there’s week and is border class
this is stripe there is is hover bowl
that makes the table rows huh verbal
there’s also full width and of course
you could also combine them together to
have a compound effect so that’s what
I’m actually gonna do so let’s have a is
full width that’s basically going to
make the table full width okay that
looks better
no it’s also add another class let’s do
is horrible that’s gonna make the rows
horrible like that let’s see is there
any other useful classes that we might
be interested in also use is striped and
let’s see how that’s gonna look so this
is what it looks like and the last one
I’m gonna use is is ordered I think
that’s what it is let’s go back yeah is
ordered so let’s say that go back to the
app let’s watch the Moodle that’s gonna
make the table border which looks pretty
neat in my opinion now the last thing
I’ll do is let’s also kill the footer
here because without having any buttons
at the bottom it doesn’t really make
sense for happen and for the model title
let’s just simply say holidays so let’s
just put holidays and if you go back to
industrious actually I created a
holidays variable but I never actually
passed it down to holidays Moodle so
instead of making that call well because
I only use the holidays once that’s
pretty much up to you but I would
probably just
pass that holidays very bull or actually
it’s gonna be an array right and I’m
just gonna bounce it down to holidays
model keep the coal up there at the top
of the render function and that’s gonna
get rid of the other warning that we had
before and now you click on holidays
this is what the model basically looks
like and of course you could close it by
either clicking on the background or
just clicking on the cross that’s pretty
much it for holidays not like I said we
had to do a trick we have to basically
go into node modules and change some of
the the way it actually requires the
moment library inside of it now of
course it’s sort of like a hack and of
course I wouldn’t use that in production
though the downside is whenever you run
npm install that’s basically going to
clear up everything inside of your node
modules and it’s going to pull in all
those modules again so it’s gonna clear
up the changes that we actually did
inside of that file so if I go back to
it it’s gonna just find it holiday there
we go on holiday us mange s well if you
run npm install it’s going to clear up
the contents of this floods can replace
them with whatever is provided by the
NPM registry right so the changes that
we did are going to be overwritten and
this is not a sustainable solution like
I said if you want to optimize this
library for a front-end web pack set you
probably need to run the eject command
now what’s he checked him and I’m
talking about if you go to package JSON
file
you’re gonna see the way are the section
with scripts here and the one I’ve been
using all the time is NPM start but
there’s also India build test and II
checked the eject command is the it
checked command that I was talking about
actually and if you do that it’s
basically going to inject the web pack
configuration to the project now you
have to be careful this command because
once you do it there’s no going back so
you need to be careful with it make sure
to save your files and commit to your
github or bitbucket or gitlab repository
whatever make sure to save the files
before you run that command so you could
actually go
converts changes but if you’re not using
gifts just be careful because there’s no
going back otherwise okay and we would
actually must redo that we would
actually need to tweak the webpack
configuration but that’s it quite a bit
of hassle so I do want to clog up the
video series here so like I said don’t
use this example for production that’s
not a sustainable solution but for a
quick demo just to show the holidays I
think it’s pretty good and it works for
us just fine so just keep that in mind
and please don’t use this in production
or else you’re gonna be trouble so
that’s pretty much it for the video I
think I’m just gonna make another one
where we’re gonna just put some last
final touches to the project and
hopefully fix some of the other issues
if we have any so hope to see you there and that’s pretty much it bye bye
added a holidays model so now if you
click on the holidays button it’s going
to launch a model for us and what I want
to do here is I want to display a table
of holidays so we already have a
countdown timer here going on and if you
recall we actually have a state here and
the index.js file or in the countdown
component we have a current date here
which is basically a moment object
representing the date and time of now we
also have a next day that represents the
end of the year of course you can also
enter a custom date now what I want to
do here is I actually want to display a
list of all of the holidays between the
two dates so in order to do that we
would need to reach out for an external
library of course now we could implement
it manually but I’ll probably take a lot
of time so let’s just use it an external
library from NPM now one library that I
actually found to be pretty useful
pretty interesting is moment holiday by
Cody so what I’m gonna do is I’m
actually gonna pull in that library so
let me stop the server I’m gonna do NPM
install with – s that’s gonna save the
library and I’m just gonna say moment
holiday so let’s give it some time to
install and back in here if you watch
the video about es6 modules there’s also
another syntax for importing modules in
es6 or in JavaScript with es6 so one
thing you can do is you could import the
module and assign it to a local variable
so for example in this case we have a
moment binding that refers to the moment
library but it also important module as
is and it’s basically just going to run
the code from that module without
actually binding the library or module
itself to anything so in this case
that’s exactly what I want to do so I
want to import moment holiday and that’s
just basically going to execute the code
from that library and what I need to do
here is let’s bring back the
a deaf server the web back that server
and once you refresh you’re gonna see
that we get an error here and the thing
it complains about is that I can’t find
the module so I think this is actually
intrinsic to how the library itself is
structured and there’s not much we can
do about that in fact I actually try to
use this library on called sandbox IO
and I didn’t have any issues so for
instance I have a simple application
here basically just added a moment
holiday the same type of import and it
just two are fine like you go to the
full screen mode and open up the console
so you can the application loads just
fine and there’s nothing in the console
so what the host has to do with it back
configuration yeah of course the one
thing we could do is we could use the
last resort of doing NPM running check
it’s just basically going to dump all
the web back configuration and then we
can play with that but again it’s gonna
take some time there’s a quick
workaround that I was able to do
specifically with regards to moment
moment holiday library so if you scroll
down let’s find that library in the list
of node modules there it is so the file
it is actually looking at is moment
holiday us men GS so if you go to that
file let’s go to build here it is that’s
the file that’s basically the minified
version and like I said there’s probably
a better way to do this and I can’t
foresee that it probably requires like I
said to eject the web pack configuration
and then tweak it a little bit but we’re
just gonna do here is let’s just copy
this pattern over here and this
basically is what is being used to
require the moment library you search
for that and replace it with a simple
require moment okay and you do replace
all and you save that if you go back we
would also need to restart the
application where you’re starting server
so let’s just do that
NPM start and back in here reload you
can see that pretty much works so once
we have that set up we can actually use
the library
so I miss let’s just close that so back
in an XJS we have moment holiday and
with that import we actually get a bunch
of methods for working with moment
objects as holidays and the very first
method I’m going to use and by the way
I’m actually just on the github page of
that library so if you click on holidays
between that’s a handy method it
basically allows us to get all the
holidays between the two dates so for
instance when you click them when you
call that method on a moment instance
and you pass another instance of moment
that’s basically that infants plus one
year you’re gonna get a whole bunch of
holidays that are basically between
those two dates and Lincoln also
converts those instances to actual
strings by using is holiday method so
for instance and here is down for
instance if you just call that method on
a string it’s going to give you a string
representation of that holiday so for
instance New Year’s Eve okay and we’re
going to use a combination of those
methods so back in index GS let’s
actually add a method here so I’m going
to call it get the holidays holidays and
we’re just gonna do this okay so let’s
first of all extract the two dates we
need access to card date as well as next
date and just as always I’m gonna use
destructuring here so let’s get the
current date as well as the next date
okay we’re gonna get them from the state
and we are going to return current date
dot holidays between and we’re gonna
pass next day to it okay and let’s
actually call that method from component
did mount just see what this method is
going to return so once you go back and
something going on here holidays I keep
making the same
typos guys sorry about that holidays
with an why in the middle okay I can
hear and we get an array of moment
objects what wasn’t actually perfect
because once we get the moment object we
can also use formatting methods and what
it’s you format the outputs of those
objects to the user to the UI so this is
great
and what I’m gonna do is let’s go back
and remove that console up I’m actually
gonna extract the methyl alcohol and
let’s just let’s go down and here and
have another constant here let’s call it
the holidays okay and we’re just gonna
invoke that method off the class and of
course I’m also going to pass the
holidays to a model so it’s pass that
array down to the model I’m also gonna
adjust the positioning here the
attributes just to make it more readable
okay let’s save that and in holidays
model we’re gonna expect the holidays
property so everything seems to be
running just fine
so back in the model let’s actually add
a table here now if you go back to the
Beaumont documentation you could
actually see the table element under
elements table and that’s an example of
a table you can use and if you click on
show code you could basically see the
mark-up for a typical table so you have
a table element for the class of table
you have a tea hat as well as seafood
seafood is optional if you do have it
don’t forget to put it after tea hat but
before tea body and tea body is actually
the table by you in the table contents
they’re gonna have all the data in here
so we’re going to use the same pattern
so let’s have a table and it’s also at a
class of table okay we’re gonna have
table a head
we also gonna have table by okay
now what I’m gonna do in table had is
first of all let’s add a role and we’re
gonna have a couple of headings okay
actually to one of them is going to be
for the dates so I want to show the
actual date string okay so for instance
25th December of 2018 which would be a
new year alright and the next thing I’d
like to show is the holiday itself so
this would say new year for example okay
now in the body we’re actually going to
output a list so the way we would do
this is using the following syntax so
what you talked about gsx expressions no
GSX expressions could have you know
calculations inside of them they could
also be method calls so for example if I
had a method here where you function
actually so I don’t know something
random an arrow function that returns
something and I wanted to call that
function I could simply invoke it like
that
and besides functions like I said it
could be method calls and objects it
could be all sorts of expressions but in
this example we want to display an array
and actually we do have an array it’s
going to be an array of holidays what we
want to do is we actually want to map
through it so when you call the map
function
it basically expects a callback and the
callback is going to be an error
function now in this example I expect
one argument it’s going to be the
holiday and the holiday is going to hold
the element of the holidays array
through which we are currently looping
and the callback function needs to
return something though what it’s going
to return like I said it’s receives a
holiday object it’s going to be a moment
object whatever the holidays array
contains all those elements one by one
but we need to return something from
this callback and we’re actually going
to return a table row okay and inside of
that table what we’re going to have two
elements of table data
I’m just gonna copy that the first one
is going to be the date now for the
dates because we have the holiday moment
object here we can actually call
calendar method on it that’s the killer
method you saw before you could also use
the format function of course but I find
calendar just shorter I stick to that
and the second one would actually be the
holiday itself now there’s no such
method in moment to achieve that but
because we pulled in the library moment
holiday there is actually a method for
getting the holiday so for instance our
string you call is holiday that’s gonna
give you the name of the holiday this is
the method we want to use so is holiday
we’re gonna call that and let’s actually
save it let’s go back and see if we get
any errors now you click on holidays and
you see a table here which is pretty
neat now we do actually get a warning on
the right so it says that each child in
an array our iterator should have a
unique key property not new yet whenever
you return an array from a JSX
expression every element in that array
needs to have a special key actually and
the key actually basically allows react
to keep track of all of the elements in
the array whenever something changes or
new elements are added or old elements
are removed
so basically the key property just
simply allows me to keep track of all of
the elements and most of the time
because the key has to uniquely identify
each element in the array typically it
would use something like ID or you know
some kind of a unique identifier that
you get with the object so for instance
you make a call to the API you get a
list of users and every user has the I
has an ID and typically would use that
ID that unique identifier from the
database for your list or of course it
could be a time step or it could be
pretty much anything that uniquely
identifies the each element or each
sibling inside of that array or list in
this case we don’t actually have such an
identifier so I’m going to use an index
of the array element it’s
now I get if you’re confused about the
map function feel free to stop by and
just go to documentation and you’ll see
the array.prototype map method and like
I said the map method creates a new
array with results of the provided
callback so for instance here we have a
list of numbers you call the map
function on let me provide a callback I
want every single element to be
multiplied by two and if you cancel out
the results of that expression you’re
gonna get a brand new array with all the
elements multiplied by 2
like I was saying the Kolbe after you
pass and it’s going to have the current
value so in this example it’s the
holiday moment object but it’s also
going to allow us to have the index of
the array element that we are currently
dealing with and we’re gonna use that
index as the key for react so that it
stops complaining ok if you go back and
this is just going to work fine now you
got to be careful with array indices and
the reason for that is for example you
have a simple to do application and
let’s say you add new to-do items when
you remove them well I’ve actually going
to change the array on the state right
so for example you had 5 items you
remove something from the middle and you
end up with 4 well that actually changes
the indices of all the elements in the
array right and that means that we add
will also had to rerender the whole list
because the key for each of the elements
in the array has changed and that’s not
very optimal and that’s why I typically
react in the react documentation if you
read them they suggest not to use the
index as the key for your list items and
the last thing I’ll mention is the IDs
that you use for your list well they
don’t actually have to be unique for
that list if it’s being used some rules
so the IDS have to be unique for those
elements within the list but it doesn’t
mean that you might have the same list
with the same ideas in a few in fact we
have two tables here and if I say that
it’s going to work there’s not gonna be
any errors it’s basically going to be
the thing was duplicated but the reason
it works is because those IDs those keys
have to be unique but
for the sibling elements within that new
array that the map function returns if
we have to map calls here they’re
basically independent so we can have the
same exact IDs as long as those IDs are
unique within the new array that the map
function creates we’re fine
we don’t get any errors and we could
actually have as many lists here as we
want for the same identical key values
if you go back to the table
documentation on the boma site there’s
also a bunch of other useful classes
that you could apply to your tables for
example there’s week and is border class
this is stripe there is is hover bowl
that makes the table rows huh verbal
there’s also full width and of course
you could also combine them together to
have a compound effect so that’s what
I’m actually gonna do so let’s have a is
full width that’s basically going to
make the table full width okay that
looks better
no it’s also add another class let’s do
is horrible that’s gonna make the rows
horrible like that let’s see is there
any other useful classes that we might
be interested in also use is striped and
let’s see how that’s gonna look so this
is what it looks like and the last one
I’m gonna use is is ordered I think
that’s what it is let’s go back yeah is
ordered so let’s say that go back to the
app let’s watch the Moodle that’s gonna
make the table border which looks pretty
neat in my opinion now the last thing
I’ll do is let’s also kill the footer
here because without having any buttons
at the bottom it doesn’t really make
sense for happen and for the model title
let’s just simply say holidays so let’s
just put holidays and if you go back to
industrious actually I created a
holidays variable but I never actually
passed it down to holidays Moodle so
instead of making that call well because
I only use the holidays once that’s
pretty much up to you but I would
probably just
pass that holidays very bull or actually
it’s gonna be an array right and I’m
just gonna bounce it down to holidays
model keep the coal up there at the top
of the render function and that’s gonna
get rid of the other warning that we had
before and now you click on holidays
this is what the model basically looks
like and of course you could close it by
either clicking on the background or
just clicking on the cross that’s pretty
much it for holidays not like I said we
had to do a trick we have to basically
go into node modules and change some of
the the way it actually requires the
moment library inside of it now of
course it’s sort of like a hack and of
course I wouldn’t use that in production
though the downside is whenever you run
npm install that’s basically going to
clear up everything inside of your node
modules and it’s going to pull in all
those modules again so it’s gonna clear
up the changes that we actually did
inside of that file so if I go back to
it it’s gonna just find it holiday there
we go on holiday us mange s well if you
run npm install it’s going to clear up
the contents of this floods can replace
them with whatever is provided by the
NPM registry right so the changes that
we did are going to be overwritten and
this is not a sustainable solution like
I said if you want to optimize this
library for a front-end web pack set you
probably need to run the eject command
now what’s he checked him and I’m
talking about if you go to package JSON
file
you’re gonna see the way are the section
with scripts here and the one I’ve been
using all the time is NPM start but
there’s also India build test and II
checked the eject command is the it
checked command that I was talking about
actually and if you do that it’s
basically going to inject the web pack
configuration to the project now you
have to be careful this command because
once you do it there’s no going back so
you need to be careful with it make sure
to save your files and commit to your
github or bitbucket or gitlab repository
whatever make sure to save the files
before you run that command so you could
actually go
converts changes but if you’re not using
gifts just be careful because there’s no
going back otherwise okay and we would
actually must redo that we would
actually need to tweak the webpack
configuration but that’s it quite a bit
of hassle so I do want to clog up the
video series here so like I said don’t
use this example for production that’s
not a sustainable solution but for a
quick demo just to show the holidays I
think it’s pretty good and it works for
us just fine so just keep that in mind
and please don’t use this in production
or else you’re gonna be trouble so
that’s pretty much it for the video I
think I’m just gonna make another one
where we’re gonna just put some last
final touches to the project and
hopefully fix some of the other issues
if we have any so hope to see you there and that’s pretty much it bye bye
Please follow and like us: