I So this is the application.

We're gonna be career and essentially lords in a canoe.

Stories one by one.

This 500 in the FBI, the FBI will return is a list of story ideas.

And then we're gonna call another epi.

I root that will give us the stories we're gonna be looking at Infinite scroll in this.

So weaken continuously scroll down.

And each time it is that we're gonna hit the FBI again for another 20 or 30 stories and then what?

We're gonna be looking eyes.

We got the testing.

This we've really testing library.

We're gonna be using style components.

Not too extensively, But we're gonna be using them just to show you how to get started with them on gonna be looking at things like memo and react.

So we're not having to recall well, rear ender the component each time.

Ah, on each particular term.

Scroll.

So, in terms of this tutorial, and you know what exposure to react, you have to have ID said that, um, you could come in This from a beginner standpoint.

And if you have a little bit of javascript experience and you have the ability and knowledge shoe call MP eyes, you will follow this tutorial on do quite well.

I don't believe there's many necessary over aspects that you're gonna have to need.

Essentially, all this is is going off one component, which is a story, and then we're gonna have a container for the entire of the stories.

So let's begin.

Ah, we're gonna start by just creating a create react up with hacking used tucks.

So I'm gonna take this one a bit slower than my last one, which was to do this one even know that was a seven hour editorial.

But this one's gonna be folks on more of the beginner aspects of react, even though we are gonna be throwing stuff in there like memo.

So if we discredit, react up and that will take a few seconds.

You were using MPX here.

I basically just grabbed this off the get up off, create react up.

So if you run this line right here, we'll get a reactor ready to go.

Then we can start modifying it and playing around.

I didn't components in the only aspects that may get into the intermediate aspect off JavaScript and and all on all that good stuff is the infinite scroll.

But I wouldn't worry too much about up.

Let's focus mainly on reactor.

Um, so that should be done now.

So if we do, I'll see the into this and it was hacking, used tipped.

No way.

I'll open up.

And if you want to do this, you can go into B s card.

And I think if you go to the set in self think it's command shift P and then type puff and it should I curtsy a puff.

So here we are.

That's good, um, less up in this.

We'll start by doing a quick cleanup.

So generally what I do each time I get one of these I going here, We don't need the manifest.

Um, actually, we can probably leave the manifest in next.

Gonna be looking at stuff like service workers, and I'll explain those down the line.

I don't need a description.

Ah, adieu.

Let's just say the description.

Let me make this biggest.

We can see this hopefully thus a bit better and well, sir, here, we'll just put in some content.

So when you're searching Google, this description is in the little description Descriptive box.

But like the title.

So, sir, bringing you the finest news since 2019.

Uh, Taliqan don't need cream color while keeping now keep the description up or touch.

That's just the log off the apple tojoin con if you wanna make an application.

Well, changes to news reader and my fault process with this particular application is we're gonna create it now, in the aspects of you know, the beginner showing your heart again re into react, giving you some national tips here in there like memo star compartments testing.

So you should get on your feet with react through this tutorial than the next one.

We're going to consolidate a bunch of FBI's so we'll get hacking use.

Well, maybe we'll get some stuff from the BBC or protect websites.

Ah, and then we're gonna do We're gonna use gravity well on the back end or just say as middleware.

To call some service is the service is being FBI roots and consolidate us and give us those new stories back to the front end.

So that should be really nice to do.

And that's where we'll get into a bit more.

The intermediate aspect off reality on graffiti.

Well, Andi, we're gonna be right in all our resolve is and everything else, um, without using anything like Prisma.

So we just got rid of those so we can stop by doing a bit clean up in here.

So generally, as if you followed my editorials in the past, you know that All come in here and Ah all.

Like how?

The majority of stuff.

So we'll just set expert const.

Bring the into a narrow function.

Um, and then down here will just Ah, we don't need the return.

We can just get rid of that.

Said hello.

We don't need to default.

Expert here.

This will go on in line.

Expert here, that should give us something to play with.

Um, let's get rid off index dot C.

S s.

We don't need the Logan number and we're also here.

We can turn on the service worker.

Don't worry too much about this at the moment, but we'll tow.

I'll explain service workers, as we, uh, gets it a particular point.

Remove this, um, and why I generally like to do I just instead of calling react on here directly, I like to just remove that and just said, Give me render and then we can get rid of it seemed as though this is no longer a default import.

We need to change this, because if you remember it here, we're now using named expert.

So we need to use an named import here.

Service workers find their one thing we have to do to turn the linzer on going to your package doc gs on.

And I generally just removed the S Lincoln fixed.

I'd like to run the Airbnb one.

So if you see is now running gives us serve.

Um, going here.

Just out a equals from it.

That Yeah, if you want to register, delete that comment.

Open up The sidebar.

I said no.

Ah, let's have a look.

Do we need to test?

Not right now.

We contest up somewhere else.

Um, closed on public.

We've got up dot CSS.

I don't need that Eva abusing style components.

And there we are.

We've got cleans up on dhe.

Next.

What?

We're gonna do Well stuck right in the scuffled in so things like the folders.

And this is a really important part of software development.

I want you to get in the into the routine of creating these folders where you have separations off concerns.

So you have components, folder, containers, folder, hooks, folder, selectors, mappers.

All this stuff that transforms your dear and keeps it separate so it can live by itself.

Um, so I'll show you that right now.

Okay, So one thing of just up now is, um Well, what want to do?

Let's just begin and start this and just make sure we've got something coming out.

Generally, you may see this issue where it's, like, tell you telling you about skip preflight check there is.

So if you do see that issue, go ahead in here.

Um, just correcting you file put line now and then if we go ahead on and restart that, we should to get application.

Stein.

Let's see.

Come on, there we go.

Perfect.

So let's begin by doing scuffled in for the up.

So let's do components, which is a folder or just helps all components.

We will then have constants and generally this stuff easy in most large applications because you want separation of concerns.

Stuff can live by itself.

Hooks.

We're gonna need a service is followed up, but the FBI calls a stalls folder for our styles Utilities folder, which would basically just house stuffed up is kind of miscellaneous.

Ah, mapas selectors on DDE.

That should be it for now, even only content as Stuart content in this folder, so that should be good.

So let's begin.

Like, what do we need?

Thio, you know, start hitting the FBI.

Well, let's have a look.

So get hope on, then.

What we want to look for is the heart can use FBI.

So this is a hockey news, FBI.

It just gives you myself a look.

These this is happy news, and we just got a call in the FBI, and they've got this FBI here.

Um, we have to worry about all this particular stuff right now on DA.

If we click on one of these, you can see that returns to some Jess in there with, like, the title of the story of the girl.

But like I said, we have to worry about right this moment.

What we want to worry about.

Here is this new top and best stories.

So up to 500 top of new stories are available, but top stories News, News stories on dhe best stories.

We're going to be one in to hit the new stories, So we need some sort of service that can hit this new stories.

So as we can see, it returns ideas and these ideas of story ideas.

And what we want to do without these ideas is get them back and it's gonna give us 500.

So we're gonna be a bit careful in terms of how we're gonna manage these FBI calls.

But what we want to do is we're gonna get these 500 buck, and we want to render 20 offer of them per scroll.

So to begin with, we're gonna get the 500 stories from the FBI, Which is this?

So this is a You are all gonna be calling with Oxy aas on.

Then.

Say we got this one here to nine or 662655 We want to go ahead and it says, for example, a story lives here.

So if we change this item two.

Yes, you are.

L you'll get all this there, and that's pretty much all we're gonna be doing.

So we're going to do to FBI calls.

Well, two routes.

We got the crane to service content roots.

I was going to call in this FBI father stories because we only need to call this one the set piece I wrote once because we only need all the new story ideas, this case, It's top stories.

But you can do that new stories and with all the ideas and make FBI calls to with these ideas to get the story so that yet I was pretty much it.

Really, Um, I guess what we need to do next is ah, have a look when you create new tub in here bigger and what's gonna do young art Axios.

And actually, Rossi is a nice little package.

It's not react specific, but it's a nice package that allows us to do FBI calls.

And essentially, it's just what fetches doing.

But people seem to prefer it.

I like the package.

You can have a look.

Just do get Herb.

Actually, Austin, it's tons of youthful methods in there, so no oxy else we can actually start making calls.

So if we go back in here you mentioned the service's followed earlier.

Let's clarify owns.

Call it Hit Chan for hacking.

Use FBI dot jessen with jayson dot Js and we'll import Axios from outsells And then we'll do We want to create some sort of base.

You are all that.

We're gonna be him.

So if we do expert Constant be ashore all Let's leave.

I'm deaf in l and then we're gonna do expert const new stories.

You are alone.

Ah, let's put that to an r and then we're gonna do We're going to export Khan's story.

You're all and we'll build these up.

So, for example, I'm gonna make these into attempt template strings.

Um, we want to include the best.

You're all here.

So they're sure Earl.

And then what?

I imagine that one will be is new stories so you could switch you.

So if you if you wanted to do not be a jessen on dhe pretty much seven at best, you are all And when I say I am slush.

So let's go get the best oral.

So the Bish Worrell is this here right up to there and see, I've got item there that corresponds with this one here so far, this person here now, this is so in the story.

You Earl is saying this particular shrink lives in here and then item likewise with this one.

So now we can start crying a function that will get me a story.

So let's test this.

So actually, you know what?

Let's get this story or story.

Girl's first or story i d.

S so export cons because we're gonna be using this for our application.

So we want to import.

So So get story ideas and that name is perfect.

Something like that is exactly what you want.

And this is making some sort of side effect.

So when you think of stuff like image processing So if your aunt's where you're blood an image on a first book and you can crop the photos, it's quite heavy.

Likewise with network calls, which is what we're doing here and likewise with accessing the file system, it's going to block, say, the rendering of the u I.

So we have to use air sink here and by saying air sink, we're gonna shove it onto something called the Micro Tusk.

Q.

I don't wanna get too deep into exactly what the microchip ask you is right now, but I'll tell you how it works when we call this.

So if we do constant result and we're gonna say with this response from Oxy else and we're gonna this is gonna be a get if you look.

Actually, I should go all these different methods so you can help delete get a shit big past patch put requests.

So there's all these methods, but we're gonna use again.

We're going to go get me that there new stories, you, Earl.

And what we're gonna say then, is once you've gone and got me this, then get me the day I was gonna call this day.

And once you have that day, just return it.