1
00:00:00,970 --> 00:00:05,710
In this section we're going to open up our code editor and explore our newly created Project.

2
00:00:05,710 --> 00:00:09,880
So I'm going to start up my code editor I'm making use of Visual Studio code.

3
00:00:10,030 --> 00:00:17,410
You can use absolutely any code editor you want inside this course so free free to use Adam or sublime

4
00:00:17,440 --> 00:00:19,630
or Eclipse or whatever it might be.

5
00:00:19,660 --> 00:00:24,220
I would not say that any one editor is better than another for working on reac projects.

6
00:00:24,220 --> 00:00:29,980
In addition in this course you and I are not going to ever depend upon some editor specific feature

7
00:00:29,980 --> 00:00:31,130
in order to get through the course.

8
00:00:31,150 --> 00:00:35,250
So again feel free to use absolutely any editor you want.

9
00:00:35,260 --> 00:00:39,430
Once I had my editor open on then going to open up my project directory.

10
00:00:39,430 --> 00:00:43,400
So here's my newly created GSX X folder right here.

11
00:00:43,470 --> 00:00:48,090
Now inside this folder you'll notice that we have a couple of different files and folders.

12
00:00:48,150 --> 00:00:52,170
These are all automatically generated for us when we just made our project.

13
00:00:52,170 --> 00:00:56,130
I want to take a look at some of the different files and folders here and get a better idea of what

14
00:00:56,130 --> 00:00:57,060
they'll do.

15
00:00:57,450 --> 00:00:58,270
All right.

16
00:00:58,350 --> 00:01:01,560
So just a couple of things we'll go over rather quickly.

17
00:01:01,560 --> 00:01:06,640
First off you'll notice the SIRC directory as sarcy stands for source.

18
00:01:06,780 --> 00:01:10,470
If you open up that folder inside of your code editor right now you'll see that there's already a couple

19
00:01:10,470 --> 00:01:12,050
of different files inside of here.

20
00:01:12,240 --> 00:01:16,900
Again these are all automatically generated by Create racked up over time.

21
00:01:16,920 --> 00:01:20,720
You and I are going to add more and more code to this SIRC directory.

22
00:01:21,120 --> 00:01:25,980
In general we're usually going to delete these automatically generated files inside of your just so

23
00:01:25,980 --> 00:01:30,450
you can understand how to set up a re-act project from complete scratch.

24
00:01:30,450 --> 00:01:34,740
Now of course we're still going to use the Create react up kind of framework in general but we will

25
00:01:34,740 --> 00:01:40,590
not use any of the automatically generated code inside of your next directory.

26
00:01:40,610 --> 00:01:46,320
Is the public directory the public directory right here is going to contain different static files an

27
00:01:46,350 --> 00:01:47,570
example of a static file.

28
00:01:47,570 --> 00:01:54,350
Might be an email file that never changes or an image or maybe music or any other thing that we might

29
00:01:54,350 --> 00:01:57,110
want to serve up from our application.

30
00:01:57,110 --> 00:02:00,770
We'll get a better sense of what we use the public directory for throughout this course.

31
00:02:02,410 --> 00:02:07,570
Next is the node model's directory node modules contains all of the different dependencies that were

32
00:02:07,570 --> 00:02:09,540
installed into our project.

33
00:02:09,550 --> 00:02:16,140
So this consists of those 7300 and 82 dependencies that you just saw at your terminal a moment ago.

34
00:02:16,600 --> 00:02:21,390
Every one of these different folders inside of your represents a different dependency.

35
00:02:21,580 --> 00:02:26,080
You can scroll through this list and get a sense that yeah there's a lot of stuff going on inside of

36
00:02:26,090 --> 00:02:26,900
here.

37
00:02:27,130 --> 00:02:31,660
Now in general you and I are never going to have to manually go into the node modules directory.

38
00:02:31,660 --> 00:02:35,870
It just kind of exists here and we don't really worry about it too much.

39
00:02:35,870 --> 00:02:38,570
Next up is the package chase on file.

40
00:02:38,570 --> 00:02:40,570
The package such chase on file right here.

41
00:02:40,640 --> 00:02:43,690
List out all the different dependencies that our project requires.

42
00:02:43,730 --> 00:02:46,770
And it also has a little bit of project configuration side of it.

43
00:02:46,850 --> 00:02:53,030
Over time you and I are going to do several updates to the package that is on file next a very similarly

44
00:02:53,030 --> 00:02:58,280
named file package lock Esan use package lock right here.

45
00:02:58,280 --> 00:03:03,770
This file it records the exact version of all of the dependencies that we installed into our project.

46
00:03:03,770 --> 00:03:06,940
So inside the package lock you'll see this dependency section right here.

47
00:03:07,160 --> 00:03:11,020
And if you scroll down you'll see that there are a tremendous number of records.

48
00:03:11,030 --> 00:03:18,940
Again this consists of the 7500 and 82 different dependencies that we installed into our project.

49
00:03:19,010 --> 00:03:24,850
And then there's the read me file the Rimi file has some directions in it to tell you how to run this

50
00:03:24,920 --> 00:03:27,190
create re-act up generated project.

51
00:03:27,200 --> 00:03:29,860
So if you want to you could definitely take a look at what's inside of your.

52
00:03:29,900 --> 00:03:33,020
But in general I'm going to tell you everything you need to know.

53
00:03:33,080 --> 00:03:36,720
There's one last file inside of your at the get ignore file.

54
00:03:36,830 --> 00:03:41,570
Ignore file is a reference to the get version control system and essentially it lists out the different

55
00:03:41,570 --> 00:03:47,900
files and folders that get should ignore if it's going to be tracking our project and maintaining a

56
00:03:47,900 --> 00:03:50,910
record of all the different changes we're making to our codebase.

57
00:03:51,230 --> 00:03:51,630
Okay.

58
00:03:51,640 --> 00:03:52,170
So that's it.

59
00:03:52,190 --> 00:03:52,970
That's what we get.

60
00:03:52,970 --> 00:03:56,260
By default when we generate a project with Create we act up.

61
00:03:56,270 --> 00:03:57,680
Now let's take a quick pause right here.

62
00:03:57,740 --> 00:04:01,490
When we come back the next section we're going to finally start writing out some code inside of our

63
00:04:01,490 --> 00:04:05,750
S or C directory in getting a better idea of how GSX works.

64
00:04:05,780 --> 00:04:07,540
So quick Balsall I'll see you in just a minute.