Placeholder Image

Subtitles section Play video

  • Hello and welcome to this reactor tutorial where we're gonna be looking at creating in a application that calls the Hawk unused epi.

  • 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.

  • Um, we don't need this, actually, So I just said Okay, now you've got their past me return me that there return result.

  • And if I just go ahead now going toe up, let's stop bring you some things in here so we can test it.

  • So, um yet Sorry.

  • No up.

  • Let's close that down.

  • Open this up.

  • Actually, you know what we contest?

  • What?

  • Contest this directly enough.

  • It would give us a good understanding of why we don't want, You know, we just want up to call one content and they're all one component, and then go do all the business that you have to do in that particular file.

  • But right now, let's just call in here.

  • So, sir, return Hello.

  • But in here, we want to use something from react called use effects.

  • In addition, we also won't use Stet.

  • So if I know just saying here, um when this application gets mounted to the purge as you can see what's on the pitch, we want to call the FBI immediately.

  • But we don't wanna be blocking the U.

  • S.

  • So we still want it.

  • We're still in the u I to be interactive.

  • So what we're going to do to me to get that issue is we're gonna hold something in a value.

  • So we're going to say you stare if you don't come across hooks in react gesture.

  • Let's just say we want the story ideas to be stored in this variable here, so story ideas.

  • And if I ever want to change story ideas.

  • I'm gonna have to use this one here.

  • So set story ideas.

  • So you've got value and you've got setter, which is essentially function that you can pass, Dad.

  • And we know this is coming buck, as in a rare because if I hit Ah, this here there's an example.

  • Here, you see the your air.

  • But just for some Sunday, let's have a look today while you gonorrhea.

  • So I was going to sell care nothing comes back or initialize this particular variable here story ideas.

  • Soon as you this lords, I want you to sign an empty read to it.

  • So, for example, if we don't have the debt and we start looping over that and it's not Honoria, we're going to get some sort of error.

  • We don't want that.

  • So we're just gonna say, give me initialize that particular bit up there waving anti era.

  • So just to recap, we have a variable here that's gonna be initialized too, The empty rare.

  • And if we're gonna changes, we just call set story ideas.

  • So this is where the magic comes in now.

  • So we've done the the work in this hacker news, FBI.

  • We've got this.

  • We're making a call out to the happy news FBI.

  • We're using axial us.

  • So we want to call this in here, and we can see that in the end.

  • Expert So enoughto use a named import to grab this from the hockey news.

  • FBI.

  • So let's go ahead and said and I'll say, um, what did I call this?

  • Get story ideas.

  • And we know we're gonna have to go outside the folder, and we're gonna say Go get me.

  • Ah, Service is, uh, just, uh, service is, um, Hitch and FBI save up.

  • Ah.

  • Then we're gonna say use effects.

  • Okay, so this is where the big one comes in.

  • What exactly is use effect?

  • We've looked at you steer where install values.

  • So, like, this is started thio this initial arrest to begin with.

  • But if somewhere in my render or somewhere in this year's effect, I want to update this value story ideas, I can call this and, sir, um, set story ideas.

  • Hola.

  • So there we are.

  • That will now be hella hoops.

  • So let's just see what happens.

  • Yes, if I log out.

  • Hello.

  • So if you wanna call story ideas, you could just say story ideas.

  • Let's see what happens here.

  • Cannot resolve, can use module.

  • Let's talk about what's going on.

  • Service's how can use FBI.

  • Ah, let's see.

  • Service's get story ideas to spell it right?

  • I did.

  • That seems right.

  • So let's have a look what's going on?

  • And this is what you're gonna be running into.

  • So if you are a new program and you think these tutorials always go final, you see people programming, Um, just give it to that second.

  • And you think, you know, how can they get through that so easily?

  • It's never the cast.

  • Stuff always goes wrong, and I think it's best to keep some.

  • What of it in tutorial.

  • So set story ideas, too.

  • Hello.

  • So there we are.

  • We got hello there.

  • Oh, yeah.

  • So what happens if I wanted to change this?

  • So if I just get rid of this and I'll still you know Ah, print it all.

  • What do you think that's gonna be?

  • It's just gonna be an empty your air.

  • And you can someone like string if I this And now we are sometimes era, so that allows herself some sanity check.

  • So if I just bring back in import, get story ideas from service is how can use FBI and then say, for example, um, I want to call this method now that we've put together we've done all the work in here.

  • I was gonna call this now so I can just simply because it's a bit is being employed up here.

  • I could just say get story ideas like sir, but what we gotta do Oops.

  • Putting nightside Thea Well, what's that?

  • Well, that is just yet, but I'll tell you in a second, let's have a look.

  • Bubble Lord cannot find service's can't Results Service's Let's take a look.

  • So we've run into the same error as before, so I'm thinking that is, Well, it's not very descriptive, is it?

  • So where you're doing export.

  • Constant get story ideas return result and we're getting that from the hockey news FBI.

  • So module not found cannot resolve.

  • And how can use tuts.

  • So even though it's coming through here and it's all looking fine, the modules fine.

  • So I don't know if this is a case of let me restart this start in.

  • It's taking its time.

  • That's fine.

  • So it works.

  • I don't know what the issue was there, so Yeah, we've got the story I d s.

  • And if I let me lock this out, Um, so I want to make a few important notes about what's going on.

  • They're so you see, he says promise.

  • But, you know, I thought it was returning me My data.

  • You see, the status is resolved, the value, and we've got a bunch of dead assigned there from the FBI says 500 ideas and aging.

  • See there.

  • But why's the Hopman?

  • Well, you see how we've stopped this air stink on here.

  • So any function that you stick in Essen can't will always return a promise.

  • So now what we have to do, we have to go back up dot Js.

  • And, sir, we can't just call this directly that, like we just did then, like a regular function.

  • We have said, Okay, once the debt is there.

  • You see, I was giving me these options.

  • So it's saying a touches coal box for the resolution and or rejection of the promise.

  • So I'm going, Okay.

  • Go get me those ID's and then return me the result, which will be a promise with the dare held in there.

  • And we have to resolve that promise so we can say and to result that we can just said then and by saying then on this particular return promise here because it's a synchronous, remember, it's asynchronous and the big no is like I just mentioned.

  • It always returns a promise.

  • So you say Get story ideas.

  • Don't.

  • Then we got set.

  • Okay, give me the day and this could be anything I could say lemons.

  • So once you helped the lemons go ahead on dhe set story ID's on by calling set story ideas here, we're gonna replace this empty initialized, a rare with our 500 story ideas.

  • How cool is out.

  • So let's take a look.

  • Set story ideas with lemons like a set.

  • You can call anything or change, obviously.

  • But, you know, born what's going on here?

  • Object.

  • Not great.

  • That's perfect.

  • So when you do see this, objects are not valid as react.

  • Children.

  • We know it's well.

  • I know it's words, and I'll show you why in a second and why that happens because you have to get used to reading these errors born.

  • You see that.

  • So you initialize it.

  • You initialize it quick.

  • It's an empty your ear, and then it returns.

  • You all this there?

  • But you have some issues here, right?

  • So this is saying, is giving me all the dirt about from access and I don't want no.

  • So let me go back and say Guess so we've got on Well, what we got here.

  • We've got our lemons.

  • So we're getting the story ideas.

  • And we're saying dot then now it's saying, Ah, well, sir, here, So on fulfills once you have the lemons, you know you can return the lemons if, if you like.

  • But what?

  • I actually want to do it.

  • You know, I know that the lemons are gonna be there, so it could just remove that.

  • So I'm gonna say, Get me the story.

  • I d s over here.

  • I'm gonna call this.

  • I know it's a seeing contest.

  • Picks up price increase their Thus, being asynchronous is gonna always reserve me a promise.

  • And then there you have promised value, which will be holding your data because we did it here.

  • We got the returned it.

  • Once this is done, go back.

  • So we're aware in this context here.

  • So it's, um, gonna wear this response.

  • Then it's gonna pop it into results Onda, and then we call it.

  • Then we're gonna set dot Lane, give me the lemons.

  • Set the story.

  • Ideas.

  • Two lemons.

  • Ah, let's have a look.

  • What's going on here?

  • So, uh, we get all this dead buck, so let me just take a quick look at this.

  • Um, you can inspect it.

  • So you've got all these story ideas.

  • As you can see, we've got 500 they all we also get returned The response and a few other things from the hockey news, FBI.

  • Like I said, we don't want knows.

  • Best of what we want is a clean a cleaner air.

  • So where some look?

  • So we got the results were awaiting the result.

  • Actually.

  • Start get new story or l.

  • Then there, there.

  • So I don't know if you can see the error.

  • Here was not particular era, but it's kind of a cleanup actually.

  • Has reached returning me something called there, or I'm assigning it to dare, um, or in this guest actually is returning me.

  • Dare I say See there?

  • Well, I only want the dare.

  • I don't want all this other stuff feel like the content type headers.

  • None of that.

  • None of that nonsense.

  • So where to do this is I know that's called there because I just saw it in the council.

  • And I wantto structure that out on a nice, easy clean.

  • Where to do this.

  • Open up.

  • One of these one of these curly braces.

  • I always forget the name.

  • Then another kill aggress offshoot of Sam Brockie.

  • Open up the bracket.

  • Give Kelly breasts.

  • Um, And then, you know, best of all, what crate is this?

  • And what that saying is the structure me out better?

  • I only want better as in that particular value as you see now, nice and clean.

  • And if you look into the the dentals, all you have going here is just all the 500 top stories ideas.

  • And if you call one of these, you'll get the article, not the Arco itself.

  • But you get like the title, the link, all that good stuff.

  • So let's go back.

  • So now we got lemons and I'm showing you can call anything.

  • Let's replace that.

  • We get just so someone don't come.

  • Anything all right.

  • You know, some guy here is getting some lemons from a hockey news FBI, which is a bit strange.

  • Um, so I want to just take a quick a quick look.

  • Now use effect on we'll start, basically will start re factor in this point into its own container crisis is far too hope.

  • The far too high up the reactor Rito doing all this rear ender.

  • And if you leave something in up that has access or it's re rendering components down the line, you don't be rear enduring.

  • 500 components are all the complaints below, so we're gonna put into something else.

  • But now we've used effect.

  • You'll know if you've got this use effect function here, return well saying, Okay, I've got an anonymous function and go ahead and do this.

  • And people may be asking, Oh, why haven't you got anything stuck on here?

  • Because, you know, this is, you know, it's a network called Well, there's no reason to use a nesting here because what we're doing here is this is returning me a promise.

  • So it's still solemn.

  • This little Q called the Micro task you.

  • And once I resolved that it's gonna get popped off that Q and get whipped around the event.

  • Lupin Self care.

  • Put me back in s.

  • There's no need to see it sticking their sink on there.

  • Hopefully that makes sense.

  • Because we've already done the air.

  • Think.

  • Here we get returned to promise.

  • All we've gotta do then is just resolve it on.

  • That's what we've done there.

  • You can obviously put other stuff on there.

  • Like catch.

  • It could run.

  • Listen, to try capture, you could put an error on there, whatever it may be.

  • But we're just using.

  • Then we're just saying resolve this.

  • Give me the day.

  • Once there is here, I'm gonna set it and not say it.

  • We totally don't.

  • Were you?

  • That's it.

  • We're done.

  • But let's go back to this year, sir, What is this?

  • Empty your essential in the shoes effect.

  • Like what?

  • Why is it just stuck around here?

  • Why can't you just be like this?

  • Well, this is a life cycle.

  • If you were prior to you know, hooks using record prior to hooks, you'll know that you had life cycle methods in reacts and basically what this is saying.

  • It's saying Elka Ah, when the component mounts do this.

  • Ah, if I put in the, um let's say, for example, we had the variables like story ideas of dead and it just best it was true or false.

  • We could keep a watch on this so I could put story ideas, update in here, and basically used effect will watch for this to change.

  • So if I passed, maybe a set time also set time out, which I'd never do.

  • But if I every 10 seconds, even though this is never accurate in terms of the reading off the seconds, it's best saying, Do this for a minimum off that I'm not a seconds.

  • So if you have two files and milliseconds it saying, do this for a minimum of 2000 milliseconds.

  • But let's say, for example, in here every 2000 milliseconds, I, you know, did story ideas of their lady court True.

  • Um and then I eventually kept switching between true and false issues.

  • Effect will see that, and then it will be like Okay, well, this story I d s updated has changed.

  • I need to re run this again when it reruns that it would do rear ender and, you know, potentially could have new story ideas so we could get new stories so I could have a live feed of new stories.

  • So all that does is with an empty or it's just going to run just the ones that stick something in there.

  • Um, it's gonna watch that particular variable.

  • And if they're variable changes, is gonna rear ender so you can run into an infinite loop here.

  • If you're not careful, I'll show you why.

  • So Ah, what else?

  • This is happening.

  • I just ah ah Use effect here.

  • Let's just watch how it works.

  • You know, if you wantto learn, react just, ah, any language?

  • Well, jobs, jobs to work nearly.

  • I don't want your console that logs in there and just see what's going on in the depths.

  • ALS.

  • Ah, so let's have a look, Consul.

  • Don't look.

  • Used effect.

  • You see, you just run the once.

  • Great, right.

  • Okay, Now let's run into an infinite loop because we love infinite loops.

  • So I'm gonna stick story ideas in there.

  • So this is going to run, and it's gonna be like, Ok, well, I'm going to set the story ideas with get oops I'm going to set the story.

  • Ideas were there, and this is watching story ideas.

  • So it's like, OK, well, story ideas have just changed.

  • I need to re render this.

  • And when he gets here again, it's gonna rear ender.

  • What's going to set the story?

  • Ideas?

  • One's more appear, and then this is gonna go well, story ideas have changed again.

  • I need to redo redo this function and just keep going around around around, because once this is resolved, we kind of basically set the story ideas.

  • The EU's effect is watching the story ideas, and it's gonna come back in here.

  • Keep rear ended and we'll show it.

  • Ah, aircraft, my tub doing this, but very well.

  • Look at that.

  • It's going crazy.

  • 25 just re rendering a fink.

  • Khuram should have stopped.

  • It doesn't.

  • I think five Fox does the, um, something said about how I'm gonna my lumps on their cell fire.

  • Um oh, yeah.

  • Perfect.

  • Put back to normal, yes or no?

  • If not loops there.

  • But yeah, that's how use effect works.

  • There's another Where to, uh, Well, we're looking at Let us so we'll be looking at cleanup and clean up basically, is when you want to just clean up anything.

  • Some self subscription are something like a layout effects.

  • So if you're messing with the layout like a call in a stroller, you don't wanna be re rendering all the time.

  • And it causes implications to that.

  • But I'll explain while.

  • But now, now we've got the, ah story ideas.

  • I want to re fact to this out and say, OK, give me a concern.

  • Er and I'm gonna call this concert.

  • It's not a new folder.

  • I want to call this concern.

  • Er, um, What we're gonna call it?

  • Well, let's just let's just do employees in English.

  • It's a story's content, but just two storeys container.

  • Um, I think I think that's a simple as you can get without, to be honest.

  • Ah, so let's grab this off here.

  • Stories we're gonna need reacts.

  • Um, I've got to go up.

  • One more for that and we're gonna need We've got basically need That's all right.

  • So if I just put this right back to normal um, Come on, you can do this Earth.

  • Oops.

  • Oh, yeah.

  • Looks good too.

  • May we just bring that in hoops?

  • Just bring it on there.

  • That looks good.

  • Rename this.

  • Ah, in here.

  • Thio Story's content stories.

  • Container.

  • Um, string, if I looks good.

  • Ah, And then you know what?

  • I'm gonna render our story container stories.

  • Con Turner.

  • And where did we put it?

  • Where we put in containers.

  • Um, it's next to it.

  • Let's go.

  • Stories.

  • Container soon is that this is a component.

  • You know what?

  • Render that component.

  • There we are.

  • Perfect.

  • Nice re factor.

  • Um, so now we have a hour story stories concerning we've got all the ideas.

  • What we need to do now is career.

  • Um Well, essentially, we want to be able to pass, and I d up to the hacker news FBI, and we're gonna be doing in here.

  • So let's do export Constant instead of get story ideas.

  • Let's go said get story.

  • And this is an s synchronous function that text in a story idea, and then we're gonna say constant result pretty much the same as before.

  • A wit access don't get and we're gonna give it a template string.

  • I'm gonna say story U R l which is this year.

  • So we're gonna sell.

  • Okay, give me this and then just I am front on the end, which is good.

  • Ah, and then we're gonna set.

  • Plus, actually not Plus, I'm living in the old world.

  • A job script.

  • Um, let's just actually could do plus story idea.

  • There's other ways to do it.

  • Template strings.

  • But was that we do that from now on, said Doc Jessen.

  • And then, of course, we have to resolve this.

  • So it's too dark then And you can see all the the intel I sense is telling me you're gonna have to a result.

  • This will do the same mystery before Lester structure dare off there.

  • And once we got that, there were going to say, Give me the dare return the death.

  • So we're doing.

  • And you know what?

  • We need to return this result, because now this is a promise that gets returned.

  • We're gonna have to, you know, let's just, um what we've got here is gonna get stars.

  • Um What say you did It did that we could actually just do Well, sir, if stories ideas on dhe story ideas is ah dot length is greater than zero.

  • Because firstly, it's not gonna be there.

  • I shall let me just show the implications of passing an idea right up the Let's grab this one.

  • Um, what do we expect it to be?

  • Let's switch out the I d.

  • So expected to bay.

  • I don't know what that is.

  • Um, but anyways, was possibly Saidi s.

  • Oh, yeah, we're passionately side d.

  • We could just actually passed it down like that.

  • And now let's resolve it.

  • Onda was council dot log.

  • Uh, that was good to may.

  • Boom.

  • There is There is the story.

  • And you see much is up with this.

  • Perfect.

  • So we know that works, which is great.

  • So we're best that we just built a service in here that can call him the heart can use FBI, and that's all it is.

  • That's all that is for the FBI.

  • Ah, so pretty simple, Right?

  • Really nice.

  • We can get there from elsewhere, and we obviously have to build on top of this.

  • Ah, at some point in time, we're gonna have to build ah story.

  • So let's take a look.

  • Now what else we can start working on.

  • We've got our story ideas and we've also got our stories.

  • Well, we can get a story, which is that which is really good.

  • So let's go ahead on DDE quickly.

  • Take a look.

  • So if we just hold back, um, summer, Look, we've got the story i D's.

  • So let me see here.

  • Um, I guess what we want to do from this point.

  • Ah, see, um, we want stop building out the well the ups gone.

  • So components, let's create a story dot Js component.

  • And here in port react on Ben.

  • Let's go ahead on dhe do expert const story.

  • No, also on, so see, we gotta return if we just don't something in here.

  • Actually, it's pulling.

  • Um, used thio use effect.

  • See on then we'll do the standard stuff used.

  • In fact, we know how that works.

  • Now, uh, what we do want is we want, uh, get story, and then I get story we want to get from service's and hacking years, FBI.

  • Um, let's see.

  • So story returns, and we're just I am a story.

  • Look at this.

  • That story con Turner.

  • So in story concern that what we're gonna be doing is gonna be looping over these stories.

  • So we've got 500.

  • Um, so let's just ah loop over these and we'll do.

  • Ah, let's just ah story RGs don't come up.

  • What's there for each story?

  • I d.

  • So when we mop another, it's gonna give us a story idea again.

  • This could be anything.

  • This could be the lemon, a piece of wire It maybe, But let's just call it story idea except make sense.

  • And then we'll say, Give me motion would give me Give me a story component.

  • It was important up, and that's a story.

  • So it's a component Andi story component and that lives in components.

  • And we're importing this as a named in part because we exploit as a named experts we have to do is unnamed impart So it's have a look here.

  • So they what's past story ideas?

  • A prop.

  • So for every story component, I guess rendered on the pitch, we're gonna pass the story I d And this is one of those Look, I'm story on the story.

  • An historic cool.

  • But what this story idea is gonna be if we just serve this and go back and puss this in here Weaken, say story idea.

  • Let's just have a look What?

  • That story ideas there we are perfect.

  • So get a story idea.

  • That means we can now use that story.

  • I d to make a call over to the heart can use FBI again to get the story information, buck.

  • And if you're coming from two traditional backgrounds where you've got parameters and, well arguments so you can pass an argument into story, you would probably see something like this.

  • But seeing as though this is no function well, in some ways it's a functional component, which actually is, but we cannot use the parameter as such.

  • We have toe the structure of the hour, like so by giving Kelly brackets.

  • And the reason for this is ah in react.

  • And so I said, Look, so get story ideas here.

  • Story ideas come through.

  • Um, let's see well coming through.

  • Ah, yes, The story idea is Justin don't string.

  • If I did, I crush it because that's rendering our 500 compartments objects and our bodies react.

  • Children object with key store i d.

  • There we are.

  • So I got a story ideas, but let's say, for example, sick.

  • Will you just call his props and we don't the structure Anything off there?

  • I'll just remove this.

  • Andi will do console dot Log not considered.

  • Lug I wanna be able to see on the period shall just strange if I props, let's take a look their way I see here.

  • So basically all we're doing is just too structuring out story idea which will give us this.

  • So it's put up back to normal and you'll see that pattern everywhere in reality, is basically serve you from having to prop stop story i d which is Ah, quite long windows on dhe story I d.

  • So now what we want to do is we want to make a call and seen as though we've already built this gets story, we're just gonna pretty much follow the same method Well done here where we're doing and get story ideas and then place into story ideas.

  • But instead we're gonna say you step and within you state what we're gonna do.

  • We're gonna call this story.

  • Dude, that was Mama you step story set story and the initial story.

  • We're just going to say it's an empty objects, so we can all use effect.

  • You can come down here and we can say, Get the story from in here, which will be this and then we can pass it.

  • The story i d which is basically just this problem gets passed down and we'll resolve this year synchronous function and said, uh and sometimes on this FBI, I've seen that the dot com with ur els.

  • So I'm just going to say OK, once we've got that, uh, what is being resolved?

  • And, you know, you've got the deer in here.

  • I'm not just going to return it.

  • I'm going to say I'm done to make sure that we have a dead girl and if we do have a debt that you are all set story to dare, and that's pretty much it and you don't have to watch for a story idea.

  • Changing said this case was going to disable that, yes, late rule, because the fact of the matter is, here is this'll story I d even even know it's ah, it's kind of component best where we only need it once.

  • We'll need the story idea once, and that's pretty much it.

  • We don't expect it to change.

  • Maybe if those comments on there, but in this case is not.

  • But if this comments on there, we could watch for comments.

  • Change in, and then we'll recall the f B i t o bit comments, for example, but in this case, we don't.

  • So we're not gonna watch for anything.

  • We're just gonna say soon is this component mounts do this, Which gets a story on with passage store I d.

  • Then I guess, resolves the function gives us there, and then we're gonna do a check for the girl and then if all is good at that point, set the story.

  • Um, so, no, let's have a look.

  • So we should have a story.

  • So it's just jessen dot dot stratify story and what were there immediately.

  • Let's take a look.

  • It will be there immediately.

  • But there you see them loaded in perfects.

  • We've got an empty one here which we can resolve letter by just making sure that we fill our empty ones.

  • Enough one there.

  • We see how the stories come in and there's quite a lot of them.

  • There we go.

  • Perfect.

  • So now we've jumped back in here.

  • We can start just building up this component so we can just say if there's a story, so this will get rid of that.

  • You know, empty object.

  • Well, this bit will I'm story that you are ill.

  • Then go ahead and just get a p talking.

  • Just that story dog story doc title and we want to execute.

  • This is JavaScript.

  • I don't just want to get some Pitak.

  • So that's why I was wrapping in these killer breasts story, Doc Title will put this actually in hit rough because we want the girl.

  • So it's a story that you're ill.

  • And then from here on out, we else do.

  • We have, um we have storied up by, um, so when set by.

  • Ah, it was a story that time.

  • Come on, fix that.

  • Let post it when we just said I got posted time.

  • Um, I don't believe we have much more, so we can just take a look about right now.

  • Um, let's see.

  • Save often done wrong.

  • Oh, always have to return something in the render.

  • So even in this kiss, I've discovered 10.

  • No, which is fine, except by yeah, they're well, although there and that's what we was looking for.

  • That so simple is to make the FBI calls, and we get this complaint in here.

  • So each child in a less must have a unique key props so we can fix up that going into story dot concerned because that's where it's coming from.

  • Stories, content, grab this story ideas we know that's never gonna change.

  • This is how you react checks for debts as well, to see what should be updated and in what particular position.

  • So if you look at reconciliation with him, react.

  • That's passed on the react documentation about how reconsideration works on why the key prop is very valuable.

  • So if this is changing, don't put it in the key.

  • So if you're using something like math, not random, it's ah, it's above thing to use because when it's looking for changes, it's like, Oh, the story ideas change, even know.

  • Probably the component there hasn't, but it will re re fetch all the stuff in there.

  • And the positioning, for example, on a list could be wrong but never lasted.

  • On a digress into that, just have a look as to how that works, So we've got all the stories now there's no no one's, which is good.

  • We don't need to get story in here the story container.

  • Um, let's have a look where we're at now.

  • We don't have any hooks.

  • Mappers.

  • One thing I do want to career is ah, somethingto handle what comes back from the FBI.

  • So if we just take a quick look as to what's gain?

  • So I was to remove this quickly for one second.

  • Um, actually removal.

  • That's no, no, Giessen don't string if I on Wilson story.

  • Since that no sums Logan. 00:52:50

Hello and welcome to this reactor tutorial where we're gonna be looking at creating in a application that calls the Hawk unused epi.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it