Intro to React.js | JavaScript JOB READY Free Course (2025)

Last time we were talking about we're going to do a small exercise with the random users API and make a list of cards for React. And basically this is just to kind of get like used to doing react and then we're going to make the directories. I put a complete folder in here to kind of like put how we're going to put the project and we'll just build this, build on this for a while. I'm just going to like copy it and put it in. Lesson four. But this is the base project of how we should structure the react projects. I'm sure there are more directories we may add but you definitely need components, config, pages, routes, services and utilities. So little explanation components will be little pieces of our Lego blocks, UI blocks. Config will be like server URL language of the app and all that kind of stuff. Pages will be our pages. Yeah, that's pretty self explanatory. Routes will hold pages, services will be our API calls and utilities will be small utility functions that will build out like make unique so you get rid of duplicates, find key and object. We do some this algorithm for that show you guys and cool. So today we're going to just do a little exercise and then we're going to start our react project and thank you guys for being here. And last time I think we, we made the request and then in the use effect we made a make request function. We hit this URL and we got 10 results. We will use react query later.

3. We're already here. What is the command? Oh, what cat package? JSON See deb local host 5173.

All right, so we have a hello world here that's going to be this, this div and this H1 here div meaning like container and H1 meaning header one. There's a one through six and one is the biggest and all the way to six it gets smaller and smaller and you'll see in the, in the console here you'll see our API request getting hit right there. And that's this console log here on line 8 and this make request.

Cool. All good.

So here for the new people, I'm just gonna delete this file and then we're gonna redo it just so I can explain doing it real quick. So the first thing we're gonna need is I always like to put my imports like my tools that I'm gonna use. So if I save right now it's going to break this whole thing I think. Right?

Yeah. All right.

So this is the app TSX file. That's what's getting rendered by the main TSX app, gets exported from app tsx and then it gets put in strict mode. Strict mode will make you everything like render twice. But it's all good. It's only in development, but let's go to App tsx and I know that I'm going to need Use Effect and Use State inside of here. So those are the tools that I'll use. So these are little functions that come from React, right? You can, there are ways to import it. There's no wrong way. You can do like Star as react and then you can pick them off like this.

Ah, biz.

But it's more, it's more comfortable just to do it all in one line up here. Use Effect.

Use State.

So Use effect is something like takes advantage of a side Effect inside of JavaScript as the file runs or renders calls the function and then it protects it so it doesn't get called every single time. And Use State will hold. Hold data. I think Use state is just like a variable that has a rule to change the redeclare the variable. I sent a video about what's under the hood. So let's. Yeah, it's just a variable and then it gives you another variable that, another method that can redeclare that variable and it protects that variable on every single render change. Here what I want to do, I.

Think the correct way is like const app equals.

This and then we can.

Return Div H1 hello World and then.

In the bottom we can export default.

Default.

And we have not used Use Effect or Use State yet. So if I go back it's going to say hello World. So that's how React kind of renders it through this. It's called jsx. So those are always like if you're returning JSX from a file or like just HTML from a file, you want to put an X at the end of the file name. So like if it's just a service call or like a utility function, you probably do not want the X. It will work but it's just a good way to like get a first glance of the project and see, okay, the ones that are TSX or jsx are the ones that return ui.

So here.

The first thing I'll do is I'm just going to keep everything in this file. There's an API called randomuser me randomuser Me API. So this gives like a random user.

Take a look.

So it has keys, it Has a results and then that's an array and then right now I'm only asking for one because I didn't add a parameter. But it gives a key of gender, name, location, email login, date of birth, registered id and it's a pretty big object about a user. What else? Oh, if you guys are wondering what extension this is, this is a JSON view. I find it very useful inside of Chrome and it helps look at like this. Or else it's going to look like this, which is not pretty to look at in my opinion. All right, so let's just put it up here.

Const PP equals. Let's call it.

Here, let me. Can you guys see it? Fine. Minnie can't hear you.

Yeah, it looks like everyone can see.

Okay, let's call it random user ep. And this is called screaming case or all caps. And they're usually, usually use the screaming case. Whenever it's a constant variable, it's not going to change. So we're going to stick this. We're going to just. It's usually a different file, but today we're just this for this exercise, let's just put it in one file so.

I don't have to switch around.

There is a. A package I would like to use called Axios. And this is the Axios npm and the way you install it is NPM install Axios. And there are different package managers, but we're going to stick with. What is it called? Npm, the original.

So NPM install Axios. All right, cool. Let me see here.

Let's just start a little readme.

Exercise. Whoops.

Going to use that for HTTP request. Show you guys how to use that in a second. What do you want to do here? 1 hip random user API with.

Parameter results 10.

We'll make that number dynamic.

To show results. UI save.

Now use states. Red line goes away. And then if I want to display that count, I could use like a.

P tag and break out of the.

JSX and inject JavaScript. And then there I see a 10 here. Everyone see that 10?

Very small actually that's H2. All right, 10.

And we can say count count. And then if I made a button or an input.

And then.

I do.

Value equals count and then on change equals. Then that's the event and that's going.

To set count to.

Event B a target value.

Give me a second. And then let's do type equals.

Number.

If I change the number, it'll change the state as well because each time I'm on change it's setting the count here. So let's see this typescript error argument type string is not assignable. Okay, let's do. Let's wrap it in a number.

So.

So now we got a little counter thing going on. So let's make a button real quick. This is our. This will control how many random users.

You get from random users chat. All right, so maybe next to the button, let's just put a span here.

So the difference between span and div is span takes up the least amount of space it can. And div is block Display block. So it'll. It'll take up the whole width of whatever you're putting in.

So those are two different display types, block and.

Inline.

Let's call it get.

So now we have a get button right next to the input.

Right. Now let's do an on click.

And then let's get.

Let's do this construct get Random users handler.

Got four more people who joined.

Oh, nice. Hello, thanks for joining. We're. So today we're doing a random. We're doing a little react exercise, working with use effect and use state. Here I'm going to make an async function and that just makes it so that it handles everything line by line. Whenever I put a weight in front of it.

So here I'm just gonna console log get random users. Whoops.

And here I just press get. It'll. It'll make the request or it'll make the function call. So now because we have Axios in here, I'm going to make an Axios instance. So I'm going to make random users API equals Axios Create. Let's go look at the documentation. Axios base URL Axios create and then it has base URL. We could set the defaults but I like to do it like this. So we can have many different APIs. So the difference between setting the defaults is if in here I said axios.defaults.base URL equals random users EP every time I make I use Axios it's going to use. So if I put Axios get slash.

Just put a slash const res equals await and then I Console log reserve.

Yeah, it'll automatically kind of in the network.

At the.

Just using Axios it'll set the random user me API so you don't have to like put it every single time. So you'll see in the headers you'll see that it. It did call the random user me API because I set the default space URL. The configurations of Axios Instance. But what I like to do more than that is.

One second, I like to make an instance.

So random random users API equals and then Axios create base URL and then I'll put that as the random user.

Ep whoops.

P put headers.

Content type application JSON and then this way, I.

Think this looks a little bit prettier. I say const res equals a weight.

Random users API that dot get.

So console log res equals res. It'll be the same thing. Refresh get and that way I can have many Axios instances. And I see a response here.

Cool. So from here we're going to.

Put in some options. So I think it's params and I've hit this bug a lot, you know, like in post the option is just the object body. But here you have to put a params and then we'll put results equals to count.

So now if I refresh, I get.

I should have. I should have 10 in the array.

And we'll make another request. If I put 20 get the new.

Res should have 20.

Cool.

And just to make sure that it's working, just give me a second here.

See this response? Just leave it at that.

All right. I know that the results are inside of dot data dot results and that's all I really care about. So I'm going to just.

Pick off const.

This is how you can do it.

Data results.

Equals res and this would pick off data and then from data it picks off results. And then if I console log results get and I only get the results object back. But this is dangerous, they say.

Because.

If it breaks, you might crash your code. So it is good to use optional chaining. So I will say random users results equals resources. And then I know data is going to be in there every single time, but who knows if results is going to be there? Because it's not. It's something out of our control. And then if that does, if that's not there, I'll equal to an empty array. This is called optional chaining. And then let's check if it works.

I'll feel there's a question.

Okay, one second. Let me just typing this.

All right, let me see the zoom. How do I open the chat?

There should be like a chat like on the tab. I can read it to you if you want.

Yeah, could you read it to me? I. Yeah, can you read it to me? Yeah, so. Oh no, I found it. I found it.

Okay, you found it.

Okay, wait, no, I found team chats. Sorry, where is it? Because I'm sharing my screen. So I lost the chat.

There should be like a, like a thing, like some module somewhere.

I see it here. I see the chat here.

All right. No, you do not. I have a bigger wait. So Axios lets you grab a random user more than once? Yes, Axios will let you. It's just a, it's a wrapper for Fetch or I think it's more a wrapper for the XHR new xhr. But it's just you can use this request as many times as you want. So I, I just like Axios because lets you kind of make the HTTP request a little easier than before. Because I think before, right when I first started learning coding, it was UXHR XML request. So XHR stood for XML HTTP request. And you had to make these. It was a little pain and pain in the butt. But you'd have to send like, you'd have to make this new XML HTTP request and then listen to the add event listener and then on load you'd have to like make these listeners.

I'm just looking for a good one.

It's much less code.

It. Every single request took like what, like seven lines of code. So like on ready state change and then only if the ready state was 4 and the status was 200, then you would do something inside of this and then you'd have to like wrap it in a promise and then resolve it. And it was just a pain in the butt. But Axios came out and it's much easier to kind of use Axios than write all this code. And then Fetch came out and Fetch is pretty easy. But I'm used to Axios and Axios you can make. It's just a wrapper so you can call it as many times as you want and it's, it's much easier to use. I think it comes from, it comes from XML HTTP request. But then there was something called jQuery. Have you guys heard of jQuery? Anyways, jQuery got very popular back in, I don't remember like PHP times. And basically the reason why a lot of people use jquery is you could put like $sign.ajax and then you put like method get. I do a Google search here. Yeah, it'll show me. You can put like dollar sign dot get and it would be very easy. But that's like, kind of like where Axios was born from. Because Jake, that's why a lot of people use jQuery because it was just a super easy way to make a request. And then Axios Kind of made it his own library, like, because jquery was like a bunch of stuff, right? Like slide in animations, document element selectors and all that kind of stuff. But I think, yeah, I mean, whenever I can, I use Axios. There's, there's a lot of cool stuff that you can do with Axios. I'll just show you guys an example of which is better. Which one is better, Fetch or Axios? There are pros and cons or specific use cases for those. I think they all do the same thing, like, to be honest. But on Fetch you have to make one more extra step and a wait on the JSON promise to turn it into JSON. But Axios, it does everything behind the scenes for you because usually you're getting JSON back anyways, so. But Fetch is Pro, is that it's just built into JavaScript so you don't have to install dependency. But Axios is pretty, pretty good. And there's a new one that I wanted to try. It's called ky. It's kympm. It's super small and it's, it's used for benefits over plain Fetch. It's. I think a lot of people are using this now in like, like Deno or Dino and stuff like that. But it's supposed to be very, very simple.

So I might change over to this one.

It has like one like almost 2 million weekly downloads. Let's just check the Axios npm. Axios npm has like.

Oh, it's, it dwarfs it.

52 and a half million weekly downloads. I think it's a pretty, it's pretty safe to go with Axios.

Yeah, and it's just easy.

But I have seen a lot of people use ky. Oh, let me just go back here.

All right.

And, oh, I was going to show you guys, like an example of maybe a way you'd use Axios. Sorry.

Oops. Where are you?

Src.

Oh, get bigger CD services, CD API, where it's CAT index, ts. No.

This is my code at my old company, so this is my client here. API. Exios has something called Interceptors. I'm sure Fetch does too. But on every single request, you could kind of do things that you do redundantly, like over and over again, like basically, like if you're using a JWT token, you could try to get the token and put it inside of every single header because the token changes and then you can use an Interceptor. So it's like a middleware for your Axios to kind of. What is this? Like, handle the expired token so you get a new token. So if that happens you can try and recall the request. So I always put in like a. What is this? A recursive function. So if the token is expired, I. I try to retry the request and I return the API client on the original request again to kind of like.

I don't know if that's big enough here to.

To retry the request if it's an empty. If it's an expired token. So this is the kind of steps you go through. And then I just put a wrapper around the API so it makes it easy to use.

Pretty good. I like using this. Anyways, sorry about that tangent.

Let's go back to finishing our random users thing.

All right.

Sometimes Mac is so annoying. All right, there you go. I can see why you do not like Mac because into mini.

Yeah dude, it's hard to get used.

To and they like add these new features all the time that like it's kind of hard.

Yeah.

Morelli asked quickly, have you used. You use swr.

Use sw. Is that coming from next or like one of those new things? I've heard of something like that. Could you zoom in? Oh no, not your bad. But I have not. But I think I've heard of something like that.

Let's look here.

I'll look it up after the lesson because I'm trying to get through it real quick. But no, I've not used it. But I think it's something to do with like the new way to do it. But oh wait, no, I've heard.

I have heard it.

React hooks for data fetching. Okay, this looks interesting. Is it kind of like React Query 10 stack? Really?

Okay, I'll take a look.

But I've been using React query a lot more than anything because I used to Redux toolkit but then I switched over to React query and it was a lot easier. My opinion. Okay, this looks interesting. Is it kind of like React Query 10 stack? Really?

Okay, I'll take a look.

But I've been using React query a lot more than anything because I use that answer your question. All right, I'm going to move on. All right, so we have the random users results. So we do need some kind of state. Right? Just going to comment this code real quick. See Redux toolkit. But then I switched over to React query and it was a lot easier. My opinion that answered your question.