All language subtitles for 009 Project Files + Modules_en

Hey, it's Andre here.

Before we move on, I want to make sure that we understand some of the files and also what we did in

the previous video with some conflicts that we had, especially installing notes, says what really

happened there?

First off, when we start a project, we always have a node modules folder that comes built in with

a reactor.

Now, this node modules folder is quite massive.

As you can see, we have a ton of packages.

These are all the libraries that create reactor app uses underneath the hood.

You remember the reactor scripts.

If we go all the way down to package Dodgson, you see that we have all these dependencies, but all

of them are using the script star James like.

So now EQR uses yarn versus what I use, which is NPM.

And you see over here that we have different versions instead of our yarn log file, for example, have

the package log file, so why you use is up to you.

The key thing to remember is that node modules contains not only all the libraries that we're going

to install throughout the course, but also libraries that create react up uses underneath the hood,

like the just package, which allows us to do some testing.

Now, the thing is, all these packages seems like a lot.

And what Kery racked up tries to do is to create an idea like environment.

That is, it allows us to do testing Lanting and all these things.

And most of these packages are only used during development when we actually ship our code and we build

our code.

Most of these packages won't make it through.

Only the code that is absolutely needed for the app and not for development are going to be included

in this bill.

So some people complain that this node modules folder is way too big, but at the end of the day, it's

big because Create React app tries to make our environment for developing apps pleasant.

Now, the issue that we saw with Node SACE happened because of this package just.

But let's talk about that a little bit more, because as you develop apps, as you work with react,

you're going to encounter this issues of dependency and dependency management between libraries is a

big problem.

So.

Now.

React, since Version 2.0 comes with SAS support, which we saw, all we had to do was install node

SAS using NPM Orien and we're able to use SAS files so that create react, uptakes our SAS files, convert

them into CSFs, into that built folder.

But what happened when we installed this?

The air that you saw with IWA is something that you'll encounter as you work with react.

So I'm going to show you how to better understand the issue.

See, the first thing I would do if I encounter a problem like that is I would Google for it, for example,

notes Asara with racked up Bable just conflict, which was what the error we got.

And if I go to the second link here, which says Riak scripts, Bable just versioned conflict, which

sounds like the conflict that we're having.

And right over here, as we expected, it's an open issue with a reactor where reactor scripts Bable

just version is complicated.

And as a developer, you want to start getting good at finding these issues and going to GitHub repositories

and see if anybody else has had this issue with you.

And it looks like this person had pretty much the same issue that we saw.

So the beauty is that you can actually read through this, I understand why the issue is happening,

how you can fix it and what other people have done if you actually scroll all the way down.

You can see that this issue should be resolved when this is released.

So we click over here and we see that, yeah, maybe ACTTAB just merged on May 7th, which isn't that

far off from what I'm recording this video, a fix for this so that this issue doesn't happen.

So most likely by the time you're watching this video, you won't encounter this.

But I want you to start thinking in terms of if you encounter an issue, most likely somebody else has

had it.

So Google it around.

And usually in a project like create react up, you'll find open issues.

You have three hundred and three issues open right now and eighty five people requests.

So you want to start getting good at that.

Now, another thing I want to talk about.

Is this package lock file if you're using yarn?

It'll be a yarn lock file.

This is used because our project most likely won't run on our computer.

Most likely we're going to once we're done with the project, we're going to send it off to a server

somewhere.

So that project runs on a different computer.

When a user opens the app on a browser, it runs on their computer.

So our code, although when we code along, is in our own environment, on our own laptop.

In real life, when people actually use your app, they won't be using it from your computer, right?

So package lock files allow us to have consistent installs across machines so that all these dependencies

have the exact version number that they need in order for everything to work.

It's like everything is intertwined.

This file is what we use or at least what create, react app uses.

So it knows exactly what dependencies and what thing works with what.

Just like we have Bable, just that was needed for both nosers as well as for that create react app

because both of them use it to test their code.

Now in a couple of videos, we'll actually see how it solves this problem another way, using something

called the resolution property.

And this is something that's only specific to yarn.

So if you have NPM that isn't available for you, but again, that's just something that you most likely

won't encounter.

But we wanted to show you anyway.

Remember, you can always read more about these things at the website documentation, you want to start

getting really, really good at debugging your own code.

Finally, the last file I want to talk about is this file that we just removed, which was service worker.

Now, this comes pre-built with racked up.

And it's mainly used for what we call progressive web apps, and we're going to talk about that later

on in the course.

Service worker file allows us to make our app what we call progressive again.

For now, we don't need to worry about this.

But I do want to let you know that we are going to come back to it and talk about what service worker

is doing because it has some really neat features.

All right, that's it for now after the next video.