Placeholder Image

Subtitles section Play video

  • What's going on?

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

  • And this extra three and this extra force we don't happen so bad.

  • Sickle thing about all this packages and known model that you can use for your project.

  • And that's it.

  • Thank you so much for washing half a beautiful day.

  • Bye bye.

What's going on?

Subtitles and vocabulary

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