All language subtitles for 039 Latest React Package Updates_en

Hello, everyone, and welcome back.

This is actually you are from the future, taking a quick little detour in our currently scheduled course

outline to mention how you can update your packages.

So because I'm in the future, the version of react that I'm seeing that just got released is different

from the version that we are using throughout this course right now.

Right now, the latest version is sixteen point ten point two as of the time of the recording of this

video.

In the course, though, the version of Riak that we're using is sixteen point eight point six.

It's a very minor version change, but there are a couple of new things that came out in that react

version.

But even then, I think it's important to understand how we can update our packages as well as see some

other issues that might come up that are very easy to resolve.

I'm going to show you in this lesson how you can do so with both yarn or NPM as your main package manager.

But we're going to start with yarn first.

So the first thing to do is check what version of whatever packages that you want to upgrade are that

you are currently running.

The easiest way to do so is simply using inside of your terminal yarn list.

So if you type in your own list and then the name of the packages.

So for me, I'm checking out, react, react, dom and react scripts.

I will see that react and react at sixteen point eight point six and react scrips as three point zero

point oh I know that react and react can be upgraded to sixteen point ten point two, which is the latest

version, and reacts grips to three point two point zero.

Now, instead of directly modifying the value here, there's another thing that we can do to make sure

that whenever we either want to upgrade, we can always use the latest version.

Now, the way to do that is simply to go to our package that Jason.

Inside of our project, so inside of our package that Jason.

You'll see that I have inside of these two dependencies for react and react, Dom, sixteen point eight

point six and sixteen point eight point six and three point eight point O.

So if you have used create react app to create your application, as you've been following on this course,

you may see that there's this little carrot symbol in front of your version.

All that means is that this is a rule that tells whatever package manager we're using, whether it be

Yana AMPM, whenever it sees NPM upgrade or yarn upgrade to update to the latest stable non breaking

version.

So if you see this carrot, then you see that whenever you installed your package, even if it's sixteen

point eight point six, it will try and get the latest version.

In my case, though, because I did not have it, whenever I run yarn, install or NPM install, it

will find just the exact version, which is sixteen point eight point six.

So I'm just going to add this carrott in.

To all these locations here, here and here, and what this will now do is whenever I run yarn upgrade,

it will try and upgrade with these new rules.

The issue that you will encounter if you change your package, thought Jason, and then try to simply

run yarn upgrade.

Is that you will see that you have an outdated lock file.

Please Runyan song and try again, this is perfectly fine.

All this means is that you're upgrading is not going to work here because we updated the rules in our

package that Jason, when we added that carrot, instead, we have to run yarn install instead.

Now, while this is installing this is actually a good time to take a look at this lock file that gets

mentioned, because I'm sure some of you may or may not have noticed that there is a yarnold lock or

a package thought lock inside of your application folder.

So what is this lock file?

On this lock file is it is an auto generated file by either NPM or Yorn that locks the version of all

the packages inside of our application within a specific range based on the rules that we set inside

of package.

Jason.

So the rules being simply what we saw here as our version number.

If I use this carrot, it's saying that I want it to be at least sixteen point eight point six or greater,

but not breaking.

What that means is that when we had it before without this carrot, the yarn lock file was generated,

saying that the version of react and react, dom and react scripts are locked to exactly that version.

Now that we've added this carrot, it gives more flexibility, which means the yarn lock is out of date

and needs to be updated.

And this lock file only updates whenever you run yarn and stall.

So why do we need a lock for the lock?

File is simply there so that if multiple people are working on this application, they are all using

versions of these dependencies that don't conflict with each other because maybe somebody is running

Riak 17, someone is running Riak 16, and there is a difference in features that might be breaking

in the application.

That yard lock file just ensures that everybody is using a consistent version of these dependencies.

But with that, after we ran your store, we generated a new lock file and from now on you can simply

run your upgrade whenever you want to upgrade these dependencies.

And we can just double check to make sure the version of these packages that we got are updated.

So if I run your list, react, react and react scrips.

I'll see that they're now at sixteen point ten point two for react and react as well as they point to

point overreact scripts.

So with this, I have now updated my packages to the latest version.

Now let's see how we do this in NPM.

So here I have a separate repository that is a complete clone of our last repository, the only difference

is that in this one I'm using NPM as my package manager instead of yarn.

All I have to do in order to update these packages is run NPM update.

The main difference here is that NPM update will force the versions to update to their latest versions.

However, it's still good to be explicit in our rules and package JSON so that we know what kind of

versioning we want to do.

So first, let's just check what versions we have actually installed for react, react to them and react

scripts instead of yarn list.

We use NPM list and then we type out the actual package names the same way.

I got a typo there.

So here with this, it's just like yarn before we see that our versions are sixteen point eight point

six four react and react and three point zero point zero four react scripts.

So in order to update this, we can go into our package that Jayson and we can add Tilde in front of

react, react and react scripts just to be explicit.

And then we simply run NPM update.

One thing I want to note is that even if you don't add the tilde, it will update the version numbers

and it will overwrite your package, that JSON file to show the latest version.

So NPM update and NPM install are both a little different because NPM install sometimes will skip over

certain versions if it doesn't see that it's a major update.

The safest way to make sure that you actually do update all your versions if you want to is run npm

update.

It takes a little longer.

So let's just fast forward through the section.

So here we'll see already that it's told us that it's updated.

React on to sixteen point ten point to react scripts, the three point two point O and react to sixteen

point ten point two.

Now, you'll also see down here that it says found zero vulnerabilities.

So what our vulnerabilities you might see this number change sometimes, whether you see it as a warning

in your GitHub or maybe when you do something with your NPM, it'll show you that there's certain vulnerabilities.

Vulnerabilities are essentially at these minor security concerns.

Sometimes they're major, most of the time they're minor.

That has to do with either a dependency that you have installed or a dependency that your packages depend

upon, that you yourself don't know that you also installed.

So, for example, REACT probably has something like 60 other packages that it depends upon.

And one of those might have a security concern.

The easiest way to actually fix this inside of NPM is to run NPM Audit Fix, and this command will go

through and update the versions to a version of a package where it doesn't have the security concern

anymore.

Unfortunately, with yarn, this is not so easy while yarn does have access to a yarn audit.

All it will do is will audit all of the packages as well as those packages, dependency packages, to

see if there's any vulnerabilities and any of them, if it does, it will list them to you and show

you at what severity.

But for you to actually update it, there's no such easy command as NPM audit fix in Yade.

Well, you'll have to do is manually install and upgrade all of those packages that you see with a vulnerability

if you do use yarn as your main package manager.

So that's just one thing to highlight as the main difference between NAPM and yarn, as well as how

the commands work.

So hopefully with this you now know how to update your packages, whether you're using yarn or NPM,

as well as fixed security vulnerabilities.

And with that, good luck and I'll see everyone in the next lesson.