Simple Express Server | JavaScript JOB READY Free Course (2025)

So welcome to the second week. I'm really excited and this has been really fun for me. So last time we did like a pure client thing, just HTML, JavaScript and CSS and we used something called Live Server last time. But this time I wanted to work on something more server side and show you that like we can serve that page without the Live server and do it with code. So we're going to do a simple Express server and then I wanted to go over and always like before our lessons, if you pull the, if you pull the code or clone the code, we'll have a complete section and then what we're working on today. And then also I wanted to go over array methods today, just array methods that return arrays. So like let's think like map, filter, reduce. I guess reduce can return anything. But let's just go over those three things. Mostly map, because we're going to transition everything to react by next week. And you're going to need these array methods because when you're, when you're like looping through or traversing through all these arrays, you're going to need, you're going to need to. You're going to need these array methods. So today, Express server and array methods and maybe some DOM manipulation. And that's what we're going to do today and the next time we're going to do and then it's going to prepare us for react for next time.

So amazing.

So to make an Express server, the first thing we need to do is initially.

So let's just make a readme.

Oh, let's just do simple Express server.

Stable. Conclusion. This will be a simple, simple web server. We'll be able to serve static files.

Is this okay?

Size?

All right, wait.

Okay, we'll be able to handle HTTP requests for now.

And packages.

Packages we're.

Going to need are.

Let me see.

Nodemon and express. And you can just do.

Nodemon.

So nodemon is going to be. It's short for node monitor. So basically you run a node file node js file with node file name, but then nodemon is node monitor. So whenever there's changes in the file, it updates the file and reruns the code. So that's going to help us in the long run. So the way you install this is NPM I nodemon minus D. And that's a dev dependency. So dev dependency is there. Basically there's two types of dependencies. The dependencies that you need to run the project in the development mode and the dependencies that you're always going to need in production level. So we're gonna. So nodemon isn't really required in the production. It's only. It's only required in the dependencies. So you want to kind of separate like your dependencies, as in like dev dependencies and regular dependencies. And then we're going to need something called Express. And if you guys are wondering what I'm doing, like with these hashtags, this is just header two. Let's actually make this header one. And it's markdown. And it's just the way you write this markdown readme file. As you can see, it's README MD, which is.markdown npmi. And then we'll use Express in here. And then. So these are the things that we're going to need. Init project will be NPM INIT Y. And the minus Y flag is just to say yes to all the prompts. Because if you. I'll show you guys both ways and I'll just delete the stuff just. But I bypass like all the questions that NPM like asks me when I'm initializing a project by. That's true. By pressing minus Y because it's annoying, to be honest. So I just put NPM in it, minus Y and then completes the package JSON for me. So I'm in the Express Server Express Server folder directory. So I'm just going to show you guys like lessons.

Lesson 2 Express server.

So this Express Server that we're running today will actually. You can actually put the project that we did last time into the static folder, the public directory folder, and it'll be able to serve it. So you won't have to press Live Server, but you can just run the server and then you can go to your files.

But I'll leave that up to you.

Guys and I'll just show you how.

To do it today.

So I'm going to press NPM init without the minus Y flag. So NPM in it minus Y. And then it starts asking me a bunch of like questions like package name, version description. You could just press Enter, Simple Express App, whatever. But the entry point, which is going to be an index JS but I'm just gonna control C and exit out of here because I do not want to complete this. And NPM INIT Y will just do everything for me. So it gets like from the readme, the description, the index, it just handles everything so I don't have to answer all those questions and press enter like five times or whatever. So now we have a package JSON it was created. And one very important thing, when you start installing these node modules, you never want to push your node modules into the repository because it gets quite robust. So you always want to make a gitignore and always put your node modules.

Here in your gitignore because.

The package JSON will install it locally no matter what. So always git ignore your node modules. So we init the project run project.

We'Ll do NPM run start and for.

Someone new we'll do NPM install. And NPM install will install everything in the package JSON. So the first thing we need to.

Do is NPM I nodemon my SD.

That'S going to install our node monitor and NPM I express. So I is just short for install. You can actually write install too. So when someone comes in here and say they do not have the node.

Module, right, I'm just going to delete them real quick. RMR node modules. There we go.

Now node modules is gone. But now NPM install. The node package manager will look at this package JSON install accordingly. Like, if you guys ever done Python, it's kind of like your requirements txt when you pip install. So pip install minus r requirements txt. So package JSON is kind of doing that for us. It's a little bit more robust because it installs like, because it makes it for us, right?

So NPM install and it looks at.

The package JSON and then it installs express and nodemon. So now it's the same. We have Express and Express comes with a bunch of other packages. All right, so what we're going to do now is we're going to make. So the entry point to our. Our code is going to be index js. So we'll make an index JS file. Index js and in here, now we're in. Last time we're running JavaScript in the browser. So you guys have to kind of like really know that there's JavaScript that's running the browser and there's JavaScript that's running the server. Syntax is same, but the engines are a bit different. This is like node is like written in I think like C or something. It's like C land. And then the browser is kind of like V8 engine land. So they run a little bit different, but in the end it's all the same syntax. And that's why JavaScript is so powerful, because it's the only language that can be actually be run in the browser and the server.

So it's pretty cool.

I mean, the two other languages that can be run in the browser is HTML and css, but I don't think.

You can code in the server with HTML and css.

But. Okay, all right, all right. So we're going to make a console log hello world. And the way you run a node JS file is you write node and then the file name. So you see hello world here. But the one thing we're going to do is in the package JSON, we're going to add in the scripts on line 6. And the test is, we have no tests right now, but if we had like jest, mocha or chai or whatever you choose, you can put your unit test here. And you do that by like writing like index test js. But we're not doing that today for a later lesson. So in here you can actually put like a bunch of scripts. I'm going to turn my GitHub copilot off here. I think it's on disabled.

And then for index js, disable this too. Disabled. All right, so.

Scripts, let's just make a script called a start. So this is what the NPM package manager would look for. And then here I'm going to put node index js. So relative to this file, index js is right here.

So we can just put index here.

Now if I run NPM and run start, you'll see that it runs hello world, same as if we did node index js.

It's the same thing, except one is.

Run by the package manager and one.

Is run just by note.

So we installed something called nodemon earlier. So nodemon is actually a package that we have in the package JSON in our node modules. And nodemon is right here. 3.14 I'd rather use nodemon here. I think recently in JavaScript there's something called like there's a watch flag that replaces nodemon. But I don't know if it works very well. And I think it's. I don't think it's like stable yet. Maybe it is, last time I checked. But I've been using nodemon for years, years and years, and it's never let me down.

So nodemon is the way to go.

So NPM run start and now it'll watch the file. So it says nodemon watching paths to everything in this project. Watch extensions js, mjs, cjs, and JSON. So if I make any changes inside of any of those files in the paths anywhere, it'll. It'll rerun the file. So if I go to index JS.

And I say, hello.

Hello, best community right here. It'll. And I save it'll. It'll rerun the file. So hello, best community. There we go.

You guys are so there you are.

So there we are. We have nothing in our file now. And if you guys are wondering what console log does, it just logs things into the. Into the. Into the server, into the terminal. So the reason why it's called console Log, I think is because like.

Like.

Captains or something, they. They like log things in a book. So I think that's where JavaScript comes from. It's like a log.

So it's pretty cool.

And console in the. In the hood is. Under the hood is like a class. And it has, it has methods like log, warn, error, trace, table. But honestly, I only use error and log. And I usually end up making my own loggers that use console log.

But okay, so because someone said so.

We'Re going to use module.

Happy, Happy, happy. Anyways, so wait.

All right, all right, we'll use module. All right, so we can go import express from express. There we go. And then that'll import like the whole express package, library the module into our code and whatever is default. So there's the module exports and the require the lib Express. So if you look in the module.

Actually, let me see here. Go into this mess here.

All right, Express, Express, Express, Express.

Where is it? Oh, here it is.

So in the index, it's importing module exports equals require save Express. And there's a readme. There are like node modules. There's a bunch of things here like application js. If you ever like wonder how to use a package, the best way I feel is to just look at the code. Because, like, in the end, code is just code.

It's just text, to be honest.

That's all it is. And you should never like be afraid of it. Because I think a long time ago when I was starting, I was like, afraid to look at this kind of code because I didn't really understand it. I don't know what the heck like app init is, but like, okay, like there's an app variable and then there's a. There's something like.in it in that object. They're trying to make it a function and it clears out the cache, clears out the engines, clears out the settings, and it does something called default configurations, which is like set here. So I mean, like always look at the node modules if you're having a problem. And there's things like, you know, you can Fork the node module if you find a problem with it and then install your own version. Or I've been using this package called, like, patch package and I'll show you guys how to use that in a later lesson. But I use it in, like, react native a lot. Like, when a package doesn't really work for me, you can actually, like, change things in the node modules. And maybe I should explain this first. Like, if you change something in the node modules next time you run NPM install, it's going to override everything that you change. So it doesn't matter. But patch package will install.

Wait.

Mini tells me to mute my mic every time I want to cough. Just give me a second.

Thank you. All right, cool.

So, yeah, like I was saying, like, node modules are just, are just. It's just text in the end. Code is just text. Like, you open Google Docs and you write like an email or like you write an email, it's the same thing. Like, it's just the same letters, the same, like, symbols. And you should never be, like, afraid to look at it because in the end, like, you look at the module and you can understand how it works. And I was talking about patch package last time, but basically later on you'll like, NPM install will overwrite all the changes you make. But then patch package, you'll have these patches and it'll install, and then in the post install script, so there is something called a post install that you can set in your index JS or your package JSON, and then it'll look in your patches and overwrite. It'll install the patches once more. So I'll show you guys that later on, but I'll show you guys an example.

I think Jaden has a question.

I'm sorry, cool question. How would you describe what node modules are? So node modules are just like libraries or pieces of code that you can put, like, import into your code. So, like, node is a big community. NPM is a huge community. So before I actually, like, write something, like writing this, like, HTTP server or something is going to. It's a lot of code and it's. It's been done a million times. So, you know, you search in the community and you see if it's. If it's. Someone's already written it. So express is like a wrapper for, I think HTTP. So I think there's a node package called library, called HTTP, but it's just a code that is maintained by open source or whatever it is. And it's usually really good code. If you see like other people are using it. So node modules are just pieces of code that you can use. That's, that's, that's like the most simple explanation is that. All right.

Answer Jayden. Okay.

And I just wanted to show you guys.

Let me see.

Take a look at some production code.

So Microsoft JSON. So let me see.

So these are all my scripts in my production code before. So there's a script called post install that comes pre. Like that node knows about. And what I did here was a patch package and that's an NPM package that I have installed here.

Patch package and that's inside of node. And you guys watched the last video.

Guys know that how I do my reading but patch package. So it basically you add the post install script and you have a post install minus post install and patch package and that's going to allow. Post install will allow you to put the post install into the scripts and basically what the usage NPX patch package and then the package name and that's going to fix the node module. Package name means node module and basically it'll put these patches inside, right? So basically let's say you have a node module that's a little bit broken and you need to fix it a little bit. It shows you what what files to minus what files to plus that I changed. And then after the NPM installed overwrites your packages because it's looking at package JSON patch package will make those changes that you made before and it'll help you get rid of some errors or because not every node module is perfect.

Right. So that's all that is.

All right. So first thing I wanted to do is instantiate our app. So let's go Const app equals.

Let me hide this guys.

Const app equals express. We'll instantiate that. So.

Instead instantiating express app here and.

Then we have to divide define.

A port.

And usually that's going to be in the. It's going to be in the environment file.env and we should actually get ignore that too. But I'm not for. Because this is a lesson and this is like for all of us to share. I'm not going to do an environment file yet because then it's not going to be in the GitHub repository but we can share one in the Discord. So today I'll just put all the secret variables inside of the file and then later on I will we can move it to the environment file. So say cons port equals 8,888. It's it's a good one because not any. No, like, no. No programs or anything run on that port. And I was born 1988.

So.

Port.

App is going to run on port 80 on this.

So now we have. Let's just make a simple get request.

Whoops. App get and then add the ping.

We'll do. So it takes this, this is a callback. So this app.get takes. I think it takes three parameters. But right now we're going to think about the two. So it takes a route as the first argument and then the second one is a callback. And that callback is going to give you something called request and res.

Or they're.

They're actually, you can call them whatever you want. So I think it calls extension request and resolve.

So I'm just call it rec and res.

So request is everything that the client is telling to the server and then when the server is talking back to the client, it's using the res, the res object, the res argument and that. Meaning the request will hold everything from the client, right? When they're, when you're like calling is going to hold like, hey, where is this guy calling from? Like, is there anything in the params or the body or the query? And like basically this is how I think of the server. A server backend is like a librarian. So like a customer to a customer comes to a library, they're like, hey, can I get all the books starting with I don't know, like X. And then, then the librarian goes to the database and then he's like. Or she is like, okay, give me all the books. Does that start with X? And then they return to the client. So that's basically what the backend is.

Doing most of the time.

And so basically request is the customer asking all these things, right? Like, hey, I need, I need this, this and this. And giving you the context and the clues of what you're going to need or what need to do. And then the server does it and then sends it back with like res send or res send file or whatever it is back to the. Back to the client. So, so here you can just put like description.

Ping, ping.

At endpoint, ping.

Or.

Then this is kind of how you write comments in JavaScript. I'm overly commenting my code really to just show you like this is how you comment and things like that. But basically the way I did that is you just press/star star and then enter and then this will. And then you always do it in like the beginning on top of functions or something. Like that. And then you instantiate it with like an ad and then like description, you'll have a couple things like this, like at param at. And then you can like tag it as an async function if it's going to be async at. Oh yeah, here they, here they are like abstract, access, alias, argument, async, class, constant, constructor, and all this kind of stuff. Description. But example, and this is kind of how you kind of comment your JavaScript code. And each language is different. So like this is the JavaScript way. Exactly. Yes. For single line you would put, you would put like double slash like this, like I did over here. But when you're explaining like methods or functions, this is the correct way to do it because you can like kind of like separate your params, your description, your examples and all this kind of stuff. And then later on, if you do it the correct way, there's actually a package called JSDOC that I use a lot because at every company you're going to have to write documentation again. It's, it's the most grueling task in the world sometimes. And let me see if I can.

Find this real quick.

One second.

See here.

It'S one of the most grueling tasks in the world.

Whoops, whoops, whoops.

Here we are, let's go to our old one. And then documentation, project App API. You have to write all this documentation. It's, it's, it's growling. It's basically you have to, you have to explain what the headers are, how to call it, the response and all this kind of stuff. And it's very, it's not, it's not the most fun task to do at the company when they ask you to do it, to be honest. But basically there's a package called if you write the comments correctly, on top.

Of your functions there's a JSTA and.

JSDoc auto generates a lot of your, a lot of your documentation for you. And if, if you guys get anything from this, like, lesson that we're doing today, learn how to use JS Doc because it's going to save you a lot of time and you get to do more of the things you love to do, like code and figure out problems rather than explain to people, like.

Where you like what you need to do.

And JS documentation generator for JavaScript. It basically looks through your code and looks for those comments and creates that documentation for you in a very pretty way. And.

I think it's, it's very good.

And like just massive Time saver. And, and just honestly like people, companies just want this documentation but no one ever looks at it. So you just show I did it. Here it is. If anyone really wants to look at it, have a look and have those files ready and have that. But honestly like you're seeing like basically once you're like coding at the company or whatever, you're seeing like your friends, basically your co workers that are your friends that you talk to every single day and you're talking and communicating while building and I think it's like they can just ask you. But I mean obviously the documentation is good, but that's more for like new, newer people that come into the company that want to look like, hey, I have all this fire, I want to read all your documentation, all this stuff. But then everything falls in line later.

I think to be honest, not trying.

To shit on anyone, but okay, so okay, so now we have a app get and then ping and then request. So here you say res send and it's a, it's a method off of the res. And then maybe I could just say pong. And now.

Take these out and simple express. Simple endpoint for slash, ping for health check. Have this real quick.

Open my browser.

Watching some boxing on it.

Anybody watch boxing? Canelo won last night. I have to watch it on like illegal websites in Korea. That's what that black website was. King Kong TV 06. I watch, I watch all my sports on here.

Pretty good. Anyways, here we are.

So we go to localhost 8888 and then on ping.

Whoops.

Oh, we're not, we're not persisting the server. So app.on wait, is that it?

Hold on. I think app.on let's just check it.

App listen.

Sorry.

All right, so app listen and then Wait, what is the argument that it takes?

Hold on. Oh, the port and then the callback. So we'll pass the port here and.

Then we'll call a function callback and then we'll just say console log app is running on port.

Oops plus.

And now app is running on port 8888. And now if you go to ping.

You know, it should say there we are.

So now we have a simple HTTP request going on and from what I'm saying earlier, we do this again. Basically the server is returning the response to Pong and basically you're sending a bunch of stuff, right?

Like the request headers.

Basically you have this accept accept encoding accept language cache control connection the host, who you are and all this kind of stuff, right? That's going to be in your request object and the res is going to be your response. So that's, that's, that and that's a, that's, that's how you make a simple HTTP request. All right, so there are many things like you can do app get and then greetings and then maybe you could take request res here. And then I think now we can actually look at the console log.

Request equals request and then res send.

Hello.

Greetings.

So now. Well, I need to clear my throat one more time.

There we are.

So if we look here, I sent. This is basically the browser when I'm doing this, it's a get request, right?

So.

The server is working. It's just, I'm trying to explain like the request and the, how the HTTP request works. So basically in that request object that we're sending over, it's the get request. And here we're saying hello. But actually inside of that request object, there's like a bunch of stuff, right? There's a bunch like symbol, remove connection. And this is basically how the client is talking to the server. So that's that. And then I think there's something called query. So there's two things that, two things that the client uses to talk to the server. And that's going to be inside of query or params or, or body. And for each request type or method like get or post or put or delete, they're going to use different ones. But here, let's say that I want to pass like a name that's going to be in your. It's going to be a string parameter. And then let's just say John Sue. So now inside of inside a query, basically we have, we have a name John sue. And that's what the server can kind of play with here now. And we can, we can like.

Put.

A bunch of stuff in here, right? Let's say like location and that's going to equal like, I'm just going to name something here. Hopjong. It's, it's a Korean location. It's where everyone hangs out in Korea. Hopjong is a very cool place. So name John sue and location hopjong. That's going to be inside of your query. So we can see that that's what the, the, the client is telling to like the librarian, like I said earlier, hey, I need name John Sue. This is the context that I can give you. The name is John sue and the location is Hapjong. And maybe with that, maybe you can query the database. Hey, give me John sue from hopjung and then it'll give you all the information. So we don't have a database yet. We can hook that up late in a later lesson, but I hope you guys are understanding completely. So now we basically, if you look for query once more. Oh, name John2.

Query.

And then you see the location Hopjong. I didn't want the string. So you do that with the. And symbol and location hopjong and 1 second. So query and you see John sue, location, hop, junk. And this can go endless, right? You just have to add the end symbol. I don't know, like.

Occupation equals.

Community member. And basically now we have access to all, all of those parameters inside of, inside of our server. So name, johnsu location, hop, junk, occupation, community member. And now in the server, if I wanted to kind of return data, I could say like cons, I could pull those guys off, right?

Const. Think it's. Hold on, let me just make sure it's correct.

Res.

Send, request query. See if I can send it back here.

All right, so now we have access to that JSON object that we're sending over. And I think there's a really fun algorithm where you take this string right here on Code wars or something and you basically turn that into an object, which is, that's doing it under the hood. But basically now we can get a const. Name. So we're destructuring name, location, occupation equals.

Request query.

And then right here, let's, let's say.

We go and query database with this information.

So let's say you'd say like I don't know this adapter dot find.

Then you say whoops.

This is just some pseudocode here. Then you say like query.

Name, location, occupation.

And then it would search for name matching with John sue, location matching with hopjong and occupation matching with community member. And then maybe you will return like the guy's id.

Maybe it's like one and name, location, occupation.

And then maybe you get like more data from there, right? Age 35. Favorite food, ice cream.

Chocolate ice cream.

And what else?

Hobbies, Hockey, jog.

So now basically this age, favorite food, hobbies and ID that I, I picked up, it's just pseudocode, but that's kind of like what would come from our database.

Oops. Oh, not return res send. One second.

Something's going on. Cannot set headers after they are sent to the client.

I'm not setting headers though. I'm not setting headers. One second. Turn that off.

Start.

Maybe it's a JSON stringify oops.

Going on. Give me a second. Not set headers.

After they are sent to client.

Hold on.

Just make sure this is working. One second.

What is going on? And not set headers after they are.

Sent to the client. What is going on? Following my code.

The res object is pressed to the subclass of node js. Oh, sorry, I have the res send here. Can't have two res sends.

I missed that. All right, so go back here now go back here.

And now we have our JSON object with that data. Sorry about that, I had a typo and Cool. So now you guys are probably wondering like, okay, this is cool and stuff, but we need to like start a client or something, right? So the way you serve static files, I'm going to look in this code.

I'm just going to copy paste this guys, one second.

So you're going to need something called path.

So Google is amazing.

So readme. Let's go to the readme. We're going to use something called path. It's going to help us help node find directories and code inside of our project. And it's going to be path. And I think it's npmi. NPMI path.

Let me just make sure that it's not a dev dependency.

All right, so we're just going to install. We're going to install path.

Let me just look at this real quick. NPM path. See if it's a dev dependency or. Okay. Okay, so we're going to turn this off.

NPM install path. And then now inside of package JSON, you'll see that it has path and dependencies. So you have three things. Dev dependency, nodemon expressed and path out. Real quick. So now we can do import path from path.

Cool.

And then up here you can say const public directory. Path equals path to n public directory. So inside of here we're going to need to put a public directory public. You can name it whatever you want, but I'll call public.

And then you.

Have to tell the app to use it.

So app use, express static public directory and not do everything from memory.

Coding is very much about looking things up. And I mean I copy paste a lot of my code to be honest, but I never copy paste something I don't understand. And I think that's a good rule of thumb. Like yes. Like I may not understand it completely. Like if it's like a crazy algorithm or something like app.you.

Oh, thank you.

A good rule of thumb is like copy paste it. If you Understand it or like understand exactly what it's doing? Because I remember like at my old company, like when I was first starting it was a real estate company but basically we had a bunch of coordinates and we have a polygon and we had to do like a polygon inclusion thing and well, let me see if.

I can find the code if my.

Googling skills are pretty good. Polygon inclusion, JavaScript, check if point is inside a polygon. So I think I used to copy paste this code all the time here. So it's a function inside. It takes, it takes a polygon and it takes a point and then it, I mean the code looks really crazy. I never memorize how to do it, but I used to copy paste this one all the time and it just checks if like there's an intersection with that coordinate and the polygon and then it returns like true or false. So it's just like an algorithm. But I guess copy paste like the algorithms if you can understand and explain like what it's doing. But like with code like honestly it's about understanding and not like memorizing.

So that's what I have to say about that.

And thank you for the typo. So now we have a public directory. I'm just going to put an index HTML in here and bang operator like.

We did at Kanban and let's just do hello world here.

Then we'll do npm run start and now.

Do local host 8888 and this.

Is going to be our HTML file right here. So actually from last time if I pulled in.

Wait one second. Not lesson one, lesson two, project complete. It's, it's very good and.

Like just massive time saver and, and just honestly like people, companies just want this documentation but no one ever looks at it. So you just show I did it. Here it is. If anyone really wants to look at it, have a look and have those files ready and have that. But honestly like you're seeing like basically once you're like coding at the company or whatever, you're seeing like your friends, basically your co workers that are your friends that you talk to every single day and you're talking and communicating while building and I think it's like they can just ask you but I mean obviously the documentation is good but that's more for like new, newer people that come into the company that want to look like, hey, I have all this fire, I want to read all your documentation, all this stuff. But then everything communicating while building and I think it's like they can Just ask you. But I mean, obviously the documentation is good, but that's more for like new, newer people that come into the company that want to look like, hey, I have all this fire, I want to read all your documentation, all this stuff. But then everything falls in line later.

I think to be honest, not trying.

To on anyone, but.

Okay, sorry.

Okay, so now we have a app get and then ping and then requests. So here you say everything falls in line later I think, to be honest, not trying to shit on anyone.

Okay, sorry.

Okay, so now we have a app get and then ping and then request. So here you say res send and it's a method off of the res. And then maybe I could just say pong. And now.

Take these out and simple express, simple endpoint for slash, ping for health check. Have this real quick.

Open my browser.

Watching some boxing.

Anybody watch boxing? Canelo1 last night? I have to watch it on like illegal websites in Korea. That's what that black website was. King Kong TV 06. I watch it. I watch all my sports on here.

Pretty good. Anyways, here we are.

So we go to local host 8888.

And then on ping. Whoops.

Oh, we're not, we're not persisting the server. So app.on wait, is that it?

Hold on. I think app is pretty good. Anyways, here we are.

So we go to localhost 8888 and.

Then on ping whoops.

Oh, we're not, we're not persisting the server. So app.on wait, is that it?

Hold on. I think app.on let's just check it.

App listen.

Sorry.

All right, so app listen and then.

Go on, just check it.

App. Listen.

Sorry.

All right, so app. Listen and then. Wait, what is the argument that it takes?

Hold on. Oh, the port and then the callback. So we'll pass the port here and.

Then we'll call, we'll call a function callback and then we'll just say console log.

App is running on port oops plus.

And now app is running on port 888-888-8888. And now if you go to ping.

You know, there we go.

So now we have a simple HTTP request going on and from what I'm saying earlier, we do this again. So basically the, the server is returning the response to pong and.

Basically you're.

Sending a bunch of stuff, right?

Like the request headers.

Basically you have this accept accept encoding except language cache control connection, the host, who you are and all this kind of stuff, right? That's going to be in your request object and the res is going to be your response. The original array like shift on shift, pop, push splice and all these kind of things. But then I feel like since ES6 they've been kind of the return value has been like a separate entity or like. And I think that's been very useful in recent JavaScript. So let's just say.

Name Joe name.

Min. So now we have, we have an array of objects with just name inside. So basically what we can do is data map. We can say const altered equals data map. What is the argument that it takes?

Hold on.

And then.

Let'S just put D and.

We can return way return object in one line is like this. And then we can say we can spread the D and so then spread that object. And then we can add like things to it like age.

20 school DVC.

And then now I press enter and I look at altered. We have name fill age 20 school DVC from all these, from this edition here. And then now if we wanted to.

Alter it even more, altered again.

And we take the equals altered dot map.

I spelled that correctly. Altered dot map. And then say A.

Do that again. And if you guys are wondering what the spread operator does, it takes the content of that object and then spreads it into that new object. So it's really good for cloning objects, shallow clones of objects later. So I can spread and then the A. And then I can add something like.

City.

I hold stomping grounds, Pleasant Hill. And then like I'm thinking about students. So like they're all similar age, they all go to the same school, they all probably live in the same city.

Just that person.

And then now alter it again.

And that would be they would add the city here.

And so that's kind of how map works. So it's an array method. You can alter arrays, mutate like change arrays and then return and it'll return the new array. So that's very powerful for react because you are in AP like HTTP requests, right? Like I'll just show you guys here.

Where's my old farming.cafe.Neighbor.com Barman There we are. Let's go to the mobile version.

All right, so if I refresh here, right?

And then.

So I go to like article list and there's a response. It's basically a result and there's an article list and it's basically an array of objects, right? So you got to think each of these little cards on Facebook or this blog. It's all going to be these objects here and you basically make this not going to, you're not going to code every single one, you're going to kind of programmatically do it and you're going to use a map and then you're going to return like an element from there, right? And that's how kind of react works with these array methods. So you take some data and then you make some HTML object or some UI object with it and you display it. And that becomes very powerful because you don't have to work out your fingers as much. So you can just put a map array array method inside straight into the jsx. If you just break out and then basically take the data and then return this JSX object HTML object into injected.

Into your UI your presentation later.

So that's a very simple explanation of map. But I think I'll push this code for Express and next time we're going to start on React and I will just start the React project now with.

Vite and I'll push it.

So. And just get lesson three ready.

So let's just do lesson three and.

Let'S figure out how to do that.

Vite React.

Getting started. Greetings. And then maybe you could take request res here. And then I think now we can actually look at the console log Request.

Equals request and then res dot send.

To now. Well, I need to clear my throat one more time.

There we are.

So if we look here, I sent. This is basically the browser when I'm doing this, it's a get request, right? So the server is working. It's just, I'm trying to explain like the request and the. How the HTTP request works. So basically in that request object that we're sending over, it's the get request. And here we're saying hello. But actually inside of that request object there's like a bunch of stuff, right? There's a bunch like symbol, remove, connection and this is basically how the client is talking to the server. So that's that. And then I think there's something called query. So there's two things that two and that's going to be inside of query or params or body. And for each request type or method like get or post or put or delete, they're going to use different ones. But here let's say that I want to pass like a name that's going to be in your John Sue. So now inside of inside a query, basically we have, we have a name John sue and that's what the server can kind of play with here now. And we can, we can like.

Put.

A bunch of stuff in here, right? Let's say like location. And that's going to equal like, I'm just going to name something here. Hopjong. It's, it's a Korean location. It's where everyone hangs out in Korea. Hopjong is a very cool place. So name John sue and location hopjong. That's going to be inside of your query. So we can see that that's what the, the, the client is telling to like the librarian. Like I said earlier, hey, I need name John Sue. This is the context that I can give you. The name is John sue and the location is Hop John. And maybe with that, maybe you can query the database. Hey, give me John sue from hopjung. And then it'll give you all the information. So we don't have a database yet. We can hook that up later in a later lesson. We're going to use npm. I have been like experimenting with pnpm. It's very fast and it's very good. And Yarn Berry as well, Yarn three. So I think they're very good. But you can shorten it like this. Npm.

Let's go back, lesson three.

We're going to do NPM create and.

Then we're going to say let's go.

Back, let's call it that. And then the template we're going to use is.

Let's see.

Let'S use react.

Typescript. React. Yes.

Center. Yes.

All right, so now lesson three has.

A full vite project in it. And now we'll CD into.

Oh, oh, because it's one.

One directory inside.

I get it. All right. Okay.

Now it told us to NPM install NPM run dev.

I think that's what it said. Now NPM install.

And that's going to install our. All our dev dependencies according to vite. So that's going to be in our package. JSON needs all these things to run vite and react. And then that our Node Modules folder popped up after the install. And vite is really good because it's.

Very fast and NPM run dev.

You can see that it has a.

Dev script in here.

Let's just run feet, call it oh.

The port and then the callback.

So we'll pass the port here, right? For the longest time. But I read the documentation and people kept on telling me it's vite. But in my mind, every time I say vite, I keep on thinking it's fight. And then whenever I'm saying vite I keep on thinking in my head that it's vite. So this is our vite React project. It has a simple counter in here. I think we can build some really cool stuff with React. Like I feel like I've been using React for like, I don't know, like let's say like seven years and.

I.

Find it much more comfortable than HTML, CSS, JavaScript and I mean it's like industry standard recently. So just like take all this out Express, wait and then we can say.

Export default function app and then do.

That and then we have like a.

Hello world here and that's basically.

What we're going to, we're going to start our next time. We'll, we'll learn how to make components, our folder structure, our configurations and it's going to be fun. See the location hop Jung I didn't want this string. So you do that with the end.

Symbol and location hopjung and 1/2 so query and you see John sue location.

Hop junk and this can go endless, right? You just have to add the end symbol. I don't know. Like.

Occupation equals.

Community member and basically now we have access to all, all of those parameters inside of, inside of our server. So name johnsu, location hopjong, occupation community member and I'll teach you guys about use state, use effect and all the weird kind of hooks like use imperative handler, you got use memo, use callback and all this kind of stuff and it'll be, it'll be really exciting for me because actually when I get into React I kind of like nerd out and I can and I think it'll help you guys because.

Pretty good with.

React to be honest. But it'll be fun I think and we can get into it next time and just practice like the array methods, filter, whatever. Like I want to do like a simple like random user thing like for next time which is going to be like this API and I'm like in my old company, whenever there was like a front end developer I always used to say like the coding test I'd say hit random user API and then make a user interface, then make like a delete and stuff like that and it'll be very, it'll be very interesting and fun.

So return data.

I could say like const. I could pull those guys off, right? Const.

I think it's, hold on like I'll.

Ask you guys to like one thing I want to use in here is.

Axios, but maybe we'll just use Fetch for now. Const make request equals fetch and we'll.

Mark it as an await function.

We could say like on Express equals fetch. Ah, Async.

Adrian asked a question.

Oh, did he. Did you use React for all your startups? No. When I first started, honestly, React was too hard because it was like class components and stuff. And I always say, like, I'm not like. And there was a much easier learning curve with Vue and Vue is really performant. Vue 2.0. Vue is like another JavaScript framework when Angular, React and Vue were kind of like fighting it out. And I guess React was the Canelo, right? It whooped on all of them. But Vue was. It was good for developers because it was kind of like just learn, like writing HTML but component, like in components. And then when, after I learned Vue 2.0, then I went into React and it helped like it was a good, like, learning curve curve for me because I tried go straight into React. And at that time it was a lot harder, I feel, because they're using class components and you had to learn about this dot state and. Exactly. And like, I don't know, like this dot and then all these like, life cycle hooks and all this kind of stuff. And it was a pain in the ass. But recently, like, it became functional components and it's. It's a lifesaver, to be honest.

So let's just make this request real quick.

I'm going to use something called Axios.

Next time, but we'll do this one for today.

So just to show you guys, like, React is just a huge library, right? So you can actually do like import Star as React like this.

And then you could say something like.

I want to pick use effect off of React, right? And this is kind of the same thing because React is, in the end, it's just a big class or a big object.

And.

And basically now we go to our. So just to show you guys, like, React is just a huge library, right?

So speed Project cr.

Oh my. We'll see a huge object here with all the results.

Why am I alt?

You can actually do like import star.

Key keeps on falling off my keyboard.

All right, anyways, so that's going to be our object that we're going to play around with next time. Going to be fun. And basically you'll just see that it's making a API results request, what we learned in Express just a second ago. So I'm sending a payload that's going to be the result of 10. That's going to be that query that we're talking about. And then it's going to give us this response. So that's what the server is doing. And as React like this and then you could say something like I want. It's gonna be fun. I'm excited to be honest.

Awesome. Cool. And it is request.

I know that but it's from. It's something funny with React. It's. It's. I, I keep on reading about it. It's coming from this use strict mode thing. But it's not like a big thing. Like. But React will be fun and we're gonna create some cool project and I'm gonna push this code and have you guys look for it and then I think that's it for today. And I just like if you guys want to chill. I'm down to chill for like my baby and my. My wife went for a walk so I have some time to kind of chill. It's Korean Thanksgiving right now, so yeah, wait, it's Chuseok if you guys are interested in Korea. But it's like a three day holiday and everybody spends time with their families and stuff.

So I'm pretty on a pick use.

Effect off of react.

Right.

And this is kind of the same thing. I'm on the hook for that. No, not like it's like a bad. All right, let me push the code. But I'm really excited to do react because sometimes in the HTML CSS and JavaScript stuff is.

It's a pain.

Not a pain but because react is in the end it's just a big class or a big object and basically now we go to our. But it's. It's.

You'll.

You'll find out why they made react. Right. And that's.

Jaden says do you guys eat specific foods to celebrate?

And wait, do you guys eat? Exactly. We have something called Feed Project.

Sierra.

Oh my. So like these kind of like any documentation like, like we have like this rice cake soup and just a bunch of stuff.

But on the off topic channel in Discord. I'm sure we'll post some food there.

Well yeah, I can post some pictures of food. I'm going to my aunt's house tomorrow actually.

Right, right, right.

Tomorrow's actually. I don't like. I know I'm 35. I'm not excited about it but tomorrow is actually my birthday so we gotta have that seaweed soup Miyako. Right? You know about that mini, right?

Yeah, yeah. For sure, for sure.

All right, so any documents or videos on REACT we can watch and read before next week. I'll send it in the. In the JS course. Like videos on YouTube if you guys need to watch it. I have a couple things that I. Thank you, Adrian. A couple things that I find interesting and stuff like that. Like there's an event loop video that I'm going to post right now about how JavaScript runs. I think you guys can gain a lot of value from there. Hold on. I keep on getting like my ADHD is going off. Like I'm trying to commit this code and push it, but then I want to.

This kind of stuff. Hold on. Lesson to upload update and lesson three Peak React in the.

We'll see a huge object here with all the results.

I don't know why my alt key keeps on falling off my keyboard.

All right, anyways, so that's going to be our object that we're going to play around with next time. It's going to be fun and basically you'll just see that it's making API results Request.

Push. Cool.

Now.

Now everything is pushed.

Everything is clear. JS event loop. His name is Philip, actually. This guy, Philip Roberts.

Really good.

Share this.

Copy we're trying to be better. You know nothing. I said we're trying to be better.

Oh yeah, React. My mind react is good, but I. I'm really in this felt recently Svelte is very easy. It feels like what a framework or what they're trying to do with all these other frameworks.

Like it's.

It doesn't use a virtual dom, it doesn't need a render engine. It's super simple and that's what I'm using my project. I'm just gonna post this in here. It's not to do with React, but it's just to do with JavaScript engines and event loops. And I gained a lot from this video. Yes. This video is like amazing. Like, he explains it in such a good way that I think everyone that we learned in Express just a second ago. So I'm sending a payload that's going to be the result of 10. That's going to be that query that we're talking about. And then coding should really watch this video. And I think react view state under the hood. There was like some JS conference by someone he kind of explains like it's like a lead and then there's a.

Function to change it.

I think it's this guy right here. It's going to give us this response. So that's what the server is doing and it's gonna be fun. I'm excited to be honest.

Awesome.

Yeah. He recreates Use state in under 30 minutes.

It's very good.

Because we're gonna use you state next time. So that I think Adrian, you should definitely watch this because. And everyone.

Because actually really interesting. Like.

In the end like React has all this crazy stuff, right? And it looks like. It looks like crazy but in the end it's just JavaScript code that's. It's not anything magic. And in the end from JavaScript code all it is is just text. Right? It's like reading a book. I'd say React is definitely feature proof for jobs. React won't go away. It's. It has too big of a community. It's. And it's just. It's.

It's taken on a world of its own.

We got a. We got goie. He just joined. But I'll just join unless it's finished. But it's okay. We're hanging out a little bit.

Chilling. We're chilling.

Thanks for coming, sir.

These two videos, I just posted them in JavaScript free course. They're very good. What the heck is event loop anyway and can switch recreate React hooks and use state in under 30 minutes. But I did hear in react 19.

Right they're going to get rid of.

All these like.

Requests.

I know that but it's from. It's something funny with React. It's. It's. I. I keep on reading weird, weird hooks like use memo, use callback and then it's just going to have something.

Called use which is kind of about.

And it's coming from this use strict mode thing. But it's not like a big. Any other questions? Exactly. React 19 has a compiler Murali. Have you seen that React Facebook has its own React language. Actually thing like. But React will be fun and we're going to create some cool project and well they created it but they have their own language just for React. I think this is a Theo T3 is very good.

This one's good. I'll share this one.

So new flow language features for React. This is. They only use this inside of Facebook but basically you don't need to kind of like destructure the object and you can just pass the props as is. And I think it's pretty cool. This is how you code and then this is the component syntax for how.

They do it at Facebook with their own thing.

All right, Adrian, take care. Thank you for joining us.

And I'm going to push this code and have you guys look for it and then I think that's it for today.

Appreciate that.

Thank you. See you.

See you next week.

See you next week. Yeah.

All right.

Thank you.

And I just like, if you guys want to chill, I'm down to chill for like my baby and my, my wife went for a walk, so I have some time to kind of chill.

By the way, Phil, I, you know, all day is tomorrow, so you might not see me tomorrow, brother.

Gonna say like good morning no matter what, dude. And by the way, I'm not like, like the, the screen is pink and it's, it's Korean Thanksgiving right now. So.

Yeah, red. So I just, it's reflecting on but. Right. All right.

Any other questions? Good. Anyone listen to the Misfits?

No.

No problem.

It's fun. These are fun, man. These are fun.

I, I love doing this, dude.

Especially like all these people and stuff.

It's amazing. It's fun. Hopefully we get.

Was it good?

Oh, are you going, where are you going tomorrow?

Oh, me? I'm just, I got like two places to go tomorrow. Like mom's and then like the great. The. What is it the mountains for the, the grandpa.

Okay, but wait.

Okay, but like it'll be okay though. It's not gonna affect me that much.

Oh, we got the Mirelli, Jaden and Sen. That's cool.

Jocelyn, wait, it's Chuseok if you guys are interested in.

But Justin left.

Yeah.

Okay.

All right, good. See you.

But I, I, I could, I didn't know the context. I thought she was saying see it to Adrian for a second.

Oh yeah, yeah, me too. She bounced.

It's like a three day holiday and everybody spends time with their families and stuff. So I'm pretty.

Sure, I think so some of the. Anyways, I'm gonna stop the recording here. Thank you guys for the coming. We can talk a little bit more. I'm just gonna stop the recording.

I'm on the hook for that.

What's, what's up?

No, not like it's like a bad. Right, Let me push the code.

So.

But I'm really excited to do react because Sometimes in the HTML, CSS and.

JavaScript stuff is a pain.

Not a pain, but it's, it's you. You'll find out why they made react. Right. And that's.

Jaden says do you guys eat specific foods to celebrate.

And wait, do you guys eat. Exactly. We have something called John. So like these kind of like any documentation. Like, like we have like this rice cake, soup and just a bunch of stuff.

But see it on the off topic channel in Discord. I'm sure we'll Post some food there?

Well, yeah, I can post some pictures of food. I'm going to my Anne's house tomorrow actually.

Right, right, right.

Tomorrow is actually. I don't like. I know I'm 35. I'm not excited about it, but tomorrow is actually my birthday, so we gotta have that seaweed soup MIA group. Right? You know about that mini, right?

Yeah, yeah, for sure, for sure.

All right.

So any documents or videos on REACT we can watch and read before next week? I'll send it in the. In the JS course. Like videos on YouTube if you guys need to watch it. I have a couple things that I. Thank you, Adrian. A couple things that I find interesting and stuff like that. Like there's an event loop video that I'm going to post right now about how JavaScript runs. I think you guys can gain a lot of value from there. Hold on. I keep on getting like my ADHD is going off. Like I'm trying to commit this code and push it, but then I want to.

This kind of stuff. Hold on. Lesson to upload update and lesson three Peak. React in. There you are. Push. Cool.

Now everything is pushed.

Everything is clear. JS event loop.

His name is Philip.

Actually. This guy, Philip Roberts.

Really good.

Share this copy.

We're trying to be better, you know nothing. They said we're trying to be better.

Oh yeah. React. Change my mind. REACT is good, but I. I'm really in this felt recently. Svelte is very easy. It feels like what a framework or what they're trying to do with all these other frameworks.

Like it's.

It doesn't use the virtual dom, it doesn't need a render engine. It's super simple and that's what I'm using. My project. I'm just gonna post this in here. It's not to do with React, but it's just to do with JavaScript engines and event loops. And I gained a lot from this video. Yes. This video is like amazing. Like, he explains it in such a good way that I think everyone that's coding should really watch this video. And I think react, view, state under the hood. There was like some JS conference by someone he kind of explains, like, it's like.