All language subtitles for 016 React 17_ Updating Packages + Latest Version Of React_en

Hello, everyone, and welcome back.

In this video, I'm going to show you how you can update the packages that your project depends on to

the latest versions.

I'm going to show you with our Final Monsters Rolodex project where I will update, react and react,

Dom, to the latest versions, as well as any dev dependencies that they have.

And the steps are very easy and you can reproduce them whenever you need to update your libraries in

your projects.

So to start, I'm going to close down the final completed version of our Monsters Rolodex project.

You can do this with an existing project if you don't want to clone one down and let's say you have

a local one that you just want to update, the steps are going to remain the same.

But I want to show you with a fresh cloned project as well.

So what I'm going to do is I'm going to copy down the link and I'm going to switch into my terminal

and then clone down the project.

So once you have the project down, let's just cut into it, I do want to mention a couple of things.

Depending on the project that you closed down, you may already have a lock file in this particular

case.

If we look at unless we see we already have a yard lock file in this particular example, I want to

show everyone how to do it with NPM.

So if there exists a yarn lock file already, we can just remove this lock file.

In this particular case, this works because we are planning on updating all of our packages anyways.

These lock files tell our package what versions are currently locked to the project.

But if we're seeking to update all of these versions anyways, it does not matter.

In this particular case.

I also want to use NPM and if we come up with a package lock file, which is the NPM version of the

lock file, then these two things might cause conflict.

So this is one thing you always want to think about when you clone down a new project.

So here I have our project.

We have no dependencies installed yet and our John Lock File just got removed.

In this particular case, what we want to do is we want to run NPM update D.

So here what we're saying is I want to update all of the existing dependencies.

If you are using a project that already exists in my case, because it is a newly clone project, there

are no existing dependencies yet.

Update we'll still install any projects or dependencies that don't exist.

So Dashty here is also going to give me all of the dev dependencies.

So when I run this, it could take a little bit of time.

So let's just fast forward through this.

So here we have finished installing or updating our respective packages, you may notice that down here

you'll see that there were five vulnerabilities or however many vulnerabilities when you run it.

This just means that there might be some versions that are insecure of the packages that you installed

or there might be other issues.

The great thing about our package manager, whether it be NPM or yarn, is that they can fix this.

So here are NPM actually tells us exactly what to do.

We just run NPM audit fix.

Sometimes when you run this command, though, you may get some type of error involving your package

lock.

So here we got that error.

It says that something was found to be wrong with our package locked JSON.

We want to run NPM install so we can fix them.

So once again, very easily we can just npm install and we're going to go through that whole thing again.

So let's just fast forward to this part as well.

And here we'll see that we have once again finished our install any of those particular issues that

came, we tried to run NPM out to fix the first time we're going to be resolved, but you'll notice

that we still have our five vulnerabilities.

So here once again, if we run NPM audit fix, this should now work and get rid of those problems.

This process of auditing might also be quite extensive because there's so many different packages that

we have installed through any of our major packages like react and react, Dom.

But what we're doing here is we're essentially trying to fix any of these issues.

So walking through the steps that we just went through, the first thing we did is we said, let's upgrade

all of our package versions.

Once they're upgraded, there might be some dependency issues and vulnerabilities which were highlighted

to us.

So what we're doing now is we're saying, OK, take all of those vulnerabilities, NPM and I want you

to fix them to the best that you can.

Maybe change semantic versions to versions that still work with our given updated versions of our packages

that we want.

But make sure that you give us versions of it that don't have these problems.

And NPM will know how to do all of this for us, which is the great thing about using these package

managers.

So it's going through these steps and now we're done.

We'll see that all five of the five different vulnerabilities were fixed.

And if we run NPM audit, we'll see that there are no vulnerabilities.

So now that we've updated all of our packages and we have the latest versions, what we can do now is

just run, npm start.

So let's just start a project and make sure that everything is working as it should be.

And we can see that our monstrous Rolodex is completely working here, and if you want to double check

to make sure you have the right versions, all we need to do is just open up our project.

So here I'm going to make a new tab and have our server running on the other tab and just open up this

project.

And what we want to do is go to the lock file inside of the lock file.

Remember, this log file tells us what versions of our packages were currently tied to.

So if you go find the react or the React Dom library in this particular case, you'll see here that

we have the latest version, which is exactly what we want.

So this means that all of our projects and all of our packages are now updated to their correct version.

And this is all we need to do.

One last thing that I do want to mention is that due to a recent change, perhaps the master branch

of your project is now called the main branch.

In our particular case, you'll see that mine is still called the master branch.

So this is just something that might have not been updated yet with my project, but GitHub is rolling

out this change.

So one last thing that we might want to do now that we've made all of these updates is just to push

up the latest version that we've updated to our remote repository on GitHub.

So what I'm going to do is I'm just going to say get add a.

Get Kimmitt

updated our packages to latest version removed and fixed any vulnerabilities.

And then I'm just going to get push.

And now if we go back to our project and we refresh.

We'll see that we updated some of our different problems a couple of seconds ago, so here this is all

we need to do to update all of our packages.

I've also linked in your resources folder for this video, our final project.

When it comes to the Crown Clothing Project, I have the front end link for you so you can clone it

down and practice what you've just learned with me here.

You can do it with yarn or you can do with NPM.

Just practice it and update the latest version of React and React Dom or any of the other dependencies

that we have in that project.

If you want to try it out, you can also do it with your local version as well.

You don't necessarily have to do it with a freshly clone project, but I've included the link for you

just in case you want to practice.

But that's it.

That's all you need to know when it comes to updating packages.