hey guys welcome to another YouTube mini course in this video we’re going to look
course in this video we’re going to look
course in this video we’re going to look at the ins and outs of react j/s alright
at the ins and outs of react j/s alright
at the ins and outs of react j/s alright and react is actually one of my favorite
and react is actually one of my favorite
and react is actually one of my favorite technologies that I’ve worked with
technologies that I’ve worked with
technologies that I’ve worked with lately and if you haven’t used it I
lately and if you haven’t used it I
lately and if you haven’t used it I definitely suggest really looking into
definitely suggest really looking into
definitely suggest really looking into it because it can change the way that
it because it can change the way that
it because it can change the way that you think of user interfaces and work
you think of user interfaces and work
you think of user interfaces and work with user interfaces I’m working on a 10
with user interfaces I’m working on a 10
with user interfaces I’m working on a 10 project react course now as soon as
project react course now as soon as
project react course now as soon as that’s available I’ll put the link in
that’s available I’ll put the link in
that’s available I’ll put the link in the description I also have an intro to
the description I also have an intro to
the description I also have an intro to react and a react and flux course
react and a react and flux course
react and a react and flux course project course so you can check out as
project course so you can check out as
project course so you can check out as well alright now we are going to jump in
well alright now we are going to jump in
well alright now we are going to jump in and look at some code but I do want to
and look at some code but I do want to
and look at some code but I do want to just go over real quick I’m just
just go over real quick I’m just
just go over real quick I’m just basically what react is and some of its
basically what react is and some of its
basically what react is and some of its advantages
advantages
advantages alright so it’s an open source
alright so it’s an open source
alright so it’s an open source JavaScript library for building dynamic
JavaScript library for building dynamic
JavaScript library for building dynamic user interfaces and it doesn’t have
user interfaces and it doesn’t have
user interfaces and it doesn’t have anything to do with the backend of your
anything to do with the backend of your
anything to do with the backend of your application working with a database and
application working with a database and
application working with a database and so on it’s it’s basically the V in MVC a
so on it’s it’s basically the V in MVC a
so on it’s it’s basically the V in MVC a and Model View controller it’s
and Model View controller it’s
and Model View controller it’s maintained by Facebook Instagram and the
maintained by Facebook Instagram and the
maintained by Facebook Instagram and the community of individual developers so
community of individual developers so
community of individual developers so some advantages of react it allows you
some advantages of react it allows you
some advantages of react it allows you to design simple declarative views for
to design simple declarative views for
to design simple declarative views for each state in your application if you
each state in your application if you
each state in your application if you don’t know what I mean by state if we
don’t know what I mean by state if we
don’t know what I mean by state if we think of an email client when you view
think of an email client when you view
think of an email client when you view your inbox that’s considered a state if
your inbox that’s considered a state if
your inbox that’s considered a state if you were to click compose and then your
you were to click compose and then your
you were to click compose and then your editor opens up that’s another state so
editor opens up that’s another state so
editor opens up that’s another state so react takes those states and allows you
react takes those states and allows you
react takes those states and allows you to create and manage views and
to create and manage views and
to create and manage views and components for them alright so
components for them alright so
components for them alright so everything in a view is encapsulated in
everything in a view is encapsulated in
everything in a view is encapsulated in a component and those components can
a component and those components can
a component and those components can have their own properties and state as
have their own properties and state as
have their own properties and state as well if you want to get into more
well if you want to get into more
well if you want to get into more complicated application wide state you
complicated application wide state you
complicated application wide state you could look into flux or redux which is
could look into flux or redux which is
could look into flux or redux which is an application architecture but that’s a
an application architecture but that’s a
an application architecture but that’s a little more complicated than what I want
little more complicated than what I want
little more complicated than what I want to get into today alright so we’ll be
to get into today alright so we’ll be
to get into today alright so we’ll be dealing strictly with react Jas
dealing strictly with react Jas
dealing strictly with react Jas react uses what’s called a virtual Dom
react uses what’s called a virtual Dom
react uses what’s called a virtual Dom or virtual document object model I’ll
or virtual document object model I’ll
or virtual document object model I’ll talk more about that in a minute but
talk more about that in a minute but
talk more about that in a minute but basically it allows you to work with and
basically it allows you to work with and
basically it allows you to work with and render only certain parts of the Dom
render only certain parts of the Dom
render only certain parts of the Dom that you need another great advantage of
that you need another great advantage of
that you need another great advantage of react is it’s completely independent of
react is it’s completely independent of
react is it’s completely independent of the rest of your app as I said so you
the rest of your app as I said so you
the rest of your app as I said so you can use it with pretty much any other
can use it with pretty much any other
can use it with pretty much any other framework or any other technology that
framework or any other technology that
framework or any other technology that you’d like it also can render on the
you’d like it also can render on the
you’d like it also can render on the client or the server you can use it with
client or the server you can use it with
client or the server you can use it with nodejs and NPM
nodejs and NPM
nodejs and NPM as well as just including it as in a
as well as just including it as in a
as well as just including it as in a script tag and using it right near HTML
script tag and using it right near HTML
script tag and using it right near HTML files so as I said react uses a virtual
files so as I said react uses a virtual
files so as I said react uses a virtual Dom and it basically abstracts away the
Dom and it basically abstracts away the
Dom and it basically abstracts away the Dom and creates its own version which is
Dom and creates its own version which is
Dom and creates its own version which is simplified and only includes the things
simplified and only includes the things
simplified and only includes the things that you need all right it also helps us
that you need all right it also helps us
that you need all right it also helps us identify which parts have changed so
identify which parts have changed so
identify which parts have changed so when you when you update your component
when you when you update your component
when you when you update your component somehow and you want to basically re
somehow and you want to basically re
somehow and you want to basically re render it instead of having to refresh
render it instead of having to refresh
render it instead of having to refresh the entire application react can take a
the entire application react can take a
the entire application react can take a look at what’s changed and look at the
look at what’s changed and look at the
look at what’s changed and look at the original Dom and then just re render
original Dom and then just re render
original Dom and then just re render that part that needs to update all right
that part that needs to update all right
that part that needs to update all right so it determines how to upload the
so it determines how to upload the
so it determines how to upload the browser’s Dom more efficiently and it’s
browser’s Dom more efficiently and it’s
browser’s Dom more efficiently and it’s also much more lightweight and that
also much more lightweight and that
also much more lightweight and that makes it work a lot faster all right so
makes it work a lot faster all right so
makes it work a lot faster all right so let’s take a look at an extremely simple
let’s take a look at an extremely simple
let’s take a look at an extremely simple application or extremely simple
application or extremely simple
application or extremely simple component called hello message and you
component called hello message and you
component called hello message and you can see that basically we have a class
can see that basically we have a class
can see that basically we have a class called hello message that extends react
called hello message that extends react
called hello message that extends react component and inside here we have a
component and inside here we have a
component and inside here we have a method or a function called render which
method or a function called render which
method or a function called render which is the only function that’s actually
is the only function that’s actually
is the only function that’s actually required in a component there’s you know
required in a component there’s you know
required in a component there’s you know many more and you can create custom
many more and you can create custom
many more and you can create custom functions but render is required and you
functions but render is required and you
functions but render is required and you can see we’re returning what looks like
can see we’re returning what looks like
can see we’re returning what looks like an HTML element this is actually JSX
an HTML element this is actually JSX
an HTML element this is actually JSX ok Java scripts intact extension which
ok Java scripts intact extension which
ok Java scripts intact extension which I’ll talk about in a second
I’ll talk about in a second
I’ll talk about in a second basically what we’re doing is saying
basically what we’re doing is saying
basically what we’re doing is saying hello and then we have this this dot
hello and then we have this this dot
hello and then we have this this dot property or a dot props name all right
property or a dot props name all right
property or a dot props name all right so this is a component property now down
so this is a component property now down
so this is a component property now down here we’re using the react Dom to render
here we’re using the react Dom to render
here we’re using the react Dom to render it you can see we’re using this hello
it you can see we’re using this hello
it you can see we’re using this hello message which is the name of the
message which is the name of the
message which is the name of the component and we’re passing in a
component and we’re passing in a
component and we’re passing in a property called name with the value of
property called name with the value of
property called name with the value of Jane all right so right here would
Jane all right so right here would
Jane all right so right here would display whatever we pass in here which
display whatever we pass in here which
display whatever we pass in here which is Jane and then this parameter is where
is Jane and then this parameter is where
is Jane and then this parameter is where we want to insert the component in our
we want to insert the component in our
we want to insert the component in our HTML so typically you’d have a div with
HTML so typically you’d have a div with
HTML so typically you’d have a div with the ID of a pour route or something like
the ID of a pour route or something like
the ID of a pour route or something like that and you would insert insert it
that and you would insert insert it
that and you would insert insert it right in there all right so JSX stands
right in there all right so JSX stands
right in there all right so JSX stands for JavaScript syntax extension and it’s
for JavaScript syntax extension and it’s
for JavaScript syntax extension and it’s a preprocessor step that adds xml to
a preprocessor step that adds xml to
a preprocessor step that adds xml to JavaScript it looks much like XML or
JavaScript it looks much like XML or
JavaScript it looks much like XML or HTML there are a few differences and
HTML there are a few differences and
HTML there are a few differences and they’ll go into that later on but
they’ll go into that later on but
they’ll go into that later on but basically it defines a familiar syntax
basically it defines a familiar syntax
basically it defines a familiar syntax for defining tree structures with
for defining tree structures with
for defining tree structures with attributes and it’s not required but is
attributes and it’s not required but is
attributes and it’s not required but is definitely recommended and maich thing
definitely recommended and maich thing
definitely recommended and maich thing makes things much easier and later on I
makes things much easier and later on I
makes things much easier and later on I can show you an example of JSX and also
can show you an example of JSX and also
can show you an example of JSX and also the JavaScript that generates it and you
the JavaScript that generates it and you
the JavaScript that generates it and you can see how much easier it is to just
can see how much easier it is to just
can see how much easier it is to just use JSX so what you’ll learn in this
use JSX so what you’ll learn in this
use JSX so what you’ll learn in this mini-course how to create a react
mini-course how to create a react
mini-course how to create a react application how to create components
application how to create components
application how to create components manage state and properties handle
manage state and properties handle
manage state and properties handle events work with forms and input work
events work with forms and input work
events work with forms and input work with JSX
with JSX
with JSX we’ll take a look at some of the
we’ll take a look at some of the
we’ll take a look at some of the lifecycle methods and also how to fetch
lifecycle methods and also how to fetch
lifecycle methods and also how to fetch data from an API and bring it into our
data from an API and bring it into our
data from an API and bring it into our component all right so enough of the
component all right so enough of the
component all right so enough of the slides let’s jump in and create a react
slides let’s jump in and create a react
slides let’s jump in and create a react application all right so we’re going to
application all right so we’re going to
application all right so we’re going to jump in and start to write some code
jump in and start to write some code
jump in and start to write some code with react j/s now as far as the
with react j/s now as far as the
with react j/s now as far as the application will build it’s a very
application will build it’s a very
application will build it’s a very simple project management app but I
simple project management app but I
simple project management app but I don’t really want you to focus on the
don’t really want you to focus on the
don’t really want you to focus on the functionality of the application because
functionality of the application because
functionality of the application because my goal in this video is to show you the
my goal in this video is to show you the
my goal in this video is to show you the different parts of react and to teach
different parts of react and to teach
different parts of react and to teach you the fundamentals then
you the fundamentals then
you the fundamentals then you can move on to create your own
you can move on to create your own
you can move on to create your own applications and ideas all right so if I
applications and ideas all right so if I
applications and ideas all right so if I go to the react website and click on get
go to the react website and click on get
go to the react website and click on get started it takes us to a simple hello
started it takes us to a simple hello
started it takes us to a simple hello world example we want to click on this
world example we want to click on this
world example we want to click on this installation link right here alright and
installation link right here alright and
installation link right here alright and there’s a couple different ways many
there’s a couple different ways many
there’s a couple different ways many different ways you can use react you
different ways you can use react you
different ways you can use react you could even just include the two scripts
could even just include the two scripts
could even just include the two scripts here react j/s and react Dom right in
here react j/s and react Dom right in
here react j/s and react Dom right in your index.html file and work with react
your index.html file and work with react
your index.html file and work with react but we want to be a bit more efficient
but we want to be a bit more efficient
but we want to be a bit more efficient and clean so I used to use something
and clean so I used to use something
and clean so I used to use something like web pack or gulp along with the
like web pack or gulp along with the
like web pack or gulp along with the react plugins but recently they created
react plugins but recently they created
react plugins but recently they created this tool this create react app
this tool this create react app
this tool this create react app command-line tool that will allow you to
command-line tool that will allow you to
command-line tool that will allow you to generate a react application in just one
generate a react application in just one
generate a react application in just one command all right so this is this is
command all right so this is this is
command all right so this is this is definitely what I would suggest to use
definitely what I would suggest to use
definitely what I would suggest to use it compiles everything it compiles all
it compiles everything it compiles all
it compiles everything it compiles all the JSX you don’t have to worry about
the JSX you don’t have to worry about
the JSX you don’t have to worry about anything really alright so we’re going
anything really alright so we’re going
anything really alright so we’re going to go ahead and install that and it
to go ahead and install that and it
to go ahead and install that and it needs to be installed globally you do
needs to be installed globally you do
needs to be installed globally you do have to have no js’ installed so go if
have to have no js’ installed so go if
have to have no js’ installed so go if you don’t have that go to node.js org
you don’t have that go to node.js org
you don’t have that go to node.js org download it install it and that will
download it install it and that will
download it install it and that will give you node along with NPM alright so
give you node along with NPM alright so
give you node along with NPM alright so once node is installed we’re going to
once node is installed we’re going to
once node is installed we’re going to open up a command line and you want to
open up a command line and you want to
open up a command line and you want to run npm install make sure you add the –
run npm install make sure you add the –
run npm install make sure you add the – g4 global and then create – react – app
g4 global and then create – react – app
g4 global and then create – react – app alright i already have it installed so
alright i already have it installed so
alright i already have it installed so i’m not going to run it but just go
i’m not going to run it but just go
i’m not going to run it but just go ahead and run that and then go to
ahead and run that and then go to
ahead and run that and then go to wherever you want to create your project
wherever you want to create your project
wherever you want to create your project I’m in my C Drive in my projects folder
I’m in my C Drive in my projects folder
I’m in my C Drive in my projects folder and then we just want to run create –
and then we just want to run create –
and then we just want to run create – react app and then the name your project
react app and then the name your project
react app and then the name your project okay so I’m going to call this project
okay so I’m going to call this project
okay so I’m going to call this project manager alright it does take a minute or
manager alright it does take a minute or
manager alright it does take a minute or two so I will I’m going to pause this
two so I will I’m going to pause this
two so I will I’m going to pause this and I’ll be back when it’s done alright
and I’ll be back when it’s done alright
and I’ll be back when it’s done alright so that took about two minutes or so now
so that took about two minutes or so now
so that took about two minutes or so now we want to CD into project manager
we want to CD into project manager
we want to CD into project manager and then all we have to do to run our
and then all we have to do to run our
and then all we have to do to run our application is do NPM start alright and
application is do NPM start alright and
application is do NPM start alright and and if we look over here actually I
and if we look over here actually I
and if we look over here actually I don’t know if it shows us but to build
don’t know if it shows us but to build
don’t know if it shows us but to build it for production we can just run I
it for production we can just run I
it for production we can just run I think it’s NPM run build and that will
think it’s NPM run build and that will
think it’s NPM run build and that will just compile everything so that you can
just compile everything so that you can
just compile everything so that you can just take it and upload it to your
just take it and upload it to your
just take it and upload it to your server or whatever alright so we ran the
server or whatever alright so we ran the
server or whatever alright so we ran the application and this is what we get ok
application and this is what we get ok
application and this is what we get ok nice little landing page I don’t want to
nice little landing page I don’t want to
nice little landing page I don’t want to keep any of this stuff for instance the
keep any of this stuff for instance the
keep any of this stuff for instance the logo and the styling so I’m going to
logo and the styling so I’m going to
logo and the styling so I’m going to open up my folder in my text editor and
open up my folder in my text editor and
open up my folder in my text editor and i’m using atom which i would recommend
i’m using atom which i would recommend
i’m using atom which i would recommend for react development i find it really
for react development i find it really
for react development i find it really really helpful the code highlighting is
really helpful the code highlighting is
really helpful the code highlighting is really nice and I noticed that with
really nice and I noticed that with
really nice and I noticed that with sublime text it doesn’t pick up the JSX
sublime text it doesn’t pick up the JSX
sublime text it doesn’t pick up the JSX very well as far as code highlighting
very well as far as code highlighting
very well as far as code highlighting but atom works really well with it and
but atom works really well with it and
but atom works really well with it and there’s probably a plugin you can use
there’s probably a plugin you can use
there’s probably a plugin you can use for sublime but I just prefer to use
for sublime but I just prefer to use
for sublime but I just prefer to use atom alright so I’m going to just add my
atom alright so I’m going to just add my
atom alright so I’m going to just add my project folder here which is in C Drive
project folder here which is in C Drive
project folder here which is in C Drive projects and project manager ok so this
projects and project manager ok so this
projects and project manager ok so this is what it gave us alright so we have
is what it gave us alright so we have
is what it gave us alright so we have our package JSON file you can see that
our package JSON file you can see that
our package JSON file you can see that we’re using react right now it’s version
we’re using react right now it’s version
we’re using react right now it’s version fifteen point three point two along with
fifteen point three point two along with
fifteen point three point two along with react Dom and then our scripts start
react Dom and then our scripts start
react Dom and then our scripts start we’ll just start the application as we
we’ll just start the application as we
we’ll just start the application as we just did build as I said that that’s
just did build as I said that that’s
just did build as I said that that’s used to compile everything test eject
used to compile everything test eject
used to compile everything test eject I’ve never actually used that so now
I’ve never actually used that so now
I’ve never actually used that so now let’s take a look in the public folder
let’s take a look in the public folder
let’s take a look in the public folder we have an index.html file I’m just
we have an index.html file I’m just
we have an index.html file I’m just going to get rid of all these comments
going to get rid of all these comments
going to get rid of all these comments to make it look a little easier to read
to make it look a little easier to read
to make it look a little easier to read and basically all we need to know is
and basically all we need to know is
and basically all we need to know is that we have a div with the ID of route
that we have a div with the ID of route
that we have a div with the ID of route and that’s where everything is going to
and that’s where everything is going to
and that’s where everything is going to be output alright you can go ahead and
be output alright you can go ahead and
be output alright you can go ahead and change the title if you want say project
change the title if you want say project
change the title if you want say project manager
and we could save that and now you can
and we could save that and now you can see the titles updated alright now in
see the titles updated alright now in
see the titles updated alright now in the source folder this is where all of
the source folder this is where all of
the source folder this is where all of our react stuff goes if we look at index
our react stuff goes if we look at index
our react stuff goes if we look at index J s or importing react react Dom we have
J s or importing react react Dom we have
J s or importing react react Dom we have a main app component that we’re
a main app component that we’re
a main app component that we’re importing and then this index CSS file
importing and then this index CSS file
importing and then this index CSS file which we don’t need I’m going to get rid
which we don’t need I’m going to get rid
which we don’t need I’m going to get rid of that and then down here we’re doing
of that and then down here we’re doing
of that and then down here we’re doing our react on render putting in the main
our react on render putting in the main
our react on render putting in the main app component and then we’re saying we
app component and then we’re saying we
app component and then we’re saying we want to insert it in the in the element
want to insert it in the in the element
want to insert it in the in the element that has the ID of root which we just
that has the ID of root which we just
that has the ID of root which we just saw right here okay so that’s where it’s
saw right here okay so that’s where it’s
saw right here okay so that’s where it’s outputting so we can save that we
outputting so we can save that we
outputting so we can save that we shouldn’t need to touch index JSON or
shouldn’t need to touch index JSON or
shouldn’t need to touch index JSON or index HTML now app J s is basically the
index HTML now app J s is basically the
index HTML now app J s is basically the the gateway to to our main app component
the gateway to to our main app component
the gateway to to our main app component so we’re importing react the logo and
so we’re importing react the logo and
so we’re importing react the logo and stuff I’m going to get rid of this I
stuff I’m going to get rid of this I
stuff I’m going to get rid of this I will keep the app dot CSS import right
will keep the app dot CSS import right
will keep the app dot CSS import right here and then we have our class with a
here and then we have our class with a
here and then we have our class with a render function which is returning this
render function which is returning this
render function which is returning this here now it’s very important to know
here now it’s very important to know
here now it’s very important to know that when you return in your render it
that when you return in your render it
that when you return in your render it has to everything has to be within one
has to everything has to be within one
has to everything has to be within one element I couldn’t have another div
element I couldn’t have another div
element I couldn’t have another div right here and return that all right
right here and return that all right
right here and return that all right obviously we can have as many elements
obviously we can have as many elements
obviously we can have as many elements as we want inside the main div but you
as we want inside the main div but you
as we want inside the main div but you can only have one div at the very at the
can only have one div at the very at the
can only have one div at the very at the very top level all right now I’m going
very top level all right now I’m going
very top level all right now I’m going to get rid of everything here except for
to get rid of everything here except for
to get rid of everything here except for this this div alright and let’s just for
this this div alright and let’s just for
this this div alright and let’s just for now we’ll just say my app okay we’ll
now we’ll just say my app okay we’ll
now we’ll just say my app okay we’ll save that and then let’s get rid of this
save that and then let’s get rid of this
save that and then let’s get rid of this logo SVG you don’t need that and then
logo SVG you don’t need that and then
logo SVG you don’t need that and then app CSS I’m just going to clear all that
app CSS I’m just going to clear all that
app CSS I’m just going to clear all that out and save it so now we just have just
out and save it so now we just have just
out and save it so now we just have just my app all right I’m going to open up
my app all right I’m going to open up
my app all right I’m going to open up the chrome tools console as well because
the chrome tools console as well because
the chrome tools console as well because we’ll be working with that quite a bit
we’ll be working with that quite a bit
we’ll be working with that quite a bit so now we have a blank react application
so now we have a blank react application
so now we have a blank react application essentially now for this main app
essentially now for this main app
essentially now for this main app component I usually use it as kind of a
component I usually use it as kind of a
component I usually use it as kind of a placeholder for all of our other
placeholder for all of our other
placeholder for all of our other components
components
components we can import them and we can place them
we can import them and we can place them
we can import them and we can place them right here in the render so we’re going
right here in the render so we’re going
right here in the render so we’re going to have a folder inside the source
to have a folder inside the source
to have a folder inside the source folder called components okay and we’re
folder called components okay and we’re
folder called components okay and we’re going to create a new file in there and
going to create a new file in there and
going to create a new file in there and we’re going to call that project CAS
we’re going to call that project CAS
we’re going to call that project CAS okay so this will be our projects
okay so this will be our projects
okay so this will be our projects component and it’ll be responsible for
component and it’ll be responsible for
component and it’ll be responsible for listing all of our projects alright now
listing all of our projects alright now
listing all of our projects alright now I’m going to copy everything we have in
I’m going to copy everything we have in
I’m going to copy everything we have in app J s because we need that same basic
app J s because we need that same basic
app J s because we need that same basic format we don’t need the CSS we only
format we don’t need the CSS we only
format we don’t need the CSS we only need to include that in the main app
need to include that in the main app
need to include that in the main app component then we’re going to change the
component then we’re going to change the
component then we’re going to change the class to projects make sure we export
class to projects make sure we export
class to projects make sure we export that down here so that we can use it in
that down here so that we can use it in
that down here so that we can use it in other files this div will change the
other files this div will change the
other files this div will change the class to projects and let’s just say my
class to projects and let’s just say my
class to projects and let’s just say my projects for now alright so we’ll save
projects for now alright so we’ll save
projects for now alright so we’ll save that and then we’ll go back into app
that and then we’ll go back into app
that and then we’ll go back into app guess and let’s import projects from and
guess and let’s import projects from and
guess and let’s import projects from and that’s going to be in the components
folder slash projects ok we don’t need
folder slash projects ok we don’t need the J s at the end and then down here we
the J s at the end and then down here we
the J s at the end and then down here we can simply input projects okay just like
can simply input projects okay just like
can simply input projects okay just like we would an XML or HTML okay we’ll save
we would an XML or HTML okay we’ll save
we would an XML or HTML okay we’ll save that and now you can see that we’re
that and now you can see that we’re
that and now you can see that we’re getting my projects so everything we put
getting my projects so everything we put
getting my projects so everything we put in the projects component is going to be
in the projects component is going to be
in the projects component is going to be output here now we can pass in
output here now we can pass in
output here now we can pass in properties here if we want so for
properties here if we want so for
properties here if we want so for instance if we say test and set that to
instance if we say test and set that to
instance if we say test and set that to let’s say hello world and then in
let’s say hello world and then in
let’s say hello world and then in projects we should be able to just go
projects we should be able to just go
projects we should be able to just go like that I’ll put that variable and
like that I’ll put that variable and
like that I’ll put that variable and test is not defined that’s because it
test is not defined that’s because it
test is not defined that’s because it has to be this dot props dot test ok and
has to be this dot props dot test ok and
has to be this dot props dot test ok and then we get hello world all right just
then we get hello world all right just
then we get hello world all right just to show you that we can do that now the
to show you that we can do that now the
to show you that we can do that now the idea that I want to do here is all of
idea that I want to do here is all of
idea that I want to do here is all of our projects are going to be held in
our projects are going to be held in
our projects are going to be held in state all right that’s where our data
state all right that’s where our data
state all right that’s where our data needs to be held
needs to be held
needs to be held I’m usually we would fetch it from some
I’m usually we would fetch it from some
I’m usually we would fetch it from some kind of API or database and then put it
kind of API or database and then put it
kind of API or database and then put it in our state but we’re just going to put
in our state but we’re just going to put
in our state but we’re just going to put the the
the the
the the right in our state so what we want to do
right in our state so what we want to do
right in our state so what we want to do is we want to create a constructor so
is we want to create a constructor so
is we want to create a constructor so right above the render we want a
right above the render we want a
right above the render we want a constructor all right and this is where
constructor all right and this is where
constructor all right and this is where we want to define our initial state
we want to define our initial state
we want to define our initial state state keys so if we say this starts
state keys so if we say this starts
state keys so if we say this starts state equals and we want to set projects
state equals and we want to set projects
state equals and we want to set projects and then projects is going to be an
and then projects is going to be an
and then projects is going to be an array of objects
array of objects
array of objects all right so each one will have a title
all right so each one will have a title
all right so each one will have a title so let’s say business website and also a
so let’s say business website and also a
so let’s say business website and also a category we’ll just a web design all
category we’ll just a web design all
category we’ll just a web design all right so there’s one project let’s copy
right so there’s one project let’s copy
right so there’s one project let’s copy that and it’ll do three so business
that and it’ll do three so business
that and it’ll do three so business website then we’ll do social app and
website then we’ll do social app and
website then we’ll do social app and that category will be let’s say mobile
that category will be let’s say mobile
that category will be let’s say mobile development and then let’s do ecommerce
development and then let’s do ecommerce
development and then let’s do ecommerce shopping cart and then that category
shopping cart and then that category
shopping cart and then that category will be web development all right now we
will be web development all right now we
will be web development all right now we want to take this state and we want to
want to take this state and we want to
want to take this state and we want to pass it into projects as a property all
pass it into projects as a property all
pass it into projects as a property all right so basically you want everything
right so basically you want everything
right so basically you want everything at the top of your application in-state
at the top of your application in-state
at the top of your application in-state and then pass it down to other
and then pass it down to other
and then pass it down to other components through properties all right
components through properties all right
components through properties all right the data should be immutable it should
the data should be immutable it should
the data should be immutable it should go from the top down so let’s pass it in
go from the top down so let’s pass it in
go from the top down so let’s pass it in as projects and we should be able to say
as projects and we should be able to say
as projects and we should be able to say this dot state dot projects all right so
this dot state dot projects all right so
this dot state dot projects all right so now if we go we’re going to get an error
now if we go we’re going to get an error
now if we go we’re going to get an error here and it says this is not allowed
here and it says this is not allowed
here and it says this is not allowed before super the reason for that is when
before super the reason for that is when
before super the reason for that is when we do when we put a constructor and we
we do when we put a constructor and we
we do when we put a constructor and we need to call super like that save it and
need to call super like that save it and
need to call super like that save it and that goes away all right now in projects
that goes away all right now in projects
that goes away all right now in projects if we go in the render but not in the
if we go in the render but not in the
if we go in the render but not in the return and we do a consult log and we
return and we do a consult log and we
return and we do a consult log and we say this dot props
say this dot props
say this dot props now when I reload you’ll see we get our
now when I reload you’ll see we get our
now when I reload you’ll see we get our properties and we have this projects
properties and we have this projects
properties and we have this projects with an array with all of our projects
with an array with all of our projects
with an array with all of our projects so we can now access that from the
so we can now access that from the
so we can now access that from the project’s component now when you have an
project’s component now when you have an
project’s component now when you have an array of objects like this you usually
array of objects like this you usually
array of objects like this you usually want to create a separate component for
want to create a separate component for
want to create a separate component for each individual item and then you want
each individual item and then you want
each individual item and then you want to basically map through those projects
to basically map through those projects
to basically map through those projects and output that component so we’re going
and output that component so we’re going
and output that component so we’re going to go ahead and in components we’ll
to go ahead and in components we’ll
to go ahead and in components we’ll create a new file called project item
create a new file called project item
create a new file called project item Jas all right we’re going to copy
Jas all right we’re going to copy
Jas all right we’re going to copy everything we have in projects paste it
everything we have in projects paste it
everything we have in projects paste it in there and we’ll change this to
in there and we’ll change this to
in there and we’ll change this to project item and down here make sure you
project item and down here make sure you
project item and down here make sure you explore project item all right now for
explore project item all right now for
explore project item all right now for this I don’t want to return a div I
this I don’t want to return a div I
this I don’t want to return a div I actually want it to be an li okay each
actually want it to be an li okay each
actually want it to be an li okay each one will be wrapped in an Li and we’ll
one will be wrapped in an Li and we’ll
one will be wrapped in an Li and we’ll give it a class of project and by the
give it a class of project and by the
give it a class of project and by the way if you’re wondering why this is
way if you’re wondering why this is
way if you’re wondering why this is class name is because in JSX there you
class name is because in JSX there you
class name is because in JSX there you can’t use classes and attribute all
can’t use classes and attribute all
can’t use classes and attribute all right class or for if you’re using a
right class or for if you’re using a
right class or for if you’re using a form with labels you can’t use for you
form with labels you can’t use for you
form with labels you can’t use for you have to use HTML 4 alright so just try
have to use HTML 4 alright so just try
have to use HTML 4 alright so just try and remember that
and remember that
and remember that so in here actually you know what we’ll
so in here actually you know what we’ll
so in here actually you know what we’ll leave that as is for now and then let’s
leave that as is for now and then let’s
leave that as is for now and then let’s go back to projects and what we want to
go back to projects and what we want to
go back to projects and what we want to do is let’s see we want to try to think
do is let’s see we want to try to think
do is let’s see we want to try to think of how I want to do this let’s go above
of how I want to do this let’s go above
of how I want to do this let’s go above the render and let’s just create a
the render and let’s just create a
the render and let’s just create a variable called project items and then
variable called project items and then
variable called project items and then we want to test to see if there are any
we want to test to see if there are any
we want to test to see if there are any projects so do an if statement here
projects so do an if statement here
projects so do an if statement here we’ll say if this dot props dot projects
we’ll say if this dot props dot projects
we’ll say if this dot props dot projects then we want to take that project items
then we want to take that project items
then we want to take that project items variable and we want to set that to this
variable and we want to set that to this
variable and we want to set that to this dot props dot projects dot map ok since
dot props dot projects dot map ok since
dot props dot projects dot map ok since it’s an array we want to map through
it’s an array we want to map through
it’s an array we want to map through it so in here we’re going to use an
it so in here we’re going to use an
it so in here we’re going to use an arrow function you could use a callback
arrow function you could use a callback
arrow function you could use a callback but I want to keep this basically in
but I want to keep this basically in
but I want to keep this basically in es2015 so in here what we want to do is
es2015 so in here what we want to do is
es2015 so in here what we want to do is first of all let’s do a console log and
first of all let’s do a console log and
first of all let’s do a console log and make sure that we’re actually getting
make sure that we’re actually getting
make sure that we’re actually getting each project ok so let’s see unexpected
each project ok so let’s see unexpected
each project ok so let’s see unexpected token expected parentheses oh I put this
token expected parentheses oh I put this
token expected parentheses oh I put this in the wrong place this needs to be
in the wrong place this needs to be
in the wrong place this needs to be within render so we’re going to put that
within render so we’re going to put that
within render so we’re going to put that right here all right so now down here
right here all right so now down here
right here all right so now down here you can see it’s logging each one so
you can see it’s logging each one so
you can see it’s logging each one so this is working or getting each
this is working or getting each
this is working or getting each individual project now we want to let’s
individual project now we want to let’s
individual project now we want to let’s comment this out and we want to return
comment this out and we want to return
comment this out and we want to return and in here we’re going to put our
and in here we’re going to put our
and in here we’re going to put our project item component all right and
project item component all right and
project item component all right and then we want to pass in each project as
then we want to pass in each project as
then we want to pass in each project as a property okay so we’re assigning the
a property okay so we’re assigning the
a property okay so we’re assigning the each project item to this variable right
each project item to this variable right
each project item to this variable right here so down here we should be able to
here so down here we should be able to
here so down here we should be able to just put in project items and we’ll save
just put in project items and we’ll save
just put in project items and we’ll save that okay so we also need to import the
that okay so we also need to import the
that okay so we also need to import the project item component that we created
project item component that we created
project item component that we created so say import project item from dot
so say import project item from dot
so say import project item from dot slash project item okay now we’re
slash project item okay now we’re
slash project item okay now we’re getting this error that says each child
getting this error that says each child
getting this error that says each child in an array should have a unique key
in an array should have a unique key
in an array should have a unique key property so this isn’t an error it’s a
property so this isn’t an error it’s a
property so this isn’t an error it’s a warning but it is a good idea to add a
warning but it is a good idea to add a
warning but it is a good idea to add a key to our project item right here
key to our project item right here
key to our project item right here usually if you have an ID you would use
usually if you have an ID you would use
usually if you have an ID you would use that but we’ll just
that but we’ll just
that but we’ll just a project title okay now nothing’s being
a project title okay now nothing’s being
a project title okay now nothing’s being out put up here because if we go into
out put up here because if we go into
out put up here because if we go into project item we haven’t put anything
project item we haven’t put anything
project item we haven’t put anything here yet so let’s put prom
here yet so let’s put prom
here yet so let’s put prom we should be getting project as a
we should be getting project as a
we should be getting project as a property that we passed in okay right
property that we passed in okay right
property that we passed in okay right here we’re passing it in as a property
here we’re passing it in as a property
here we’re passing it in as a property so let’s say this dot props dot project
so let’s say this dot props dot project
so let’s say this dot props dot project dot title and then we’ll also put the
dot title and then we’ll also put the
dot title and then we’ll also put the category so this dot props dot project
category so this dot props dot project
category so this dot props dot project dot category all right we’ll save that
dot category all right we’ll save that
dot category all right we’ll save that and now you can see we’re outputting all
and now you can see we’re outputting all
and now you can see we’re outputting all of our projects along with the category
of our projects along with the category
of our projects along with the category all right let’s wrap this in a strong
all right let’s wrap this in a strong
all right let’s wrap this in a strong tag all right and put a colon here okay
tag all right and put a colon here okay
tag all right and put a colon here okay so it doesn’t look great but it is
so it doesn’t look great but it is
so it doesn’t look great but it is working we’re a pat we’re basically
working we’re a pat we’re basically
working we’re a pat we’re basically setting our state in our main app
setting our state in our main app
setting our state in our main app component okay we have a state called
component okay we have a state called
component okay we have a state called projects we’re passing it into projects
projects we’re passing it into projects
projects we’re passing it into projects as a property and then inside projects
as a property and then inside projects
as a property and then inside projects were mapping through that array and
were mapping through that array and
were mapping through that array and we’re outputting a project item
we’re outputting a project item
we’re outputting a project item component which has each project where
component which has each project where
component which has each project where we output the title and the category
we output the title and the category
we output the title and the category alright so hopefully you can see how
alright so hopefully you can see how
alright so hopefully you can see how this is coming together now one thing I
this is coming together now one thing I
this is coming together now one thing I want to mention is an app j/s in our
want to mention is an app j/s in our
want to mention is an app j/s in our constructor we set the state this
constructor we set the state this
constructor we set the state this usually isn’t where you want to set the
usually isn’t where you want to set the
usually isn’t where you want to set the actual data you do want to define the
actual data you do want to define the
actual data you do want to define the state and the keys but not the actual
state and the keys but not the actual
state and the keys but not the actual data for that you want to use a
data for that you want to use a
data for that you want to use a lifecycle method and you probably want
lifecycle method and you probably want
lifecycle method and you probably want to use component will mount okay so say
to use component will mount okay so say
to use component will mount okay so say component will mount
component will mount
component will mount and that should actually be lowercased
and that should actually be lowercased
and that should actually be lowercased so this is a lifecycle method it fires
so this is a lifecycle method it fires
so this is a lifecycle method it fires off when every time the component is
off when every time the component is
off when every time the component is re-rendered so up here let’s grab these
re-rendered so up here let’s grab these
re-rendered so up here let’s grab these and cut them out we do want to keep the
and cut them out we do want to keep the
and cut them out we do want to keep the projects but just as an empty array in
projects but just as an empty array in
projects but just as an empty array in this in the constructor down here we
this in the constructor down here we
this in the constructor down here we want to say this dot set state passing
want to say this dot set state passing
want to say this dot set state passing an object and we’ll say projects which
an object and we’ll say projects which
an object and we’ll say projects which is an array and then we’ll paste the
is an array and then we’ll paste the
is an array and then we’ll paste the data in like that all right so let’s go
data in like that all right so let’s go
data in like that all right so let’s go ahead and save that and now you’ll see
ahead and save that and now you’ll see
ahead and save that and now you’ll see it still functions but this is just a
it still functions but this is just a
it still functions but this is just a better way to do it than to have it in
better way to do it than to have it in
better way to do it than to have it in the constructor like that all right and
the constructor like that all right and
the constructor like that all right and when you if you do a for instance an
when you if you do a for instance an
when you if you do a for instance an ajax call if you’re fetching data from
ajax call if you’re fetching data from
ajax call if you’re fetching data from from an outside api you want to do that
from an outside api you want to do that
from an outside api you want to do that in this life cycle method as well either
in this life cycle method as well either
in this life cycle method as well either this or component did mount and if you
this or component did mount and if you
this or component did mount and if you go to the documentation for react you’ll
go to the documentation for react you’ll
go to the documentation for react you’ll see all the lifecycle methods and at
see all the lifecycle methods and at
see all the lifecycle methods and at which time they render or they fire off
which time they render or they fire off
which time they render or they fire off so now we want to do is want to add a
so now we want to do is want to add a
so now we want to do is want to add a form so that we can add to our state so
form so that we can add to our state so
form so that we can add to our state so we can add a project so let’s create
we can add a project so let’s create
we can add a project so let’s create another component and we’ll call it add
another component and we’ll call it add
another component and we’ll call it add project dot J s and let’s copy what we
project dot J s and let’s copy what we
project dot J s and let’s copy what we have in projects ok we’ll paste that and
have in projects ok we’ll paste that and
have in projects ok we’ll paste that and we can get rid of that I’m going to
we can get rid of that I’m going to
we can get rid of that I’m going to change the name to add project get rid
change the name to add project get rid
change the name to add project get rid of that change this down here to add
of that change this down here to add
of that change this down here to add project all right now let’s see what do
project all right now let’s see what do
project all right now let’s see what do we want to render here let’s keep the
we want to render here let’s keep the
we want to render here let’s keep the div I’m going to get rid of the class
div I’m going to get rid of the class
div I’m going to get rid of the class name and we’ll put an h3 here say add
name and we’ll put an h3 here say add
name and we’ll put an h3 here say add project
project
project all right so let’s just make sure we can
all right so let’s just make sure we can
all right so let’s just make sure we can insert this into our main components so
insert this into our main components so
insert this into our main components so we’re going to go to app J s and import
we’re going to go to app J s and import
we’re going to go to app J s and import it just like we did with projects all
it just like we did with projects all
it just like we did with projects all right and then down here we’ll put it
right and then down here we’ll put it
right and then down here we’ll put it right above we’ll just replace this my
right above we’ll just replace this my
right above we’ll just replace this my app save that and now we’re outputting
app save that and now we’re outputting
app save that and now we’re outputting that add project component so we want
that add project component so we want
that add project component so we want this to be a form
okay so we’ll put a form tag and let’s
okay so we’ll put a form tag and let’s put in here a div okay this will have a
put in here a div okay this will have a
put in here a div okay this will have a label of title and an input type will be
label of title and an input type will be
label of title and an input type will be ‘text and we’re going to give this an
‘text and we’re going to give this an
‘text and we’re going to give this an attribute called ref and that’s going to
attribute called ref and that’s going to
attribute called ref and that’s going to help us get the the value when we submit
help us get the the value when we submit
help us get the the value when we submit the form now you have to have this slash
the form now you have to have this slash
the form now you have to have this slash here you can’t use html5 syntax or
here you can’t use html5 syntax or
here you can’t use html5 syntax or you’ll get an error okay in the ref
you’ll get an error okay in the ref
you’ll get an error okay in the ref let’s just put title all right so let’s
let’s just put title all right so let’s
let’s just put title all right so let’s also put a br here and again you have to
also put a br here and again you have to
also put a br here and again you have to have your slash so let’s copy that paste
have your slash so let’s copy that paste
have your slash so let’s copy that paste that in and then this is going to be the
that in and then this is going to be the
that in and then this is going to be the category but I want this to be a select
category but I want this to be a select
category but I want this to be a select okay so we’ll say select this will also
okay so we’ll say select this will also
okay so we’ll say select this will also have a ref of category
all right now what I want to do is I
all right now what I want to do is I want the categories to to be a property
want the categories to to be a property
want the categories to to be a property of the component all right now we can
of the component all right now we can
of the component all right now we can set default properties if we go above
set default properties if we go above
set default properties if we go above render and we’re going to say static
render and we’re going to say static
render and we’re going to say static default props and we want to set that to
default props and we want to set that to
default props and we want to set that to an object and let’s set categories to an
an object and let’s set categories to an
an object and let’s set categories to an array and we’ll say web design web
array and we’ll say web design web
array and we’ll say web design web development and mobile development okay
development and mobile development okay
development and mobile development okay and then what we want to do is we want
and then what we want to do is we want
and then what we want to do is we want to map through these and then output the
to map through these and then output the
to map through these and then output the options so we’re going to go above the
options so we’re going to go above the
options so we’re going to go above the return and render and say let category
return and render and say let category
return and render and say let category options we’ll set that to this dot props
options we’ll set that to this dot props
options we’ll set that to this dot props dot categories because we can now access
dot categories because we can now access
dot categories because we can now access that and then we want to call dot map
that and then we want to call dot map
that and then we want to call dot map all right and then in here will stay
all right and then in here will stay
all right and then in here will stay category we’ll use an arrow function and
category we’ll use an arrow function and
category we’ll use an arrow function and then we want to return option we’re
then we want to return option we’re
then we want to return option we’re going to give it a key category and a
going to give it a key category and a
going to give it a key category and a value of category and then we also want
value of category and then we also want
value of category and then we also want to open the category here all right so
to open the category here all right so
to open the category here all right so now we should be able to just use this
now we should be able to just use this
now we should be able to just use this category options right down here
alright let’s try that and there we go
alright let’s try that and there we go so now we’re outputting all the
so now we’re outputting all the
so now we’re outputting all the categories it’s coming from the
categories it’s coming from the
categories it’s coming from the properties up here now to submit the
properties up here now to submit the
properties up here now to submit the form what we’re going to do is in the
form what we’re going to do is in the
form what we’re going to do is in the form tag we’re going to add a handler
form tag we’re going to add a handler
form tag we’re going to add a handler called on submit alright we have on
called on submit alright we have on
called on submit alright we have on submit is on click there’s a whole bunch
submit is on click there’s a whole bunch
submit is on click there’s a whole bunch of them so we want to put some curly
of them so we want to put some curly
of them so we want to put some curly braces and let’s say this dot handle
braces and let’s say this dot handle
braces and let’s say this dot handle submit all right so this handle submit
submit all right so this handle submit
submit all right so this handle submit we can create right up here ok and just
we can create right up here ok and just
we can create right up here ok and just to show you let’s do console.log and
to show you let’s do console.log and
to show you let’s do console.log and we’ll just say submitted now I don’t
we’ll just say submitted now I don’t
we’ll just say submitted now I don’t think it’s going to work yet oh we
think it’s going to work yet oh we
think it’s going to work yet oh we didn’t even put a submit button so no
didn’t even put a submit button so no
didn’t even put a submit button so no it’s not going to work type submit’
it’s not going to work type submit’
it’s not going to work type submit’ value submit alright so if we go when we
value submit alright so if we go when we
value submit alright so if we go when we try to submit this you’ll see that it’s
try to submit this you’ll see that it’s
try to submit this you’ll see that it’s not console logging down here because
not console logging down here because
not console logging down here because it’s actually submitting the form what
it’s actually submitting the form what
it’s actually submitting the form what we want to do is pass in an event
we want to do is pass in an event
we want to do is pass in an event parameter here and then just like in
parameter here and then just like in
parameter here and then just like in JavaScript or some other libraries we
JavaScript or some other libraries we
JavaScript or some other libraries we can use a dot prevent default and that
can use a dot prevent default and that
can use a dot prevent default and that will prevent the form from actually
will prevent the form from actually
will prevent the form from actually submitting so now if we do it you can
submitting so now if we do it you can
submitting so now if we do it you can see down here we get our console log now
see down here we get our console log now
see down here we get our console log now what we want to do is we want to store
what we want to do is we want to store
what we want to do is we want to store the the data that we submit into state
the the data that we submit into state
the the data that we submit into state so we’re going to add a constructor up
so we’re going to add a constructor up
so we’re going to add a constructor up at the top
all right and in the constructor we have
all right and in the constructor we have to call our super function and then
to call our super function and then
to call our super function and then we’re going to say this dot state and
we’re going to say this dot state and
we’re going to say this dot state and we’re going to have new project which is
we’re going to have new project which is
we’re going to have new project which is going to be an object so we don’t want
going to be an object so we don’t want
going to be an object so we don’t want to fill it here what we want to do is
to fill it here what we want to do is
to fill it here what we want to do is set it when this is submitted
set it when this is submitted
set it when this is submitted all right now to to grab the values of
all right now to to grab the values of
all right now to to grab the values of the form we can use that that refs
the form we can use that that refs
the form we can use that that refs attribute all right so let’s let some
attribute all right so let’s let some
attribute all right so let’s let some say console dot log this dot refs dot
say console dot log this dot refs dot
say console dot log this dot refs dot title dot value okay so now if I type
title dot value okay so now if I type
title dot value okay so now if I type something in here and submit whoop that
something in here and submit whoop that
something in here and submit whoop that didn’t work let’s see what I do wrong
ref title
ref title oh it’s it doesn’t know what this is we
oh it’s it doesn’t know what this is we
oh it’s it doesn’t know what this is we actually have to bind it through the
actually have to bind it through the
actually have to bind it through the handle submit down here or just say dot
handle submit down here or just say dot
handle submit down here or just say dot bind and then pass in this so now we
bind and then pass in this so now we
bind and then pass in this so now we submit you can see that it’s console
submit you can see that it’s console
submit you can see that it’s console logging whatever I put in the title now
logging whatever I put in the title now
logging whatever I put in the title now we don’t want them to be able to submit
we don’t want them to be able to submit
we don’t want them to be able to submit a blank title so we can actually do a
a blank title so we can actually do a
a blank title so we can actually do a little bit of validation here we’ll say
little bit of validation here we’ll say
little bit of validation here we’ll say if this ref title value is equal to
if this ref title value is equal to
if this ref title value is equal to nothing then we want to alert and we’ll
nothing then we want to alert and we’ll
nothing then we want to alert and we’ll say title is required all right and then
say title is required all right and then
say title is required all right and then we’ll have an else and then we do what
we’ll have an else and then we do what
we’ll have an else and then we do what we want to do so if we save that and we
we want to do so if we save that and we
we want to do so if we save that and we try to submit we get an alert okay now
try to submit we get an alert okay now
try to submit we get an alert okay now if everything works out or if there’s a
if everything works out or if there’s a
if everything works out or if there’s a title we want to set the state we want
title we want to set the state we want
title we want to set the state we want to put the the data into this value so
to put the the data into this value so
to put the the data into this value so we’ll save this dot set state and we
we’ll save this dot set state and we
we’ll save this dot set state and we want to pass in here new project
want to pass in here new project
want to pass in here new project and set that to an object and let’s see
and set that to an object and let’s see
and set that to an object and let’s see we’re going to set title to this dot
we’re going to set title to this dot
we’re going to set title to this dot refs dot title dot value and then
refs dot title dot value and then
refs dot title dot value and then category to this dot Refs
category to this dot Refs
category to this dot Refs category dot value so that’ll set the
category dot value so that’ll set the
category dot value so that’ll set the state for us now when we use this set
state for us now when we use this set
state for us now when we use this set state it can take a second parameter
state it can take a second parameter
state it can take a second parameter which will go right here we’ll put a
which will go right here we’ll put a
which will go right here we’ll put a comma and that’s going to be a callback
comma and that’s going to be a callback
comma and that’s going to be a callback function all right and then here let’s
function all right and then here let’s
function all right and then here let’s do a console log and will log the state
so let’s save that and let’s just say
so let’s save that and let’s just say test web design submit and then it gives
test web design submit and then it gives
test web design submit and then it gives us the state which has a new project
us the state which has a new project
us the state which has a new project with that data
with that data
with that data all right now I should I should have
all right now I should I should have
all right now I should I should have mentioned earlier that the state in this
mentioned earlier that the state in this
mentioned earlier that the state in this component is different from the state in
component is different from the state in
component is different from the state in the main app component okay each
the main app component okay each
the main app component okay each component has its own state but what we
component has its own state but what we
component has its own state but what we want to do is take the data we submit
want to do is take the data we submit
want to do is take the data we submit and pass it up into the main app
and pass it up into the main app
and pass it up into the main app component and save it in the mains in
component and save it in the mains in
component and save it in the mains in that state so what we can do is we can
that state so what we can do is we can
that state so what we can do is we can send it up through a property okay
send it up through a property okay
send it up through a property okay through a function inside the properties
through a function inside the properties
through a function inside the properties so what we’ll do is comment that out
so what we’ll do is comment that out
so what we’ll do is comment that out we’ll say this dot props dot add project
we’ll say this dot props dot add project
we’ll say this dot props dot add project okay and then we’ll pass along the new
okay and then we’ll pass along the new
okay and then we’ll pass along the new project now since we did that we should
project now since we did that we should
project now since we did that we should be able to access this from the the main
be able to access this from the the main
be able to access this from the the main component so we’ll go down to where we
component so we’ll go down to where we
component so we’ll go down to where we have projects right I’m sorry the add
have projects right I’m sorry the add
have projects right I’m sorry the add project and we’re going to put a
project and we’re going to put a
project and we’re going to put a property what do we call it add project
property what do we call it add project
property what do we call it add project so we want to use that right here
so we want to use that right here
so we want to use that right here so add project equals and then we want
so add project equals and then we want
so add project equals and then we want to function to handle it so this thought
to function to handle it so this thought
to function to handle it so this thought handle add project all right and we
handle add project all right and we
handle add project all right and we should just bind this as well all right
should just bind this as well all right
should just bind this as well all right and then we’ll create that right here
and then we’ll create that right here
and then we’ll create that right here handle add project that’ll take in the
handle add project that’ll take in the
handle add project that’ll take in the project and let’s just do a console dot
project and let’s just do a console dot
project and let’s just do a console dot log just to make sure that that works
log just to make sure that that works
log just to make sure that that works all right so let’s see what’s this new
all right so let’s see what’s this new
all right so let’s see what’s this new project is not defined let’s see oh I
project is not defined let’s see oh I
project is not defined let’s see oh I passed a new project this is actually in
passed a new project this is actually in
passed a new project this is actually in the state so we want to say this starts
the state so we want to say this starts
the state so we want to say this starts state dot new project so now if we put
state dot new project so now if we put
state dot new project so now if we put something in here and submit this dot
something in here and submit this dot
something in here and submit this dot props add project is not a function
oh this should be uppercase P there we
oh this should be uppercase P there we go alright so now we’re submitting it
go alright so now we’re submitting it
go alright so now we’re submitting it we’re passing it up to this component
we’re passing it up to this component
we’re passing it up to this component and console logging it now in here what
and console logging it now in here what
and console logging it now in here what we want to do is we want to add it to
we want to do is we want to add it to
we want to do is we want to add it to the state of the main component alright
the state of the main component alright
the state of the main component alright so we can just let’s see with react
so we can just let’s see with react
so we can just let’s see with react state your state is immutable meaning
state your state is immutable meaning
state your state is immutable meaning that you don’t want to change it you
that you don’t want to change it you
that you don’t want to change it you want to basically update it so we want
want to basically update it so we want
want to basically update it so we want to get everything that’s in it push to
to get everything that’s in it push to
to get everything that’s in it push to it push the new project to it and then
it push the new project to it and then
it push the new project to it and then set it again so to do that we’ll say let
set it again so to do that we’ll say let
set it again so to do that we’ll say let projects we’ll set that to this start
projects we’ll set that to this start
projects we’ll set that to this start state dot projects so we’re grabbing
state dot projects so we’re grabbing
state dot projects so we’re grabbing what’s already there and then let’s take
what’s already there and then let’s take
what’s already there and then let’s take that and push on to it the new project
that and push on to it the new project
that and push on to it the new project and then we’ll reset it so we’ll say
and then we’ll reset it so we’ll say
and then we’ll reset it so we’ll say this dot set state and then we’ll say
this dot set state and then we’ll say
this dot set state and then we’ll say projects projects all right so let’s
projects projects all right so let’s
projects projects all right so let’s save that and now let’s say test web
save that and now let’s say test web
save that and now let’s say test web development submit and there it is oh it
development submit and there it is oh it
development submit and there it is oh it says category that’s not right okay so
says category that’s not right okay so
says category that’s not right okay so let’s see what went wrong there if we go
let’s see what went wrong there if we go
let’s see what went wrong there if we go to add project all right here value
to add project all right here value
to add project all right here value category that needs to be wrapped in
category that needs to be wrapped in
category that needs to be wrapped in curly braces you guys probably saw that
curly braces you guys probably saw that
curly braces you guys probably saw that already all right so submit and there we
already all right so submit and there we
already all right so submit and there we go we say test to will choose mobile
go we say test to will choose mobile
go we say test to will choose mobile development submit so now we can add
development submit so now we can add
development submit so now we can add projects now this isn’t going to get
projects now this isn’t going to get
projects now this isn’t going to get persisted anywhere if I reload as I said
persisted anywhere if I reload as I said
persisted anywhere if I reload as I said in the beginning react is for user
in the beginning react is for user
in the beginning react is for user interfaces it’s not it’s not going to
interfaces it’s not it’s not going to
interfaces it’s not it’s not going to persist the data and now we could set it
persist the data and now we could set it
persist the data and now we could set it to push to a some kind of API or maybe
to push to a some kind of API or maybe
to push to a some kind of API or maybe the local storage or something
the local storage or something
the local storage or something that but we want to just focus on the
that but we want to just focus on the
that but we want to just focus on the user interface part of it and that’s
user interface part of it and that’s
user interface part of it and that’s what’s great about react is that your
what’s great about react is that your
what’s great about react is that your back-end is completely separate so we
back-end is completely separate so we
back-end is completely separate so we could have this go to local storage and
could have this go to local storage and
could have this go to local storage and then we could easily replace it with
then we could easily replace it with
then we could easily replace it with let’s say MongoDB or something like that
let’s say MongoDB or something like that
let’s say MongoDB or something like that all right
all right
all right I’m going to put a heading above this so
I’m going to put a heading above this so
I’m going to put a heading above this so it’s not so scrunched together so in
it’s not so scrunched together so in
it’s not so scrunched together so in projects we put an h3 will just say
projects we put an h3 will just say
projects we put an h3 will just say latest projects all right I’ll put a
latest projects all right I’ll put a
latest projects all right I’ll put a line break below this input as well
okay so it doesn’t look too great but
okay so it doesn’t look too great but that’s fine we’re not focusing on that
that’s fine we’re not focusing on that
that’s fine we’re not focusing on that so now what I want to do is I want to
so now what I want to do is I want to
so now what I want to do is I want to show you how we can delete these now
show you how we can delete these now
show you how we can delete these now initially we don’t have if we look at
initially we don’t have if we look at
initially we don’t have if we look at our state our projects we don’t have an
our state our projects we don’t have an
our state our projects we don’t have an ID and it’s a good idea to have an ID a
ID and it’s a good idea to have an ID a
ID and it’s a good idea to have an ID a unique ID and there’s actually a module
unique ID and there’s actually a module
unique ID and there’s actually a module we can use called UUID
we can use called UUID
we can use called UUID so let’s see not sure where they the
so let’s see not sure where they the
so let’s see not sure where they the documentation is for it but we’re going
documentation is for it but we’re going
documentation is for it but we’re going to go ahead and install that and it just
to go ahead and install that and it just
to go ahead and install that and it just generates a unique ID for us it’s a
generates a unique ID for us it’s a
generates a unique ID for us it’s a really simple module so we’re going to
really simple module so we’re going to
really simple module so we’re going to go ahead and just stop this with ctrl C
go ahead and just stop this with ctrl C
go ahead and just stop this with ctrl C and do NPM install – – save UUID
okay and then we’ll just restart NPM
okay and then we’ll just restart NPM start
and we’re going to come over here and
and we’re going to come over here and bring that in so import UUID from UUID
bring that in so import UUID from UUID
bring that in so import UUID from UUID and then we’ll just go down here we’ll
and then we’ll just go down here we’ll
and then we’ll just go down here we’ll assign an ID to uu ID dot V 4 which is a
assign an ID to uu ID dot V 4 which is a
assign an ID to uu ID dot V 4 which is a function so each time we use this it’ll
function so each time we use this it’ll
function so each time we use this it’ll generate a new ID so we want one for
generate a new ID so we want one for
generate a new ID so we want one for here and here as well okay and then when
here and here as well okay and then when
here and here as well okay and then when we add a project we also want to do the
we add a project we also want to do the
we add a project we also want to do the same thing we want to add an ID so we’ll
same thing we want to add an ID so we’ll
same thing we want to add an ID so we’ll import all right we’ll use that right
import all right we’ll use that right
import all right we’ll use that right here where we set the state for the new
here where we set the state for the new
here where we set the state for the new project ID dot d4 just like that and
project ID dot d4 just like that and
project ID dot d4 just like that and that’ll generate a unique ID for us all
that’ll generate a unique ID for us all
that’ll generate a unique ID for us all right and just to make sure that we’re
right and just to make sure that we’re
right and just to make sure that we’re actually getting an ID let’s go to our
actually getting an ID let’s go to our
actually getting an ID let’s go to our project item and we’ll replace this
project item and we’ll replace this
project item and we’ll replace this title with ID and you can see that it’s
title with ID and you can see that it’s
title with ID and you can see that it’s outputting unique IDs okay I’ll put that
outputting unique IDs okay I’ll put that
outputting unique IDs okay I’ll put that back now I want to be able to delete
back now I want to be able to delete
back now I want to be able to delete these so let’s go in project item where
these so let’s go in project item where
these so let’s go in project item where we are now we’re going to put a link at
we are now we’re going to put a link at
we are now we’re going to put a link at the end here
okay now the link isn’t actually going
okay now the link isn’t actually going to go anywhere we want to put an event
to go anywhere we want to put an event
to go anywhere we want to put an event I’m sorry an event handler called on
I’m sorry an event handler called on
I’m sorry an event handler called on click and we’ll set that to let’s see
click and we’ll set that to let’s see
click and we’ll set that to let’s see what I want to set that to this dot
what I want to set that to this dot
what I want to set that to this dot delete project all right we’re going to
delete project all right we’re going to
delete project all right we’re going to do dot bind this as well and then we’re
do dot bind this as well and then we’re
do dot bind this as well and then we’re going to create that right here handle
going to create that right here handle
going to create that right here handle whoops not handle what was it delete
whoops not handle what was it delete
whoops not handle what was it delete delete project
delete project
delete project and let’s just do console.log test just
and let’s just do console.log test just
and let’s just do console.log test just to make sure that it actually works so
to make sure that it actually works so
to make sure that it actually works so let’s open up our console if we click
let’s open up our console if we click
let’s open up our console if we click that we get tests now we want to do this
that we get tests now we want to do this
that we get tests now we want to do this the same idea we want to click on it in
the same idea we want to click on it in
the same idea we want to click on it in this component but we want to pass it up
this component but we want to pass it up
this component but we want to pass it up to the main component and then do the
to the main component and then do the
to the main component and then do the final delete there now since we’re in
final delete there now since we’re in
final delete there now since we’re in project item were actually two
project item were actually two
project item were actually two components deep so we need to pass it up
components deep so we need to pass it up
components deep so we need to pass it up to projects and then pass it up to the
to projects and then pass it up to the
to projects and then pass it up to the main app component all right now to do
main app component all right now to do
main app component all right now to do that we’re going to set a property this
that we’re going to set a property this
that we’re going to set a property this dot props dot and we’ll call it on
dot props dot and we’ll call it on
dot props dot and we’ll call it on delete and then we just want to pass in
delete and then we just want to pass in
delete and then we just want to pass in the ID all right now to pass along the
the ID all right now to pass along the
the ID all right now to pass along the ID through this function we’re going to
ID through this function we’re going to
ID through this function we’re going to go after this right here put a comma and
go after this right here put a comma and
go after this right here put a comma and then we’re going to save this dot
then we’re going to save this dot
then we’re going to save this dot props project dot ID all right and then
props project dot ID all right and then
props project dot ID all right and then we should be able to access it through
we should be able to access it through
we should be able to access it through here and then we’ll pass it along all
here and then we’ll pass it along all
here and then we’ll pass it along all right so let’s save that and then we’re
right so let’s save that and then we’re
right so let’s save that and then we’re going to go to projects J s and go to
going to go to projects J s and go to
going to go to projects J s and go to where we have project item which is
where we have project item which is
where we have project item which is right here and let’s see we want to add
right here and let’s see we want to add
right here and let’s see we want to add on delete here as well say this dot
buying this and we also want to create
buying this and we also want to create the function up here delete project
the function up here delete project
the function up here delete project okay takes in ID and then again we want
okay takes in ID and then again we want
okay takes in ID and then again we want to do this dot prop dot on delete pass
to do this dot prop dot on delete pass
to do this dot prop dot on delete pass in the ID all right so now we’re passing
in the ID all right so now we’re passing
in the ID all right so now we’re passing it up to the main component so down
it up to the main component so down
it up to the main component so down where we have projects we want to pass
where we have projects we want to pass
where we have projects we want to pass in on delete okay we’ll set that to this
in on delete okay we’ll set that to this
in on delete okay we’ll set that to this dot handle delete project and we’ll do
dot handle delete project and we’ll do
dot handle delete project and we’ll do dot bind and then pass in this and then
dot bind and then pass in this and then
dot bind and then pass in this and then just like we did with handle add project
just like we did with handle add project
just like we did with handle add project we’re going to add handle delete project
we’re going to add handle delete project
we’re going to add handle delete project all right that’s going to take in the ID
all right that’s going to take in the ID
all right that’s going to take in the ID and then the idea is just like with add
and then the idea is just like with add
and then the idea is just like with add project we want to get it from the state
project we want to get it from the state
project we want to get it from the state and then we want to remove the project
and then we want to remove the project
and then we want to remove the project we want and then reset the state now you
we want and then reset the state now you
we want and then reset the state now you could do this in different ways we could
could do this in different ways we could
could do this in different ways we could use a for loop or something like that
use a for loop or something like that
use a for loop or something like that but we’re going to use find index so
but we’re going to use find index so
but we’re going to use find index so let’s say let index and we’ll set that
let’s say let index and we’ll set that
let’s say let index and we’ll set that to projects dot find index and pass in
to projects dot find index and pass in
to projects dot find index and pass in here X so X dot ID and basically what
here X so X dot ID and basically what
here X so X dot ID and basically what this is doing it’s going to look through
this is doing it’s going to look through
this is doing it’s going to look through all the projects it’s going to find all
all the projects it’s going to find all
all the projects it’s going to find all the IDs and match them to the current ID
the IDs and match them to the current ID
the IDs and match them to the current ID that’s being passed in alright if it
that’s being passed in alright if it
that’s being passed in alright if it matches and it’s going to get put in the
matches and it’s going to get put in the
matches and it’s going to get put in the index then what we want to do is want to
index then what we want to do is want to
index then what we want to do is want to say dot splice where that index is and
say dot splice where that index is and
say dot splice where that index is and we want to delete one from that and then
we want to delete one from that and then
we want to delete one from that and then we just want to reset the state just
we just want to reset the state just
we just want to reset the state just like we did up here all right so let’s
like we did up here all right so let’s
like we did up here all right so let’s save that and now we should be able to
save that and now we should be able to
save that and now we should be able to click the X on one of these and deletes
click the X on one of these and deletes
click the X on one of these and deletes it
it
it okay so we can now add projects and we
okay so we can now add projects and we
okay so we can now add projects and we can delete them so we’re pretty much
can delete them so we’re pretty much
can delete them so we’re pretty much there as far as all the basics one other
there as far as all the basics one other
there as far as all the basics one other thing I want to show you is prop types
thing I want to show you is prop types
thing I want to show you is prop types which is kind of like kind of a
which is kind of like kind of a
which is kind of like kind of a validation for for our properties so for
validation for for our properties so for
validation for for our properties so for instance let’s see we don’t have any in
instance let’s see we don’t have any in
instance let’s see we don’t have any in the main app component but if we go into
the main app component but if we go into
the main app component but if we go into projects into our projects component we
projects into our projects component we
projects into our projects component we have what do we have projects itself as
have what do we have projects itself as
have what do we have projects itself as a property and then we have the function
a property and then we have the function
a property and then we have the function on delete which is a property so if we
on delete which is a property so if we
on delete which is a property so if we want to add kind of a validation for
want to add kind of a validation for
want to add kind of a validation for those you can go down under the class
those you can go down under the class
those you can go down under the class and then say projects dot prop types and
and then say projects dot prop types and
and then say projects dot prop types and let’s say projects and that’s an array
let’s say projects and that’s an array
let’s say projects and that’s an array so we want to make sure that it gets
so we want to make sure that it gets
so we want to make sure that it gets formatted as an array
formatted as an array
formatted as an array so if we say react dot prop types
so if we say react dot prop types
so if we say react dot prop types dot array and then we have on delete
dot array and then we have on delete
dot array and then we have on delete which is a function so we can say react
which is a function so we can say react
which is a function so we can say react dot prop types dot func
dot prop types dot func
dot prop types dot func now if we save that nothing happens
now if we save that nothing happens
now if we save that nothing happens because it’s correct but if we were to
because it’s correct but if we were to
because it’s correct but if we were to let’s say projects if we want format
let’s say projects if we want format
let’s say projects if we want format that as a string if it’s supposed to be
that as a string if it’s supposed to be
that as a string if it’s supposed to be a string now we’re going to get an error
a string now we’re going to get an error
a string now we’re going to get an error saying that projects of type array
saying that projects of type array
saying that projects of type array expected to be a string okay so it
expected to be a string okay so it
expected to be a string okay so it doesn’t actually stop it from working
doesn’t actually stop it from working
doesn’t actually stop it from working but it does give you this warning
but it does give you this warning
but it does give you this warning telling you that that property is the
telling you that that property is the
telling you that that property is the wrong type all right so it’s good
wrong type all right so it’s good
wrong type all right so it’s good practice to do this okay now let’s copy
practice to do this okay now let’s copy
practice to do this okay now let’s copy this and let’s do that for project item
this and let’s do that for project item
this and let’s do that for project item as well
as well
as well project item we again have on delete and
project item we again have on delete and
project item we again have on delete and then we have the project which is a
then we have the project which is a
then we have the project which is a property so let’s go down here and we’ll
property so let’s go down here and we’ll
property so let’s go down here and we’ll change this to project item
dot prop types and we have project which
dot prop types and we have project which is an object okay so we want to do that
is an object okay so we want to do that
is an object okay so we want to do that and then on delete which of course is a
and then on delete which of course is a
and then on delete which of course is a function save that there’s no errors
function save that there’s no errors
function save that there’s no errors because everything is correct now we’ll
because everything is correct now we’ll
because everything is correct now we’ll do the same for add project so for add
do the same for add project so for add
do the same for add project so for add project we have let’s see we have
project we have let’s see we have
project we have let’s see we have categories which is a property and
categories which is a property and
categories which is a property and that’s an array so we’re going to keep
that’s an array so we’re going to keep
that’s an array so we’re going to keep that and then we have add project which
that and then we have add project which
that and then we have add project which is where is it right here this dot props
is where is it right here this dot props
is where is it right here this dot props dot add project which is a function okay
dot add project which is a function okay
dot add project which is a function okay so that should do it and there we go now
so that should do it and there we go now
so that should do it and there we go now I also want to show you how we can bring
I also want to show you how we can bring
I also want to show you how we can bring in other data from from an outside API
in other data from from an outside API
in other data from from an outside API so I’m going to close all these except
so I’m going to close all these except
so I’m going to close all these except for app J s and basically what I want to
for app J s and basically what I want to
for app J s and basically what I want to do is a dev API called Jason placeholder
do is a dev API called Jason placeholder
do is a dev API called Jason placeholder and let’s see I want to get some – dues
and let’s see I want to get some – dues
and let’s see I want to get some – dues so you can see here if we click on that
so you can see here if we click on that
so you can see here if we click on that it gives us an API where we can get JSON
it gives us an API where we can get JSON
it gives us an API where we can get JSON formatted – dues with an ID a title and
formatted – dues with an ID a title and
formatted – dues with an ID a title and so on and we can make a get request to
so on and we can make a get request to
so on and we can make a get request to that – dues so in our application we
that – dues so in our application we
that – dues so in our application we want to make the request in a lifecycle
want to make the request in a lifecycle
want to make the request in a lifecycle function called component did mount so
function called component did mount so
function called component did mount so we’re going to add that here
okay we should actually put this in both
okay we should actually put this in both component did mount and component will
component did mount and component will
component did mount and component will mount so what I’m going to do is create
mount so what I’m going to do is create
mount so what I’m going to do is create function called get to Do’s and let’s
function called get to Do’s and let’s
function called get to Do’s and let’s see we’re going to want to run that in
see we’re going to want to run that in
see we’re going to want to run that in both of these so let’s go here and say
both of these so let’s go here and say
both of these so let’s go here and say this dot get to dues and we also want to
this dot get to dues and we also want to
this dot get to dues and we also want to run that here and then for where we put
run that here and then for where we put
run that here and then for where we put this projects in state I also want to
this projects in state I also want to
this projects in state I also want to create a function for that separately
create a function for that separately
create a function for that separately called get projects and then all we’re
called get projects and then all we’re
called get projects and then all we’re going to do is grab this cut it out and
going to do is grab this cut it out and
going to do is grab this cut it out and put it in here and then we’ll call it
put it in here and then we’ll call it
put it in here and then we’ll call it here just make things a little neater
here just make things a little neater
here just make things a little neater alright so everything should still work
alright so everything should still work
alright so everything should still work okay now in get to dues this is where we
okay now in get to dues this is where we
okay now in get to dues this is where we want to make our request now we can use
want to make our request now we can use
want to make our request now we can use many many different modules to make HTTP
many many different modules to make HTTP
many many different modules to make HTTP requests I’m just going to use jQuery
requests I’m just going to use jQuery
requests I’m just going to use jQuery all right so let’s go ahead and install
all right so let’s go ahead and install
all right so let’s go ahead and install jQuery through NPM and you can use Axios
jQuery through NPM and you can use Axios
jQuery through NPM and you can use Axios is a good one super-agent is another one
is a good one super-agent is another one
is a good one super-agent is another one but I just want to keep it simple so
but I just want to keep it simple so
but I just want to keep it simple so let’s go ahead and import jQuery up here
let’s go ahead and import jQuery up here
let’s go ahead and import jQuery up here we’ll say import money sign from jQuery
we’ll say import money sign from jQuery
we’ll say import money sign from jQuery and then back down and get to dues or is
and then back down and get to dues or is
and then back down and get to dues or is it right here we’re going to say jQuery
it right here we’re going to say jQuery
it right here we’re going to say jQuery dot H axe and we want to pass in here
dot H axe and we want to pass in here
dot H axe and we want to pass in here URL now the URL is going to be from the
URL now the URL is going to be from the
URL now the URL is going to be from the jason place holder which will be this so
jason place holder which will be this so
jason place holder which will be this so we’ll copy that
we’ll copy that
we’ll copy that paste that in the data type is going to
paste that in the data type is going to
paste that in the data type is going to be Jason let’s say I’m going to stay
be Jason let’s say I’m going to stay
be Jason let’s say I’m going to stay cash false and then we have our success
cash false and then we have our success
cash false and then we have our success okay so if everything goes ok this will
okay so if everything goes ok this will
okay so if everything goes ok this will run and that takes in the data that’s
run and that takes in the data that’s
run and that takes in the data that’s returned and then we also have we need
returned and then we also have we need
returned and then we also have we need to bind this just like we do with the
to bind this just like we do with the
to bind this just like we do with the other ones the other functions we’re
other ones the other functions we’re
other ones the other functions we’re going to say bind this and then we’ll
going to say bind this and then we’ll
going to say bind this and then we’ll put a comma and then we’re going to have
put a comma and then we’re going to have
put a comma and then we’re going to have our error in case there’s an error all
our error in case there’s an error all
our error in case there’s an error all right and then for that that’s going to
right and then for that that’s going to
right and then for that that’s going to take in power actually it’s going to
take in power actually it’s going to
take in power actually it’s going to take in a couple things it’s going to
take in a couple things it’s going to
take in a couple things it’s going to take in eight and xhr status and error
take in eight and xhr status and error
take in eight and xhr status and error and then all we want to do here is
and then all we want to do here is
and then all we want to do here is console dot log the error alright now if
console dot log the error alright now if
console dot log the error alright now if everything goes ok we want to take the
everything goes ok we want to take the
everything goes ok we want to take the data that’s returned and put it into our
data that’s returned and put it into our
data that’s returned and put it into our state so up in the state here let’s add
state so up in the state here let’s add
state so up in the state here let’s add – duze which will be an empty array and
– duze which will be an empty array and
– duze which will be an empty array and then down here we can say this dot set
then down here we can say this dot set
then down here we can say this dot set state and we’ll say – duze and we’ll set
state and we’ll say – duze and we’ll set
state and we’ll say – duze and we’ll set that to the data all right and then
that to the data all right and then
that to the data all right and then let’s put a callback and then we can
let’s put a callback and then we can
let’s put a callback and then we can check the state so console dot log this
check the state so console dot log this
check the state so console dot log this dot state so since we have get to do is
dot state so since we have get to do is
dot state so since we have get to do is running in these life cycle methods it
running in these life cycle methods it
running in these life cycle methods it should run right when the app loads so
should run right when the app loads so
should run right when the app loads so let’s go back there and open up the
let’s go back there and open up the
let’s go back there and open up the console and if we look at the object we
console and if we look at the object we
console and if we look at the object we have our projects of course and then we
have our projects of course and then we
have our projects of course and then we have 200 – duze okay that these are
have 200 – duze okay that these are
have 200 – duze okay that these are coming in from that API so it’s as easy
coming in from that API so it’s as easy
coming in from that API so it’s as easy as that to bring in data from an outside
as that to bring in data from an outside
as that to bring in data from an outside source and put it into our state and
source and put it into our state and
source and put it into our state and then we can use that in the rest of our
then we can use that in the rest of our
then we can use that in the rest of our application
application
application and just I guess we can do that real
and just I guess we can do that real
and just I guess we can do that real quick let’s create another component
quick let’s create another component
quick let’s create another component called to do zjs and we’ll also create
called to do zjs and we’ll also create
called to do zjs and we’ll also create one called to do item J s and we’re
one called to do item J s and we’re
one called to do item J s and we’re going to do kind of the same thing we
going to do kind of the same thing we
going to do kind of the same thing we did with the projects so I’m going to
did with the projects so I’m going to
did with the projects so I’m going to copy what we have in projects and paste
copy what we have in projects and paste
copy what we have in projects and paste that in to do zjs okay we’re going to
that in to do zjs okay we’re going to
that in to do zjs okay we’re going to change a lot of these two to do this
change a lot of these two to do this
change a lot of these two to do this will be to do is I’m not going to do the
will be to do is I’m not going to do the
will be to do is I’m not going to do the delete and adds though I just want to
delete and adds though I just want to
delete and adds though I just want to list them so we’ll get rid of that let’s
list them so we’ll get rid of that let’s
list them so we’ll get rid of that let’s change this and I know I’m moving kind
change this and I know I’m moving kind
change this and I know I’m moving kind of fast but I just want to I don’t want
of fast but I just want to I don’t want
of fast but I just want to I don’t want this to take too long now we’re going to
this to take too long now we’re going to
this to take too long now we’re going to pass into dues as properties just as we
pass into dues as properties just as we
pass into dues as properties just as we did here and then we’ll say to do items
did here and then we’ll say to do items
did here and then we’ll say to do items this dot props dot to dues dot map okay
this dot props dot to dues dot map okay
this dot props dot to dues dot map okay then here we’re going to return the
then here we’re going to return the
then here we’re going to return the to-do item component we don’t need the
to-do item component we don’t need the
to-do item component we don’t need the on delete and I believe the twos have a
on delete and I believe the twos have a
on delete and I believe the twos have a title let’s check it out yeah they have
title let’s check it out yeah they have
title let’s check it out yeah they have a title and an ID so this can be to do
a title and an ID so this can be to do
a title and an ID so this can be to do dot title to do oops
okay down here change that will just say
okay down here change that will just say to-do list all right and then for the
to-do list all right and then for the
to-do list all right and then for the prop types we don’t need the on delete
prop types we don’t need the on delete
prop types we don’t need the on delete and then let’s make sure we export to
and then let’s make sure we export to
and then let’s make sure we export to dues all right so let’s save that and
dues all right so let’s save that and
dues all right so let’s save that and then in to-do item we’re going to copy
then in to-do item we’re going to copy
then in to-do item we’re going to copy what we have in project item paste that
what we have in project item paste that
what we have in project item paste that in okay we don’t need to delete then
in okay we don’t need to delete then
in okay we don’t need to delete then here let’s call it to do change that we
here let’s call it to do change that we
here let’s call it to do change that we don’t need a category so let’s get rid
don’t need a category so let’s get rid
don’t need a category so let’s get rid of that it’s just going to be the to do
of that it’s just going to be the to do
of that it’s just going to be the to do we don’t need the link to delete change
we don’t need the link to delete change
we don’t need the link to delete change that
all right so we’ll save that and let’s
all right so we’ll save that and let’s see now in the main app component we’re
see now in the main app component we’re
see now in the main app component we’re going to import both of those are
going to import both of those are
going to import both of those are actually we’re just going to import to
actually we’re just going to import to
actually we’re just going to import to dues all right and then we’ll add that
dues all right and then we’ll add that
dues all right and then we’ll add that down here let’s put an HR save that and
down here let’s put an HR save that and
down here let’s put an HR save that and I’ll probably get an error no error but
I’ll probably get an error no error but
I’ll probably get an error no error but we’re not outputting anything and that’s
we’re not outputting anything and that’s
we’re not outputting anything and that’s because we didn’t pass anything into to
because we didn’t pass anything into to
because we didn’t pass anything into to do so we want to pass along the two dues
do so we want to pass along the two dues
do so we want to pass along the two dues that we have in state so we’ll say this
that we have in state so we’ll say this
that we have in state so we’ll say this dot state dot two dues save it and there
dot state dot two dues save it and there
dot state dot two dues save it and there they are so those are all coming in from
they are so those are all coming in from
they are so those are all coming in from that API so you can see it’s easy to
that API so you can see it’s easy to
that API so you can see it’s easy to pull in data and just bring it into our
pull in data and just bring it into our
pull in data and just bring it into our state and then publish it down to
state and then publish it down to
state and then publish it down to components through properties and we
components through properties and we
components through properties and we made a get request but of course we
made a get request but of course we
made a get request but of course we could also make post requests and we
could also make post requests and we
could also make post requests and we could submit data to a pis into external
could submit data to a pis into external
could submit data to a pis into external databases and so on alright so this is
databases and so on alright so this is
databases and so on alright so this is getting kind of long so we’re going to
getting kind of long so we’re going to
getting kind of long so we’re going to go ahead and stop here we covered pretty
go ahead and stop here we covered pretty
go ahead and stop here we covered pretty much all the fundamentals of react I do
much all the fundamentals of react I do
much all the fundamentals of react I do hope you guys learned something and
hope you guys learned something and
hope you guys learned something and enjoyed this I will get this code up on
enjoyed this I will get this code up on
enjoyed this I will get this code up on github and I would also suggest checking
github and I would also suggest checking
github and I would also suggest checking out the ten project react course which
out the ten project react course which
out the ten project react course which I’ll have ready in a week or so and then
I’ll have ready in a week or so and then
I’ll have ready in a week or so and then also I have a more simple intro to react
also I have a more simple intro to react
also I have a more simple intro to react course as well as a reactant flux course
course as well as a reactant flux course
course as well as a reactant flux course alright so thanks for watching and I’ll
alright so thanks for watching and I’ll
alright so thanks for watching and I’ll see you next time
”
Be First to Comment