1
00:00:01,200 --> 00:00:05,010
In this video, we're going to try to take a deeper look at 9pm and really understand how we can somehow

2
00:00:05,010 --> 00:00:07,680
interact with it directly, maybe from the browser.

3
00:00:07,950 --> 00:00:12,240
Now, just, you know, at the end of the day, we're not going to be able to directly make use of the

4
00:00:12,540 --> 00:00:13,070
registry.

5
00:00:13,290 --> 00:00:15,630
We're doing all this kind of dependency resolution stuff.

6
00:00:15,850 --> 00:00:17,850
We're going to actually have to use an outside service.

7
00:00:18,120 --> 00:00:23,010
But I still want to go through the process of trying to use NPM just to really understand why it's not

8
00:00:23,010 --> 00:00:23,640
going to work.

9
00:00:24,130 --> 00:00:28,920
So next, couple of videos, not super necessary, maybe just going to watch them rather quickly or

10
00:00:28,920 --> 00:00:30,390
to higher speed, whatever.

11
00:00:30,390 --> 00:00:31,160
Let's just get to it.

12
00:00:31,830 --> 00:00:38,070
So the entire goal here, we need to somehow figure out how to reach over to ESPN NPM and say, I need

13
00:00:38,070 --> 00:00:41,130
a URL that I can use to download all the source code for react.

14
00:00:41,370 --> 00:00:42,600
That's what we really need right now.

15
00:00:43,110 --> 00:00:44,100
Let me show you how we can do that.

16
00:00:44,100 --> 00:00:48,060
In general, over at my terminal, I can open up a new terminal window.

17
00:00:50,220 --> 00:00:55,470
And then inside of here to print out a link that we can go to it to download all the source code for

18
00:00:55,470 --> 00:01:02,910
react, we can write out the command NPM view, react, and we're going to add on to the very end there.

19
00:01:03,360 --> 00:01:05,910
Distractable like so.

20
00:01:06,870 --> 00:01:11,850
This is going to print out a link that we can navigate to to download an archive that contains all the

21
00:01:11,850 --> 00:01:16,800
source code for react, this archive right here is essentially what you are downloading when you run

22
00:01:16,800 --> 00:01:18,960
the NPM install, react command.

23
00:01:19,740 --> 00:01:24,060
So let's try downloading this archive onto our local computer and see what's actually inside of it.

24
00:01:24,910 --> 00:01:26,010
So I'm going to copy that link.

25
00:01:27,630 --> 00:01:32,010
Inside my browser, I'm going to navigate to that address and you'll see that it starts up a download

26
00:01:32,010 --> 00:01:32,630
right away.

27
00:01:37,000 --> 00:01:40,570
I'm going to open up that archive inside of a file browser.

28
00:01:44,070 --> 00:01:44,850
Here it is right here.

29
00:01:45,920 --> 00:01:50,240
And I'm going to finally double click that thing to extract it now, if you're on Windows, you might

30
00:01:50,240 --> 00:01:52,940
have to get some other program to extract this archive.

31
00:01:53,180 --> 00:01:57,650
But if you're on Linux or on Mac OS to be very easily just double click the thing to extract it.

32
00:01:58,700 --> 00:02:03,680
So inside of this archive, which, again, is what we actually get when you do an install of react,

33
00:02:03,860 --> 00:02:05,120
there's a package folder.

34
00:02:06,130 --> 00:02:11,800
And inside, there is all the actual source code for react, let's very quickly open up this directory

35
00:02:11,800 --> 00:02:14,650
inside of our code editor and take a look at some of these different files.

36
00:02:16,680 --> 00:02:20,970
It's going to change into my downloads directory, which is where I just save this thing.

37
00:02:24,190 --> 00:02:26,790
Open up my editor very quickly, here we go.

38
00:02:29,280 --> 00:02:33,870
OK, so here's that package directory inside, there are a couple of different files that might look

39
00:02:33,870 --> 00:02:34,560
a little bit familiar.

40
00:02:34,860 --> 00:02:40,470
There's a package JS on file which has some configuration options or kind of a description of the package

41
00:02:40,470 --> 00:02:41,250
we just downloaded.

42
00:02:41,610 --> 00:02:46,620
So in particular, will, we are told the name of the package version, some other stuff and so on.

43
00:02:47,490 --> 00:02:53,130
The one field inside of here that's very important is the main field, whenever you try to require or

44
00:02:53,130 --> 00:02:58,740
import react, you're bundler is typically going to take a look at this main field right here and use

45
00:02:58,740 --> 00:03:04,710
that to decide what the first file is inside this entire package that it should attempt to process in

46
00:03:04,710 --> 00:03:06,650
this case, Main says indexed.

47
00:03:07,710 --> 00:03:13,560
So whenever you import or require react into a project, the first file that gets included is the index

48
00:03:14,070 --> 00:03:14,820
file right here.

49
00:03:15,720 --> 00:03:21,240
Inside there, you're going to notice some syntax that looks extremely familiar, and this is why we

50
00:03:21,240 --> 00:03:25,410
spent some time just a little bit ago manually doing some bundling with Webberley.

51
00:03:25,830 --> 00:03:28,680
Take a look at what is actually distributed with react.

52
00:03:28,680 --> 00:03:34,560
When you install it into your project, you get back a file that has required statements and module

53
00:03:34,560 --> 00:03:36,030
export statements as well.

54
00:03:37,230 --> 00:03:42,180
Remember, we just saw a little bit ago when we were working with Webberley that Geopark and generally

55
00:03:42,180 --> 00:03:48,780
all bundlers are able to interpret or read these require statements and use them to figure out how to

56
00:03:48,780 --> 00:03:52,770
wire together and how to join up different files into one single file.

57
00:03:53,370 --> 00:03:59,940
So, in other words, if we could somehow just take this index, just file and feed it into its build,

58
00:04:00,270 --> 00:04:05,790
its build can interpret this require statement, it can interpret this model, that expert stuff, and

59
00:04:05,790 --> 00:04:11,340
figure out how to join together all these different files, not only the code that our user is going

60
00:04:11,340 --> 00:04:13,890
to provide to us, like the original import react from react.

61
00:04:14,130 --> 00:04:17,850
But all the other files included inside of this react package.

62
00:04:18,779 --> 00:04:25,530
So our real challenge here is to somehow figure out how to reach out to them, how to somehow figure

63
00:04:25,530 --> 00:04:32,970
out what the main file is inside of a project, how to download that file in this case indexed us and

64
00:04:32,970 --> 00:04:35,610
then feed this file into us, build.

65
00:04:37,070 --> 00:04:39,950
OK, so a lot of stuff going on here, a lot of different challenges.

66
00:04:40,580 --> 00:04:41,880
Let's take a pause right here.

67
00:04:42,080 --> 00:04:44,300
We're going to start some implementation in the next video.

68
00:04:44,510 --> 00:04:45,920
We're going to very quickly see why.

69
00:04:45,920 --> 00:04:51,410
Unfortunately, as I mentioned, we are not going to be able to directly make use of NPM or downloading

70
00:04:51,410 --> 00:04:52,280
these dependencies.

71
00:04:52,700 --> 00:04:53,800
So quick pause right here.

72
00:04:53,840 --> 00:04:54,860
Continue in just a minute.