My name is Jay, and in this video I want to show you what is n.

P.

M.

And how you can use it.

So let's get into it even go to N.

P.

M Js dot com.

You will see if this page and here's a little bit of, you know, very quick description about N p M N p.

M is a note package manager.

Okay, so short description is reasonable code like people around the world are creating these packages full of cool code that you can use for your project.

Before we start using NPM, we're gonna need note Js because NPM calms would know Js And that's why it's called a note package manager.

So if you go to know Js dot org's, make sure you go scroll it a bit and then you will see some buttons that you can download.

And then after that, you can insult no danger.

Computer after note is installed completely.

New computer.

Please go ahead and open your command line.

All right.

And I want you to write node Dash V.

Hey, enter.

All right, Any of you see this like a version?

That means that you have a note in your computer and there are showing you their version.

After that, let's make sure that we have N p m.

So let's do the same thing.

But it would NPM ve hit.

Enter something if you see a version right here.

That's because you have NPM into computer and you're good to go.

Perfect.

So let's clear these out.

All right, so now I'm gonna minimize this.

Let's go here for a minute.

I have one in index, a two mile file.

It's empty.

The only thing I'm doing is requesting this main Js file, which is right here is totally empty.

So let's start playing with it.

Less creative variable here called my Date, and it's gonna be equal to today's date.

So let's do new date and this is going to give us like today's date.

Like right now.

Let's Consul August, make sure this is working.

Save it.

Let's go.

This is my patient is totally empty.

Let's reload the page.

Perfect is working.

It says my date is right here.

Now.

I do not like this format.

I want to change it, so I'm gonna use one of these node modules.

So let's go back here and it's called moment.

There's my favorite.

If I want a format and I want something very, very easy to read.

Like a very history date Moment is my favorite time.

Just gonna click here and here you can see is that installed And the only thing that is telling youse npm I moment the eye is for install.

All right, that's all we need if you want to use this.

So let's go to the command line again.

And before we get started and you know we start installing all these modules or packages, let's make sure that we are in the correct folder, which I am not.

So write down seedy space.

Go ahead, find a folder of your project Dragon.

Drop it.

All right, in here, we'll see the path to that folder.

Mine is correct.

And I hate enter.

And now you're inside.

You'll folder.

If you want to make sure you can write l s hit enter and it will show you a list off all the files inside that folder.

That way, you know you're into correct folder.

OK, I'm gonna killed cleared this Perfect.

Now, the first thing I want to do.

Is this right?

Down and P.

M, innit?

Hit.

Enter.

All right.

And now this is going to create a very important file for your project and is gonna start asking you some questions.

Like your package name.

Right?

I'm gonna enter the version.

I'm gonna enter description.

I'm just gonna hit enter to everything because I don't want to spend time like I'm writing all this down.

But if you're serious and you're creating, like, a very, very good price in a project that you're gonna share with the world, make sure you put this down, all right?

I'm good with that.

Yes.

Enter.

Okay.

And now, if you go back to your project, you will see if this new file Cole package.

Jason.

All right, this file will have everything for this project.

Okay?

So make sure you have a desk there.

That's very important.

And now we're ready to actually use NPM, so let's go ahead.

Go back here.

Let me clear this up.

All right?

I'm gonna just copy.

Go back.

I'm gonna paste it, and I'm gonna hit Enter.

All right, Cool.

If you see these warnings, don't worry about it.

It's because I didn't put in my description.

And, you know, there's a lot of empty field.

All right, so that's not a problem.

So moment.

If you go back, you will see now, note modules, and you've opened that you'll see moment here, which is what we want.

Do not worry about known models right now.

If you don't understand it, there is a link of the script from if you wanna learn more about them.

But you don't have to worry about this folder right now.

There's another file right now.

It's called packet luck, jayson dot Jason.

And this file is important because this is the one does telling every single detail about everything that you're installing.

So if you install moment J moment, um, they're telling your version and all the details about that package, Okay, you don't have to worry about that file right now, but it is important that you have it there.

All right, so now I'm gonna go ahead.

I'm gonna go to moment J s and see the documentation to how we can use it.

All right, so let's go.

Here, let me open this a little bit more.

All right.

I'm gonna click docks were to use it and says no, doctor.

Yes, Perfect.

That's what that's what we did and what we're using.

And here they'll tell you what you need to do.

So we need to add this creative variable.

Would they require moment?

Phyllis, do that.

Do it up here.

All right, Cool.

I'm gonna save it.

And under telling us, use days like woman format.

All right, so after my date is my variable dates created.

I'm just gonna put down here tree a new variable.

Let's call it my cruel date equals two moment and inside moment we're gonna put the date.

Hey.

And then we need to put whatever format we want to.

Let's go back to the website a moment here, and I want to see what format.

So we have all these formats look, and they're telling us, Let me open this will every more.

They're showing us all the formats, every single one.

So let's use something like this.

I, like this one is very clean.

People can understand.

It's just like a double uppercase l l So let's do it.

Save it.

Unless Consul locked my cool date.

All right.

Do this.

Let's reload the page.

Ah, yes.

So now we have an error here Is saying require is not defined.

So this recoil right here, the browser doesn't understand.

What is it like?

What is require.

So if you're a beginner?

No.

J esus a server side technology.

So right now we're using all this in our browser, and it's not gonna work.

So for that, we need something that is going to get our main Js get every all Dakota we have here.

Bundle, create a bundle.

That way, the browser can understand.

We can use something Call browser.

If I which I like a lot, um, you can use something called Wet Pack to which I love.

But for now, we're gonna use process is very easy to do it right now.

And you can see that's telling us browser for unless you require models in the browser.

And, um, all we need to do is installed this right, and he's using NPM.

So let's go ahead and copy.

Open the command line again.

Paste it.

All right.

So now browser fights available for us so we can use it.

So it's closed This and, um Let's go ahead and scroll it a bit down.

So here you can see how we can get our Js file and create a bundle that we can actually use.

So let's copy this.

Let's go here to our comment line and less pays that my fire's called Main Js.

But if yours is called something else, just change it and thats it all.

That's all you need to do.

And it doesn't have to be bundled.

Yes, it can be something else.

So let's hit enter.

All right, let's go back and see if browse.

If I created a bundle in yet here's a new file.

Click on it and you will see a bunch of code here.

Okay?

So you can see that we have all the things that we created And then we have all the code for moment, and we're gonna have here a code for everything.

All right, so all I'm gonna do is go to my index dot html.

I'm gonna go and change it to bundle thought, dear.

Yes.

Okay.

Now let's reload.

And now take a look.

Now is actually working the browser, understand our code.

And now it's like September 23rd.

2018.

Looks a beautiful.

Perfect.

All right, so now let's go ahead and install this unique one.

Right?

So let's go ahead and P.

M let me clear this.

Okay, so am peon insults unique.

Perfect.

Now we have that available for us, so let's go.

The same thing is gonna be a require here.

I'm gonna put it here after them after moment.

And they're giving us an example here from the race.

So what unique is gonna do for us is that if we have a list before, we haven't a rate.

And we have a lot of things there, and we have a lot of a lot of numbers or strings are the same, and we don't want to.

We can use unique.

So let's do it.

Something very, very quick.

Here.

So is the variable eagles.

My list equals two.

These an array 12111 Let's say, for example, we're repeating a lot of wants that we do not want.

So 33456 and then another four out of four and seven.

This is a quick example that we have a lot of numbers here that we do not want.

Right.

And now we can do is I'm gonna put my unique list equals two is gonna be unique and then inside Unique.

I'm gonna just put my list, which is all this, right?

And I'm gonna counsel log my unique list.

And let's see if this works.

I'm going to save it.

And now we need to go and which is, um, something that I don't want to do.

You can actually automate this instead of doing it manually, but for now, I'm doing it manually.

Every time you save Thea's J is fire.

We have to go to your command line and make sure you run this that way.

These bungled yes.

Get created again with your new coat.

Now, you don't have to do it manually.

You can use ah lot of things to automate this That way every time you save this file is done automatically.

Okay, I'm gonna hit Enter.

Perfect.

And now let's reload this page.

All right.

And now we have an array.

1234567 And you can see that we do not have all this wants.