all right now it's time to build the front-end portion of our application so
let's get right to it let's start here in our source folder which is where our
front end is and we'll just start with App.js is let's start with some cleanup we
don't need this constructor and we actually don't need this method here
either they come by default with the boilerplate project we don't need those
we're not going to be making Ajax call here this is a pretty dumb component and
then let's replace the default markup that we have with some new markup so
we'll have an h1 which will be our basically our title says heroes and then
below that let's create something called a header bar which is just an empty div
with a nice blue bar and then below that this is where all of our hero's go
pretty much the application is gonna go here and I'm calling it heroes for now
because that's gonna be the main wrapping component I'm gonna have some
CSS and I'm just copying and pasting this in and get this from the github project
home let's collapse our bar and then let's check and see what this looks like
so far in the browser okay starting to look pretty good we got a title we got a
bar ready to build out our list of heroes over here on the side so let's do
that I'm gonna come over and I'm going to
create a components folder where we're gonna put all of our components and
inside of that create a new component and call it heroes now inside the heroes
component we're going to need to import React and component alright so let's
start with a component class and abrir just gonna call it heroes and then we're
gonna go ahead and set the initial state of heroes to be an empty array this is
we're gonna stuff the returned from our Ajax call to display on the page here
and then down here let's start writing our JSX so we'll have an empty div and
inside of that a an unordered list of heroes where we're gonna list out all of
the heroes those will go here and then below that let's have an edit area area
perfect and then our edit form goes here too so we'll just put some comments
there now let's go ahead and actually get the heroes so that we can see them
listed out here so to do that and actually before we can do that we need
to actually have some data so let's jump over to our index file up here let's
modify this route just a little bit so let's call this heroes and instead of
welcome to Express let's just say const heroes and that's
going to be arrey and then let's return one so an
hero has an ID a name so I'm gonna use the tick because that's my favorite and
saying what's the tick saying spoon have no idea why but that's what it is
if you've ever seen the tick before that makes sense to you if not that's
complete nonsense so we'll send back our heroes sorry and we want to do res.json
because we want to send back some JSON cool let's restart the server and then
let's test this out make sure this works so we'll jump over to the browser
remember Express is running on port 3001 so we can say api/heroes and we should
get back yep we do there's our JSON so we're ready to consume this and display
it over here so let's do that we can hop over to our hero's file and we can just
sort of list out our hero's here so what we could do is say this don't state dot
hero's and map and map will loop over our hero's object and we can work with
each individual hero in that collection and then we could have we could have
just a list item that has the hero name let's just do this for simplicity at the
moment and we'll start to build this out more and then up here we need to
actually make our Ajax call so let's do that I'm gonna use a component did mount
method so our components mounted it's ready to go and we use the fetch API to
call /api/heroes which returns a promise we get a result we'll
take that result turn it into JSON which is a built-in method on fetch and that
because is yet another promise which has our actual JSON in it and then in there
we can say this.setState and then heroes is equal to our JSON okay so
we're making the API call we're turning the result into JSON and they were
taking the JSON which is the array and we're putting it into the state and then
we're looping over the state and listening out the heroes let's go ahead
and add this component to our App.js file since we're done here and let's go
ahead and put it in so we'll just say we can say heroes and it'll automatically
get pulled in and imported up here at the top cool alright now let's go back
and check out our app tation and we're pulling in our items so
if we added another item it would show down below this just go ahead and
continue to build this out and again we don't want to put all of this here let's
actually make this into its own component so we'll pull this out and I'm
gonna do a new file here and let's go ahead and save it I'm just gonna call it
hero.js and we'll put it inside of these source components here we'll just
save it right there then we need to pull and react and we actually don't need
component we just need to React and this is gonna be a stateless component and
we're gonna call it hero and we'll build out the innards of this thing and we'll
have a list item and that list item will contain a delete button so we can delete
the hero and it will contain an element which has all the hero of properties on
it so we'll call that hero element and inside of that we're gonna have a badge
which will display the ID and then we can just copy option shift copy these
three rows down we can change this to a name and we can change this to sink okay
and then up here we're gonna look at props hero which we haven't created yet
the ID and then let's copy this in as well and actually I should have done
that and then copy the line down would have been a little bit faster here and
then we'll update the name and we'll update the saying okay we're pretty much
ready to go here other than the fact that we need to add in properties so
let's add in props up here otherwise we won't be able to read them and we're
ready to use this component in our hero's component let's let's go back and
we can just do return and we can say hero we'll just let it pull in our hero
component automatically if you remember it does that up at the top and then we
need to pass in that prop that hero's props.hero right there and then
we'll just say it's equal to hero okay if we do this and nothing else this
should work just fine so if we go back over to our application and oops made a
little bit of a typo there so let's go ahead and fix that so it's not props.hero
it's not props.name its props.hero.name and props.hero.saying
and now we're looking a whole lot better cool alright so the
next thing we need to do is add in the ability to edit this item so that's what
we'll be doing next now what we want to happen is when we click this item
when an edit form to show up and we want this to be highlighted in the edit form
to contain the data from this item so the first thing you need to do is
actually handle the select from this item here so let's jump back over here
and I'm gonna go back to the heroes component and in fact I'm gonna go let
me move this to the side and let's close everything but this stay focused here
and what we need to do is we need to pass in a basically a click event
handler for this hero so we click on a hero we can handle the event so first
let's just add that event here and we'll call it a handle select and then that's
going to receive a hero so when we click on this hero element any hero element it
will handle the select and pass that hero in to the select event and we also
need to go ahead and start with a constructor here because we're gonna be
using events so we're gonna need to bind the context of those events so bear with
me here let's carry it create a constructor and then inside of that
we'll call super and then we'll just add our state back on and then the next
thing we want to do is we want to bind so we'll say this.handleSelect
equals this.handleSelect that bind this and the reason why we do that is so
that inside of our function here this has an actual value if we don't do the
bind up here then this will be unknown and that is not a limitation of React
with a limitation of es6 classes just the way it is so now when we handle this
the select what we want to do is we want to go ahead and set a selected hero so
we're gonna do this.setState and we're gonna do a selected hero and set
that to hero right here now once we've set the selected hero we need to show
this edit area form which we haven't created yet so let's do that now I'm
gonna open up a new file we'll save it and we'll call it EditHero and we'll
put it in the source and the components and let's give it the right file
extension there we go and then let's import React and again this is going to
be a stateless component and it's gonna be called EditHero ok and we're gonna
put our edit form here now actually gonna copy this in because it's a little
bit lengthy ok so let's look at this markup because there seems to be a lot
of it it's not that bad but let's go through it we're gonna look at the
selected and if there is a selected hero then
we're gonna return the enough markup to create the Edit form if we scroll down
the else condition is to return an empty div so we're gonna only gonna show the
Edit form when there is a hero selected that's all that's doing and then we're
gonna loop to the Edit fields and on the ID portion we're gonna look at the props
and say are we adding a hero this is a boolean value that we have it created
yet if so then allow the user to change the
ID if not then the ID will just be a label and then as we move down the form
we're gonna have two more inputs one for name and one for saying and the value
will be the selected hero name and saying so we're bound to the selected
hero so when we change the selected hero in this form the selected hero objects
going to change and that's what we're gonna eventually pass back to the
database and then we're handling the on change of inputs because this is how
forms work in React and these are controlled inputs so we're actually
gonna have to handle the change of these inputs so that we can make sure that our
selected hero changes along with those inputs when they change so let's go
ahead and build this out in our heroes file where we're actually going to
consume this edit hero component so let's go back here and we'll add an edit
hero as we've done before many times and then we need several different things
here the first thing we need here is adding here adding here is a boolean
that tells us whether or not we're adding a hero or editing a hero we're
gonna set that equal to this.state.addingHero and that doesn't exist
so let's go ahead and add that to our initial state up here so we'll say
hero's and adding hero by default will be false okay now the next thing that we
need to do is we need to pass in the selected hero so we'll say selected hero
and that's going to be equal to this.state.selectedHero and if you
remember on our select event up here we're actually setting that selected
hero to the hero when a hero is selected now the next thing we need to do is we
need to handle the on change event of those inputs so we're going to go ahead
and do on change and we're gonna have an event called this.handleChange
doesn't exist yet we'll create that in a moment
we've also got an on save event in form so we'll visit this.handleSave
and we've got a cancel event so on cancel it equals this.handleCancel
okay let's go ahead and add these events in up here and I'm just gonna go ahead
and so you don't have to watch me type all this I'm just gonna go ahead and put
them in and I'll be right back with you alright I've added those in here's all
the events and I just stubbed him out I haven't coded anything so you didn't
miss anything and then of course they've been added in down here so let's go
ahead and take a look at the application still nothing is happening here and
that's because we're not handling the click we haven't wired this up and we
need to do that in this hero component so what we need to do is is pass in an
event here so we're gonna pass in the let's see handle select is what we
called its arena say on select equals handles select and now that we're
passing an onSelect prop we need to do something with that prop so let's
go over to our heroes file our hero file excuse me and let's go ahead and handle
that so in the list item each time we have a click an on click in the list
item here we need to handle that and I'm going to copy this in alright so on
click we're going to call the on select from our props and we're gonna pass in
the currently selected hero and then the other thing we that we need to do is we
need to set a class name so that we know that this item when it's selected stays
highlighted so we'll do that and I'll copy that in alright here we go on this
line we've got the class name and the class looks at the hero and compares
that to the selected hero and if those two things are the same then it applies
a selected class if they're not then there is no class so one last thing over
on heroes we need to actually pass in our selected hero because we're not
doing that yet so let's do selected hero equals this.state.selectedHero
ok perfect save that I'll get some formatting we're
looking good alright let's jump over to our application and have a look oh and
we've got a silly area here this needs to be this.handleSelect all right
and now if we click on one of these we see the Edit form and the item stays
highlighted so the next thing we need to do is wire up the cancel button because
that doesn't currently do anything so let's go back and do that in this method
have to do is say this.setState and we're gonna say the selected hero and
we're just gonna set it to null because there's no longer a selected hero and
what that will do is reset the form so if we click this now we say cancel and
we go back right this is no longer highlighted and the form goes away
perfect now notice in our edit form we can't actually edit this form so I can
type all day but these inputs are not accepting that and that's because these
are controlled inputs so we need to handle the change and we've already
specified that here on the on change we've already got a method waiting to be
implemented here so let's do that in the handleChange what we want to do is
first we want to get a reference to the currently selected hero so we're going
to say let's selected hero equal this.state.selectedHero because the
things in the state are immutable means you can't change them so in order to
change it we have to make a copy change the copy and then put it back this is
generally considered a good thing because it makes it so that you can't
change the state really without very explicitly doing so and now we want to
change you that the name or the saying of the selected hero based on which
input change but how do we know which input change they're all calling this
same event well we're gonna pass in an event object and that's already me and
passed in and then what we'll do is we'll use array notation on the selected
hero so we look at the event target name so if we come back over and look at our
event targets you can see that we have our event target name is set to name and
name is set to saying here so when this happens this will be selected hero dot
either saying or name depending on which event got passed in and then we'll set
it to the value of the input so that's how we can use one event to handle
multiple inputs and then the last thing we want to do is just update the state
so this.state and selected hero equals selected hero
okay now that we've done that let's go back over to our application click on
one and now we can edit these fields right and you can see that as I make
these changes it makes the change over here on this
side as well all right so we're good let's go ahead and implement the ability
to add a new item to do that we're gonna need a button so let's add one in I've
got one ready to go and we need a handle enable ad mode so I'm gonna add that in
okay so I've added that in both up top here I've bound it and down below here's
the method and what we want to do is we want to set the state here and we're
gonna set two things we're gonna set adding Hiro because that's not true and
we're going to set the selected hero to a default value so we're gonna give
it all empty strings all the way across the board and the reason why we're doing
that is we're looking at this both of these properties really so selected hero
if we go back over to the form see if we all pass the selected hero we don't see
this form at all so we need to pass in a selected hero otherwise we see nothing
because this is how we're controlling the visibility of the form and that the
boolean just tells us we're in an edit mode versus add mode so now we click on
the button we get the form here now it's important to note that now that we've
set the adding hero state here to true whenever we cancel out we need to make
sure that we put that state back so we need to say adding hero here is false
now once we've done that we come back over if we click we do not get to edit
the ID if we add a new hero we can edit the ID which is exactly what we want so
handling all the different states them you might have here okay now the last
thing we need to do is just implement this delete and this save but really we
need to wire those up to the database in order to do that so we're on to Cosmos
DB we're ready to rock and roll so let's go ahead and do that
For more infomation >> Video: Here's how you can help pets impacted by the hurricanes - Duration: 2:15. 
Không có nhận xét nào:
Đăng nhận xét