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.