In this video, we're going to try to take a deeper look at 9pm and really understand how we can somehow
interact with it directly, maybe from the browser.
Now, just, you know, at the end of the day, we're not going to be able to directly make use of the
registry.
We're doing all this kind of dependency resolution stuff.
We're going to actually have to use an outside service.
But I still want to go through the process of trying to use NPM just to really understand why it's not
going to work.
So next, couple of videos, not super necessary, maybe just going to watch them rather quickly or
to higher speed, whatever.
Let's just get to it.
So the entire goal here, we need to somehow figure out how to reach over to ESPN NPM and say, I need
a URL that I can use to download all the source code for react.
That's what we really need right now.
Let me show you how we can do that.
In general, over at my terminal, I can open up a new terminal window.
And then inside of here to print out a link that we can go to it to download all the source code for
react, we can write out the command NPM view, react, and we're going to add on to the very end there.
Distractable like so.
This is going to print out a link that we can navigate to to download an archive that contains all the
source code for react, this archive right here is essentially what you are downloading when you run
the NPM install, react command.
So let's try downloading this archive onto our local computer and see what's actually inside of it.
So I'm going to copy that link.
Inside my browser, I'm going to navigate to that address and you'll see that it starts up a download
right away.
I'm going to open up that archive inside of a file browser.
Here it is right here.
And I'm going to finally double click that thing to extract it now, if you're on Windows, you might
have to get some other program to extract this archive.
But if you're on Linux or on Mac OS to be very easily just double click the thing to extract it.
So inside of this archive, which, again, is what we actually get when you do an install of react,
there's a package folder.
And inside, there is all the actual source code for react, let's very quickly open up this directory
inside of our code editor and take a look at some of these different files.
It's going to change into my downloads directory, which is where I just save this thing.
Open up my editor very quickly, here we go.
OK, so here's that package directory inside, there are a couple of different files that might look
a little bit familiar.
There's a package JS on file which has some configuration options or kind of a description of the package
we just downloaded.
So in particular, will, we are told the name of the package version, some other stuff and so on.
The one field inside of here that's very important is the main field, whenever you try to require or
import react, you're bundler is typically going to take a look at this main field right here and use
that to decide what the first file is inside this entire package that it should attempt to process in
this case, Main says indexed.
So whenever you import or require react into a project, the first file that gets included is the index
file right here.
Inside there, you're going to notice some syntax that looks extremely familiar, and this is why we
spent some time just a little bit ago manually doing some bundling with Webberley.
Take a look at what is actually distributed with react.
When you install it into your project, you get back a file that has required statements and module
export statements as well.
Remember, we just saw a little bit ago when we were working with Webberley that Geopark and generally
all bundlers are able to interpret or read these require statements and use them to figure out how to
wire together and how to join up different files into one single file.
So, in other words, if we could somehow just take this index, just file and feed it into its build,
its build can interpret this require statement, it can interpret this model, that expert stuff, and
figure out how to join together all these different files, not only the code that our user is going
to provide to us, like the original import react from react.
But all the other files included inside of this react package.
So our real challenge here is to somehow figure out how to reach out to them, how to somehow figure
out what the main file is inside of a project, how to download that file in this case indexed us and
then feed this file into us, build.
OK, so a lot of stuff going on here, a lot of different challenges.
Let's take a pause right here.
We're going to start some implementation in the next video.
We're going to very quickly see why.
Unfortunately, as I mentioned, we are not going to be able to directly make use of NPM or downloading
these dependencies.
So quick pause right here.
Continue in just a minute.