Placeholder Image

字幕列表 影片播放

  • Hello, everyone.

  • We're going to build this recipe application in react.

  • So before we dive into it, let me just give you a quick demo of how it's going to work.

  • Essentially, it grabs the recipes from an external FBI.

  • So this is what happens when the page was loads and then from their own beacon search for recipes.

  • So if I type in shrimp, it's gonna give me the recipes that involve shrimp.

  • And then, if I type and chicken is gonna give me the recipes that involve chicken from their own, began be the recipe by clicking this via recipe.

  • But turn and then it takes goes to that recipe using react route.

  • Sir, once it's been loaded, we can go back to the home page by pressing this.

  • Go home, but said, and it takes us back to home page again.

  • Using were router.

  • Now you may notice that the results that looks for are still there, and this is because we're using data persistence to store what they tell locally.

  • For this project, you are expected to have a little bit off knowledge of JavaScript, react and react router.

  • Okay, so without only further ado, let's get started.

  • All right, So you get started.

  • I've already created a project for that.

  • For you using the create back.

  • Perhaps you, like, so inside of this folder.

  • I've included a CSS that I've written for this project which lives right there.

  • So feel free to take a look at it.

  • And I've also installed the packages that we're going to need for this project.

  • So I've installed Bootstrap, and I also installed this react.

  • Write it down, pack it.

  • And these three they already come built into a create rex are protect.

  • Okay, so I've been linked this project in the video descriptions of go and download it.

  • And once you have downloaded it, just go ahead and navigate to it in your terminal type and NPM install to install the all the packages and the non modules folder.

  • And once you've done that, this type in N.

  • P m.

  • Start or yon start to launch this project into your Web browser.

  • Okay, so come on, this is what we're going to stop.

  • It is just a blank screen, but basically a header on a title.

  • Let reads recipe search.

  • And this is what's coming on in this after a jest file.

  • Okay, So, as you know, we're going to top in the values.

  • Well, the names off the recipes to search for them.

  • So how do we actually search for recipes?

  • Well, we need the input form.

  • So to do that, let's just first create a new folder in this source folder, and I'm gonna name it components within this components folder.

  • Let's just create a new file on call.

  • It formed at Jess.

  • Right in that first things first we need to import reactor and react, and then I'm gonna create a stateless, functional components that I'm gonna cool it form.

  • And it's going to be a stateless, functional component because we don't need any state in this component.

  • So if a component is intended in state, that means we can make it a stateless, functional component and not a class based component.

  • All right, so I'm just going to implicitly returns on Jeff Sachs inside of it.

  • I'm gonna create a farm.

  • Come on.

  • And we don't need the actions inside of this foam.

  • That's just creating new input, the type of text.

  • Let's get out of this.

  • I d.

  • And the name for now, and that also gonna create their button that says such and before I forget, Let's just go ahead and expert this right here at the bottoms of expert defaults.

  • Flood.

  • Excellent.

  • Now let's go back to up Jess and import this import form from And then we need to stainless in directory, go into the components directory and then import form.

  • All right, so let's just render it out right there, just below the header.

  • So there you go.

  • Let's go back to the Web browser and make sure that it's showing up.

  • Yes, it is.

  • So let's just creates a method inside of this component and hook it up to this form.

  • But, Jess, because we need to first make sure that everything is working correctly.

  • So I'm gonna call this method get recipe, and this method is going to be responsible for making the AP.

  • I call, Okay, and let's set it to a arrow function.

  • Now, this syntax may look at it.

  • Get to you.

  • You may be used to seeing something like a constructive function, and then inside of it, you basically type in your methods like this, and then you have to hook them up in your constructive function like there's doc.

  • Get recipe equals this dot Get recipe, don't bind.

  • And then you bind in your methods, whatever.

  • But this has been removed.

  • Or you can say that replicated in react extends essentially in reacting scene.

  • You don't really need a constructive function.

  • You can even declare your state without a conservative function just like that.

  • Okay, so this is just a neat way of syntax in the new version of react.

  • And I think this is much better and much more practical than their previous versions.

  • Anyway, getting back to the topic.

  • First of all, let's just Consul dog barks something into this method just to make sure that it's working.

  • Fine.

  • So I'm just gonna call to the log saying working, But how do we hook it up to this form?

  • Components.

  • Well, we first need to go ahead and pass this data to the some component.

  • And how do you pass state her to another components?

  • You use props.

  • So I'm gonna name this probe the same as this method.

  • So I'm gonna say get recipe equals this.

  • So this refers to this up component and then this start get recipe Okay.

  • Press save now back informed.

  • Yes, we do have access to this Get recipe prop because we set it up right there.

  • But to access it, we can't really use wth e this the props approach because this key word only works in class based components.

  • But this is a stateless, functional component, which means we have to pass an argument right there called props.

  • Now with this props refers to these right there.

  • So what's ever get past in there?

  • Get stolen into this argument.

  • So this props is basically an object.

  • So to access the properties of an object you type in, well, props start.

  • And then whatever the name off their property s now another case, we're going to set up an attribute Cold Spawn submit, which is built in react, react attributes.

  • And then we can say props dot And then the name of the prop is get recipe so less it's copy it and place it right there.

  • Accident Press.

  • Save up that jazz and not what we want.

  • We want this consulate look to show up as soon as you press this button.

  • So now if I open up my doula for Jules go to the consul.

  • That search who was happening there?

  • We'll keep your keep your eye right about there.

  • As soon as I press this search button, keep your eye there.

  • Did you see that?

  • That working consul log appeared for, like, just a split second.

  • But then it disappears.

  • And this is because we're going through a full page.

  • Refresh.

  • This said this full page re fresh is the default behavior of anywhere Page.

  • And to change that, all we need to do is we need to pass in an argument.

  • He actually let me discover that too, eh?

  • Error function first, so I don't have to bind it.

  • So this e is basically the event object in jar a script.

  • This is nothing specific to react.

  • So since this is an object means we can access the property's off this object so I can say e not prevent defaults.

  • And this method is going to prevent the defaults behavior of this web page, which is what that is going to refresh.

  • So now if I press save, go back to the Web browser press search, we can see that working consul log is drying up.

  • Really?

  • In it Okay, Well, what do we need to do next?

  • Well, we need to first, let's just let's just make sure that we are actually reading the values that we type in there.

  • So first of all, we need to set up a name attributes, because this is what we're going to use to read the values from the input.

  • Okay, So name.

  • And I'm gonna name it Recipe.

  • Or let's just call it recipe name.

  • Okay, I'm gonna cope with this.

  • And within this get recipe method, I'm gonna create a new constant, and I'm gonna call the same as that recipe name equals.

  • So again, this event object means we can read the properties from it.

  • So ee dot target elements.

  • And then what do we need to access?

  • What we need to access This name attributes.

  • So what's the name of this name?

  • Attributes its recipe name.

  • So eat your target.

  • The elements that name the recipe name.

  • And then what do we need to access from it?

  • We need to access its value.

  • So talked about earlier.

  • Okay.

  • Now, instead of constant logging this working string, let's just actually consulate log This recipe name constant that we just created right.

  • So let's go back to the Web browser and typing anything.

  • Captain Chicken, Press Search.

  • And there we go.

  • This is working just fine.

  • Okay?

  • Now let's get into some more interesting stuff.

  • We need to make an A P I cold to a website, and then we're reading the data from the website and showing up to our Web application.

  • And what's the website that we need to make the FBI calls do well?

  • Is this recipe a P I.

  • Cole's food?

  • Food to folk?

  • That's that's kind of a weird name, but food 24 dot com slash about slash FBI.

  • Now you can read this, but for the most part, all we need to do is you first need to sign up for the website.

  • It's completely free and you need to obtain and a pikey because you need that in order to work with their data.

  • Essentially, an AP ikey is away for websites to know who you are and what kind of data you trying to access.

  • So they usually p i ke that are associated to your email address, and then they just basically want to know what kind of date are you trying to access?

  • That's the whole purpose of obtaining the FBI keys.

  • Okay, so all you need to do is just press the Sino button and then it will redirect you back to this page once you have caught your a p i ke.

  • So the girl that we need to make the FBI call two lives right there.

  • Now see, this is the girl that we need and see this key perimeter right there.

  • This is where you're a P I.

  • Q church should go.

  • So once you have done that, you're your old should look something like this right there.

  • See, this is the exact same AP I right there.

  • Sorry.

  • This is the exact Enduro.

  • Apart from the fact that this ap I key variable has been replaced by my actual ap i ke.

  • So all I did was I first signed up.

  • Then I copied this euro.

  • I pasted it right there.

  • And then instead of this ap, i ke wrapped within those curly braces I just pasted my key right there And what I've been looking for.

  • My defaults be all looking for this shredded chicken.

  • And these are the results that we're getting back.

  • And you may also notice that there's also this count perimeter right there, and we can change that.

  • We will do that later on in the video, but we can change that to anything bigger.

  • Change that to 5 10 15 wherever you like.

  • It just depends on how many results you wanted to show.

  • So in this case, the counter set to five, which means we're getting an array of recipes.

  • And this array has five different objects.

  • And then you see that these other properties that we're going to read in order to access the data.

  • So this publisher title recipe i d.

  • Just some of these were gonna use in our application.

  • Okay?

  • So let's actually go ahead and call me this girl, okay?

  • Go back Thio application.

  • And I'm actually going to just go ahead and create a new constant.

  • But all I'm gonna do there is I'm first going to extract my ap ikey because I'm gonna still thought in your constant.

  • So there we go, because it's always a good practice to just store your important data into your own constants, in case you need it later on.

  • Okay.

  • On dhe just gonna go ahead and create in your string and paste my peak right there.

  • Okay, So once that's been done, we are now ready to make the 80.

  • Typical to this, you are.

  • All right there.

  • So did you that I'm first going to go ahead and put this link out just like that.

  • And inside this recipe method just below this preventing default, Cole, I'm gonna create a new constant, and I'm gonna call a a p I underscore call.

  • And for now, I'm just going to go ahead on initialize a string.

  • And inside of that, I'm going to paste this link right there.

  • It didn't seem right.

  • Let's just fix that.

  • There we go.

  • Okay, So we're gonna make use of something called a Cinco bait and the fetch a p i to make the call to this link right there.

  • So how do you initialize a a sink await function?

  • Or in this case, how do we make this method a synchronous?

  • Well, just before we declare the method, we're gonna top the keywords a sink, Okay.

  • And then right there, you're making the AP.

  • I call type in the keyword of eight and to actually make the h A typical.

  • We're gonna use the fetch a PR.

  • So to do that again, going to go ahead and put this link out and I'm gonna type in the keyword fetch and then there instead of initializing the string, I'm gonna use the TSX tumble little's.

  • So to do that is just using the back ticks and then I'm going to pace the link right there.

  • So we need to change a couple of things now because remember, we have our a p i ke stored in this constant right there.

  • So in yes, six template literal Sze we are allowed to inject the variables inside or a string.

  • So to do that, we're going to go ahead and copy this a pikey constant, and we're going to inject it right there where the key is required.

  • So to insert a template, that troll all you do is you top in the dollar sign and then a couple of Kali braces and then whatever goes inside these colored braces, it basically what we want to do.

  • So, in this case, we just want to inject this ap a key variables again.

  • I'm just gonna go out and copy this and place it right there.

  • And what do we need to do next?

  • Vote?

  • The default search for now is just shredded chicken right there.

  • Later on, we will change that Judy Webber B type into perform.

  • But for now, let's just leave it to shredded chicken.

  • Okay?

  • So I'm actually gonna get rid of this consul.

  • Look right there because we don't need that anymore.

  • So this is just making the FBI, Cole.

  • It's no actually grabbing any kind of data.

  • So to do that, I'm actually gonna create a new constant, and I'm gonna call it results.

  • So let's just call the data, and we're gonna set it to the return value of this fresh function right there.

  • So again, to grab the value, we're gonna first type the keyword of eight.

  • Okay.

  • And then we also need to convert this whatever we get back from this FBI to a Jason format.

  • So you may be used to sing something like, you know, Jason, the parts or Jason not string ified.

  • But what's how clean this is?

  • In fact, a p I All you need to do is you need to type in the contents name which, in other cases, a p I called and then we just call the Jason Method.

  • There we go.

  • Just like so.

  • Okay, so now what?

  • Ever we get back from the a.

  • P.

  • I is going to be stored in this data constant right there.

  • So let's just check what's inside of this data constant.

  • So if I cancel log this data object, not remember this method is going to fire as soon as we press this button right there.

  • So now let's just go back.

  • Thio Application and press search.

  • What's that?

  • No access control.

  • Allow origin.

  • Some websites do not allow local servers to access their data.

  • Now, in our case, we're using a local host 3000 to access the data from this food before website.

  • So we need to do something to trick this food, too, for service into thinking that they are a legitimate website.

  • So another In other words, we are life on the servers.

  • So how do you fix that?

  • Well, there's a very handed to for that.

  • It's called course Any bear Takahiro Cuda home.

  • So all we need to do is we need to go ahead and copy this year Oh, okay.

  • And go back to our obligation.

  • And just before our link begins, we just perfect sit with this rural that we discovered right there.

  • All this is going to do is it's going to trick this website into thinking that our server, which in our case is local host this is actually in life server that lives somewhere on the Internet.

  • Okay, that's all this euro is going to do so now if I press save and then go back Thio application, press search.

  • And hopefully this should give us some sorts off later.

  • And guess it does so this essentially is an object.

  • And the value of that is this data constant right there.

  • So if I expend it, this is the count.

  • So remember, we're getting it ray of five objects because we have set the count to five.

  • So if I change the count to, let's say, 10 let's see what we got back.

  • So press such.

  • And there we go.

  • We get an array of 10 objects, So let's just go ahead and crack open this recipe array and let's take a look at what's inside of these.

  • Well, it's basically like a set it's an array, and inside of that is just account of objects.

  • So that count is what we type in right there.

  • So let's just crack open the 1st 1 So these are just a bunch of properties that we're going to use in order to display the data on our website.

  • So what we need here?

  • Well, actually access this data.

  • What we need to do is we need to drill down into this ray first, this recipe's array.

  • So we're gonna have to think something like eight or so.

  • Remember, data is this whole object.

  • So to drill down into recipes, we have to say data recipes.

  • And now if I cancel log this, we get back the array that we need.

  • So this is the array on DDE.

  • Let's just say that we want to go to this first element in this race so I can say turns again to access a number in Honore.

  • Use the index in this case, it zero.

  • So we want to access the first element and inside of there and inside of that, let's just try and access this recipe ideas.

  • So let's just copy that Ons paste it right there and let's see what we got back.

  • So process And there we go.

  • We get the recipe, I d back.

  • But this isn't what we want.

  • We actually want to display the data on our actual page, which is this whole thing right there.

  • So how do we do that?

  • Well, let's take a look.

  • So to actually display this piece of data, we don't really have anywhere to store that inside of show.

  • We do have this constant call data, but this only exists inside of this method.

  • So now would be a good time to introduce state within our application.

  • So to do that, it's just gonna type in the keyword state, and I'm just gonna set it to an empty object.

  • Now again, you might be used to doing something like typing in a constructor and then declaring your state like that.

  • But like I said in react 16 and further on, you don't need the constructive function at sold, so you can just delete that Also cover on DS.

  • What you can do is you can just simply declare your state like that.

  • So what kind of state do you want to trace what we want to do is we want to set up an array which is going do still, whatever we get back from the FBI and what do we get back?

  • We get back on array.

  • So to do that, let's just create a first piece of state called recipes and set it to an empty array.

  • Excellent.

  • Now, how do we actually make use of this state right there?

  • Well, instead of constant logging, this piece of data right there, let's just do something else.

  • Let's just use the built in set state method to set this piece of data to this recipe's erase.

  • So to do that, I'm just going to say, this don't set state on.

  • It's gonna take an object.

  • And within there, we want to grab the recipe state, and we want to set it to data just like that.

  • Okay, so now instead of Consul logging, what's we get back from this data less?

  • Consul, log this piece of state right there.

  • So consulate, look and this dot state dot recipes.

  • Okay, let's go back.

  • Sued the Web browser.

  • Open up, Ro Conso press search and we should get back over a piece of state.

  • And that we do.

  • And inside of this piece of state we have an object.

  • And then inside of the object is this recipe's a rare right there.

  • So all we want to do right there is the only want this array right there.

  • So to do that, let's just say data dot and then is this recipe's a right there because we want to set this recipe's array to this recipe's a rail right there.

  • Okay, so data dot recipes.

  • There we go.

  • Go back to the browser press search, and now we get back is an array.

  • And within that Ray, there's just a bunch of objects.

  • So this is old Belen.

  • Good.

  • But how do we actually display this data onto our actual screen?

  • So to do that, let's just do something more interesting.

  • For now, all I'm gonna do is I'm going to open up a job, a script expression right there.

  • Which means and by the way, in JSX, opening up of college braces means that you want to inject something that is related to Jarvis ribs.

  • Okay, So to do that, I'm gonna make use of an array methods cold mop.

  • Now, map is a new method that was introduced in a later version of JavaScript.

  • And essentially, it allows you to go through each element inside of in a rake, and then you can manipulate it.

  • You can change it anything you want to do with it.

  • So it's kind of like the full reach method but ingest sex.

  • We can't really use the full loop of the four each loop, so we're gonna have to make do with what we have.

  • So what we have here is theory method, a radar map method.

  • So in this case, the recipe state is an array.

  • So all we can do is we can say this dot state dot recipes, and then we call in the methods called map and this method takes a callback function.

  • So let's just give it a callback function.

  • And we also give it a argument right there an argument, I should say, or a perimeter.

  • And this perimeter is going to contain each of the element that are inside of this recipe's array once the state has been set.

  • So let's just call it a individual recipes just like that.

  • And then within that, let's just return a paragraph that says and again.

  • Since we're gonna make use of this JavaScript thing inside of this Jess ex paragraph sacks, we have to introduce colleague races.

  • So what do we want to access?

  • Well, for now, let's just say recipe.

  • And then let's just crack up on one of these and recipe doc title.

  • For now, let's just counsel.

  • Let's just print out recipe doc title.

  • So remember, it's gonna print out 10 different titles on the screen because it's going to loop through each of these elements right there, and the number of them is 10.

  • So we're gonna get 10 titles printing out to the screen.

  • Okay, so, again, press save, go back to the Web browser Dirar.

  • No errors, which is good.

  • So now if I press search, I should get some titles onto the screen.

  • Yes, we do.

  • This is brilliant, but we also have an error.

  • It reads.

  • Each child in an array or its Reiter should have a unique keep prop, and this error is something to do with react.

  • Essentially, it's asking us to set a perimeter called key to each of these elements that have been lived over, and the reason for this is that yet wants to know what eat off this elements are.

  • I mean, there is nowhere for react to know what this title is, What this title is.

  • All this doing is it's reading the properties of each of the object right there.

  • But it also needs to know in future in case we need to manipulate any of these so react can describe the key prop.

  • And then from there, it can do his thing.

  • So to do that, all I'm going to do is I'm going to set this recipe i d which is this right there?

  • I can also set the title or the Social Errol, as long at it's something unique and different to compare to the other objects it will do.

  • But just for the sake of simplicity, I'm going to copy this, and I'm going to say that key equals and again I'm gonna have to open up a Java script expression.

  • And inside of this, I'm gonna say a recipe.

  • Don't recipe underscore i d.

  • Now, if I press save and go back to the bad browser press search, they can see that all the titles are printing up to the screen and We also don't have any errors.

  • This is just a he s lent complaining That recipe name has been declared, but it's not been used.

  • And this isn't really something to worry about, so let's just move on.

  • So currently we are just getting the default value, which is this shredded chicken right there.

  • But what we want to do is we want to get the results of whatever the user types into this input phone right there.

  • So to change that, we already have a value from the form which we grabbed earlier on using the event object.

  • So all we can do is we can use this recipe named Constant.

  • And like I said, this is a template string, so we can actually inject this variable right there instead of this red a chicken.

  • So why can do this?

  • I can just cut this out, okay?

  • And then Tiu, open up a template.

  • The troll typing the dollar side followed by a pair.

  • Of course, the braces.

  • And then But in that we can inject this variable right there just like that.

  • Okay, press save.

  • Go back to the Web browser.

  • And now if you type in, let's say shrimp press search.

  • And we are indeed getting the results that involves shrimp on the screen as realized in the console right there.

  • Okay, so what's next?

  • So let's actually grab a bit more than just the titles.

  • So if I just crack open one of these objects right there, we can use a bunch of properties there.

  • So what we gonna years is we're gonna use this title, which we already use, and we're also gonna use this publisher name on it.

  • We're also gonna year this image where l But for now, let's just throw in this image and see how it goes.

  • So I'm just gonna go ahead and copy this, Gonna go back thio application.

  • And instead of just returning this one single paragraph less, actually, just cut it out.

  • Open up a pair of parentheses, and inside of it, less creative.

  • Throw in that paragraph tag.

  • And let's also add in a image tag just above this paragraph, Saxo and the source is gonna be actually this recipe dot and then the image you are.

  • Oh, so as always, to open up a javascript expression, you have to throw in a pair of curly braces and then recipe and then image barrel.

  • So what kind of description do we need to give it to this image stock?

  • Well, we can just throw in the title there just like we did right there So we can say again to initialize Job was stripped expression.

  • Come on, We have to first open up a pair, of course, the braces and then recipe dot title accident.

  • Now, if you go back to the Web browser and press set less look for Peter this time and we should get back the images.

  • They look hideous at the moment, but we'll fix that.

  • So why is this giving and ever again this keep proper era, even though we have already passed the key right there?

  • Well, the air here is that the key has to be passed within the most parents element.

  • So what's the most parent element in this case?

  • Well, is this deal right there?

  • So I'm just going to put this out on dhe paste it right there, just like that.

  • So now if you go back Thio application, press pizza on dhe.

  • Yeah, it's working out fine, but it's looking rather hid.

  • Yes, at the moment.

  • So we're gonna fix that next.

  • So to do that, we're gonna make use of bootstrap, which I already have included in our package stat Jason and as well as other index charge as well right there.

  • So, to make use of bootstrap, we're just gonna add a bunch of classes from the bootstrap framework.

  • But before we do that, let's take care of this piece of code right there.

  • All we're doing there is we are mapping over this piece of state right there.

  • But this is a bit messy.

  • I mean, we don't want to do that in our up components.

  • So to take care of that, let's just transfer this into its own components.

  • What I'm gonna do is I'm gonna create a new components in the components folder, and I'm going to call the recipes.

  • Don't.

  • Yes.

  • Okay.

  • Once I'm in there that's gonna import react from react after that.

  • Let's just create a stateless, functional component, because again, we don't need any state in there so we can make this a stateless, functional components to do that.

  • I'm just gonna call that recipes, and I'm gonna set it equal to another function.

  • And I'm going to implicit the return Some Jess X.

  • So first of all, I'm just gonna return it, Dave.

  • And within this dip, for now, let's just typing recipes just to make sure that it's working.

  • And right there, let's just export de falls at the bottom.

  • Excellent.

  • Now let's go back.

  • Thio up jest while on dhe just underneath this form component less import the recipes.

  • So import recipes from and then it's the components directory and then recipes.

  • Okay, so I'm actually going to cook this out, and I'm just going to go ahead and rendered out recipes.

  • Components save.

  • Go back to the bed, Rosa.

  • And we do have a recipes component showing up, Okay, but we don't want it to just render out this text.

  • We wanted to actually display the dates.

  • Have that be, well previously getting.

  • So how did he do that?

  • Well, first of all, we need to pass this state this recipe's array to this recipe's component, and then in this inside of this recipe's component, that is very we're going to map over that piece of state right there.

  • So how do we pass this piece of state to our recipes?

  • Components Well, as always to pass anything inside of react, you have to use props.

  • So to do that, I'm just gonna pass the new props, and I'm gonna call that recipes, okay?

  • And and I'm gonna set it to this state Doubt recipes accident.

  • So now this prop means that we do have access to our recipe states that lives there.

  • So now, back in recipes that Jess fell to get access to this prop right there because need to pass in an argument right there calls crops because this is the only baby can access the props.

  • We can't really say something like this dot Props don't.

  • However, because that this key word will not work inside.

  • This just lacks that lives inside of this era function.

  • Okay, if it was a class based component that we could have used it.

  • But in stateless, functional components, there's no way we can access the props using of this key word.

  • Okay, so now how do we proceed with huh?

  • Recipes, props?

  • Well, it's the same as what we did right there.

  • So I'm actually just going thio paste the piece of cord.

  • I copied her that I could earlier and all I'm gonna do within there is I'm going to get rid of this key word, and I'm also gonna get rid of this state because the state does not exist in this component.

  • Instead, I'm gonna type in props.

  • And what's the name of the prop?

  • Is this recipe.

  • So perhaps don't recipes and then is the exact same thing that we have been following.

  • So again, let's just break it down.

  • We passed the props, property, the past, that props argument that props argument has access to this recipe is propped right there and then inside of this inside of this debate.

  • All you're doing is you're mapping over this piece of state right there, and this gets filled once there's such recipe button gets called.

  • Okay.

  • And then once that's been called, that means that this this probe has access to this piece of shit right there.

  • Which means we can actually map over inside open on the component.

  • And that component right now is this recipe's component.

  • Okay, a lot of talking.

  • Now let's save the file, go back to the Web browser and see if that works.

  • Let's just open up the consul and less look for chicken press search and we are indeed getting back 10 different values.

  • Sorry.

  • 10 different recipes for the chicken and this is brilliant.

  • So now that we have taken care of this recipe's component, let's go ahead and actually style It's our application because it looks very angry right now, so let's continue with that.

  • So But I say styling, I mean that I'm just gonna add a bunch of CSS properties that I've already declared inside of this abduct CSS file.

  • So if something doesn't make sense to you, then I have named this class is very appropriately, so just have a look at this while and it should make everything clear to you.

  • And, like I said before, I've already installed, spooked drop into this product as well.

  • And this is being imported right there inside of this index, suggest foe, and we're gonna make use of boot shop as well.

  • Okay, so we're not really gonna make any changes to this app that Jess file.

  • Instead, let's just first open up this formed a jest file and this is where we're gonna get started without styling.

  • Okay, so the first thing that I'm gonna do here is I'm gonna add a style attributes right there.

  • And this takes a job, script, expression, and then inside of it, you can declare declare on objects and then that you can find yourselves.

  • So the first thing that I'm gonna do is I'm gonna declare and margin bottom, okay?

  • And I'm gonna set it to to ram.

  • Okay, now, next up I'm gonna do is press safe, and I'm gonna give this input a cost.

  • Name of form.

  • Underscore.

  • Underscore.

  • Input.

  • Copy.

  • Thought.

  • And I'm gonna give this puts on a cost name of foam.

  • Underscore.

  • Underscored what's in.

  • Brilliant.

  • Let's just go back to your application now and we can see that the styles are being applied.

  • Okay.

  • Now, for the main styling, we're gonna stay in this recipe, start jazz file.

  • So right now, it's very simple.

  • What?

  • We're going to completely transform this structure right there.

  • So I'm gonna do is I'm actually going to go ahead and put this whole thing out just like that.

  • So stop with the dead.

  • Okay, so this dip is gonna act as a bootstrap container.

  • Okay.

  • And inside of this day, let's just throw in a row, okay?

  • now next up.

  • What we need to do?

  • Well, this is where we're going to throw in our map function.

  • Okay, so to do that, let's just let me just take a look at what I'm doing here because this tutorial is not scripted.

  • So I just really need to be careful with the classes, so I don't mess anything up anyway, So I need to add the boot shop columns.

  • So what would be the best place to do that?

  • Well, this is one individual tive that's being rendered out to the web browser.

  • So that means this would be an ideal place to throw in the bootstrap column class.

  • Okay, so to do that, I'm actually going to put this whole thing out just like that, Create in your class, and I'm gonna cool it.

  • Cole, MD dash for accident.

  • So now let's just go ahead and open up this death and inside of this, Dave less also, throw in an other class name and call that recipe.

  • Underscore underscore box.

  • Brilliant.

  • Okay, let's can't re young.

  • And what do we need to do next?

  • Well, seeing as we are mapping over, we are throwing in this Dave inside of this map function.

  • That means we get we have access to every property that this recipe has.

  • So the first thing that we're gonna do is we're gonna throw in an image tag, and the source is gonna be again.

  • Recipe dot I believe it was image on the score.

  • You are?

  • Oh, and the old waas recipe underscored the recipe Dots, I believe.

  • Itwas title.

  • Yes, it was.

  • Okay, What's next?

  • Well, let's also give this image a cost.

  • So I'm gonna say class name and I'm gonna set it equal Thio recipe underscoring the school books and then it's I m g.

  • Let's just break this attributes down to their own lines.

  • Just so it's a bit more clear.

  • Okay, lets end enda in.

  • Let's get rid of that there.

  • Okay, So what's next?

  • Well, after the image sack, let's just go ahead on and underneath.

  • It's they must act.

  • That's open up a death and cool it recipe underscore.

  • Underscore text.

  • Okay, Inside of there.

  • What would give in?

  • Well, let's open up a Java script expression because this is really going to throw out our recipe title.

  • So unless it's a recipe doctor title okay, And let's wrap this inside of a cage.

  • Five tag.

  • Just so it looks this, it actually looks like a titles.

  • A recipe.

  • Come on on this recipe or title.

  • Okay, let's just take a look at how it's looking like so far.

  • Well, it's a CZ are we see it's not defined.

  • So line number 12 and yet off course is not defined.

  • So press save and go back to the Web browser.

  • Let's just close that for now, and it's pizza search and see what we got back.

  • We'll be arguing in stuff back, but it's not looking very promising at the moment, so let's just go ahead and fix this so the source work.

  • This tag is off course.

  • Just imagine where l So I talked and I m G Anyway, let's take a look at it now.

  • So Pizza said on this is looking much better now.

  • Okay, well, what is next?

  • Well, let's also grab another property from this array.

  • Colds publisher.

  • Okay, this one right there and again, it's complaining about that.

  • Keep rope and rebuild pasta in a moment.

  • In fact, lessons do it right now.

  • So but the most parent Dev is this component right there?

  • So sorry.

  • This did right there.

  • So let's just say the key equals recipe dot title and that should fix it.

  • And while I'm here, let's also give this each of the columns a bit of spacing towards the box.

  • And I'm gonna say style equals and then an object that says margin bottom is Let's just give it to RAM.

  • Okay?

  • Press say so what is next?

  • Well, we were gonna throw in the publisher, sir, to do that.

  • Let's just shall be through in a paragraph tag right there.

  • Yeah, staying inside of this def.

  • Let's just throw in a paragraph tag and give it a class of recipes.

  • Underscore, underscore Tyto.

  • And let's also could be this class and pacing right there.

  • And this should be title, and they should be subtitle.

  • Okay, so let's hope Let's just typing.

  • Probably share said this shows up, and then let's throw that in a span, Zach.

  • So span and then inside of this man, what do we need to do?

  • Well, let's just open up a job, script, expression and type in recipe.

  • Don't pop the show.

  • Okay, So what is next?

  • So we're also gonna add a button which begin, Click and then we get taken to the recipe and we will hook that up using we have about it later on.

  • But for now, let's just go ahead and add it so below this one.

  • This recipe on the score text.

  • Dev, Let's just open up a a button tag.

  • Okay?

  • And cool it for now.

  • Let's just call it the recipe and give it a class of recipe underscore under school, but 10.

  • Brilliant.

  • Now let's go back to our obligation and this should look the way we want it to look.

  • Okay, It's looking promising, for the most part, but I still kind of don't like the way it's looking, So I probably mistyped something, So I think that class name is recipe questions.

  • Actually, it is.

  • And this should be recipe text.

  • That should be recipe That should be recipes box.

  • Okay, My mistake.

  • Okay, let's go back.

  • Thio application again.

  • Brett search.

  • Okay, this is looking good, but again, it's not perfect.

  • And I'm pretty sure that I'm typing out the class names somewhere wrong.

  • So it's a recipe underscore underscore buttons.

  • Actually, a thing I just typed one on school.

  • Right there.

  • So now if I press search, there we go.

  • This is looking much better now.

  • So see, I don't like how some of these boxes are longer in height, and some are small in height.

  • So lessons typing something else Chicken.

  • See?

  • Notice that.

  • You know, when the name gets longer, the box itself gets longer as well.

  • So how did it fix that?

  • Well, let's just make use of something inside of something very handy insight of Java strips.

  • So to do that, we're gonna do this inside of this recipe title.

  • So we're gonna make use of a Java script method called sub String, so it's better to explain it while they do it.

  • So let's just open up.

  • Let's just expand this hate wife tag right there.

  • Let's put that in a separate line and right there, What we're gonna do is we're gonna say if recipes don't tyto, okay?

  • So don't lend.

  • So remember, this is a string and strings in javascript have a property called length, so we can check that if recipe title don't length is smaller than 20.

  • Okay, So we using the tannery a present right there so it kind of works like if else statement.

  • But we can't really use if l statements inside of jet sex.

  • So we're gonna have to make do with the tannery.

  • Operates it.

  • Okay, So if recipe doc title don't length is smaller than 20 then this question mark refers the then calls inside of the if else statement, then what we want to do is we're gonna open up a template string and inside of it, we're just gonna run it out.

  • Recipe.

  • Oops, That's not how it should be.

  • Should be like that.

  • We're gonna run it out.

  • Just the recipe.

  • Don't title as it is.

  • So if that the length off the title is less than 20 correct er's, Then we're just going to rent it out the recipe title, just as it is.

  • Okay, else.

  • So this colon stands for else.

  • So if this condition isn't true, then this is what's going to happen so else.

  • Let's open up a templates ring again.

  • Else.

  • Recipe.

  • Don't try to Not.

  • And this is really gonna make use of this sub string method inside of Java script.

  • Okay, so this essentially takes a couple of arguments.

  • The 1st 1 is where it's going to start, and the 2nd 1 is very want I would string to trim.

  • So if the length of the title is small than 20 characters, that means it can fix inside of just one box.

  • If it's greater than 20 correct Er's, which this one is.

  • What we can do is we can cut it down to just 25 characters.

  • So to do that, we need to start with the first index stuff.

  • So the first letter, which is right there, and the index off that 00 and then we just want to trim it down to 25 characters.

  • So this is what the second argument is going to be.

  • Okay, so once it's been done, once the character has been trimmed, let's also give the user some kind of feedback that this string is longer than its superior and got to be.

  • So to do that lessons type in three dots right there.

  • Okay, go back to the bad browser again, search for chicken research, and now we can see that the titles that are longer than 20 characters have this kind of a nice you know, treat ellipses, showing up right there.

  • And the those titles that are smaller than 20 characters, they're just showing in the full length.

  • And this is exactly what we wanted to do.

  • Okay, so let's continue.

  • Okay, so now we're gonna add react router to our obligation.

  • More specifically, we're gonna make this view, recipe, butts and work.

  • Okay, So to do that, we're obviously gonna need react router.

  • And I didn't tell you earlier that I already have installs the reactor water packet.

  • So which lives?

  • Right there?

  • Okay, so what we gonna do for that is we're gonna create a new component inside of this components boulder, and we're gonna call it rata da Jess.

  • And this component is ultimately going to replace this up component which lives which current lives inside of this index suggest while And this is what we're going to render out to the web browser.

  • Okay, So what do we actually need inside of this rotter components?

  • Well, obviously we need react, so import react from react, and we're also gonna grab a bunch of named exports from this reactor rods don't package.

  • So we're gonna grab, in fact, let's just say imports and then react about dumb and then begin type in the property.

  • So we need browser out, sir, when it switched.

  • And we also need what he needs route.

  • Okay, If you are new to react router, then I highly recommend you first learn about Rhea counter, and I do have a video for that on my channel.

  • So go check that out.

  • It will give you a basic idea off react router and how it works.

  • Okay, so now you may notice that this new update in Ria's code, it basically doesn't give you any highlighting unless you use the variables that you are using in your application.

  • So let's say that this react it's no highlighted is usually in colors.

  • And the reason it's appearing this dim is because we haven't used it yet.

  • So this is a nice way of V s code, you know, tell you that this is the stuff that you haven't used yet.

  • So use it.

  • Okay, So now if I just create a new component and I'm gonna call it a router and I'm gonna set it to a stateless, functional components on, let's just make it return some Jess X.

  • S

Hello, everyone.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

React教程中的API--使用React Router的菜單應用。 (APIs in React Tutorial - Recipe App using React Router)

  • 1 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字