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