1
00:00:02,000 --> 00:00:04,000
Now this project, which was created for us

2
00:00:04,000 --> 00:00:07,000
has a couple of starting files which we don't need here

3
00:00:07,000 --> 00:00:09,000
for example, a file for automated tests

4
00:00:09,000 --> 00:00:11,000
that is something which I covered

5
00:00:11,000 --> 00:00:14,000
in my complete guide course but we don't need it here.

6
00:00:14,000 --> 00:00:18,000
So, I'll get rid of that file and also of the logo.svg,

7
00:00:18,000 --> 00:00:22,000
reportWebVitals.js, setupTests.js and App.css.

8
00:00:22,000 --> 00:00:25,000
If you got more files you can get rid of those as well

9
00:00:25,000 --> 00:00:28,000
you should be left with an index.js, App.js

10
00:00:28,000 --> 00:00:30,000
and the index.css file thereafter.

11
00:00:31,000 --> 00:00:35,000
Now in index.js I will get rid of that

12
00:00:35,000 --> 00:00:40,000
import of reportWebVitals and I'll explain these imports

13
00:00:40,000 --> 00:00:42,000
in greater detail in a second

14
00:00:42,000 --> 00:00:45,000
for the moment let's just focus on cleaning up

15
00:00:45,000 --> 00:00:47,000
and I'll get rid of that code down there

16
00:00:47,000 --> 00:00:50,000
and I'll get rid of React.StrictMode because for the moment

17
00:00:50,000 --> 00:00:52,000
for getting started it is simpler

18
00:00:52,000 --> 00:00:54,000
if we just get started like this.

19
00:00:55,000 --> 00:00:58,000
In index.css I'll get rid of all that code as well

20
00:00:58,000 --> 00:01:01,000
we're going to add different CSS code soon.

21
00:01:01,000 --> 00:01:04,000
And then App.js they're all getting rid of

22
00:01:04,000 --> 00:01:06,000
these two imports at the top

23
00:01:06,000 --> 00:01:10,000
and then of all the content here in this return statement

24
00:01:10,000 --> 00:01:12,000
all this HTML code.

25
00:01:12,000 --> 00:01:16,000
For the moment, we can just add a simple div here

26
00:01:16,000 --> 00:01:17,000
where we say hello.

27
00:01:19,000 --> 00:01:22,000
Now we can save that and that's now the starting set up

28
00:01:22,000 --> 00:01:24,000
with which I wanna get started.

29
00:01:24,000 --> 00:01:28,000
You'll also find this starting project snapshot attached

30
00:01:28,000 --> 00:01:31,000
to this video so that you can also download it from there

31
00:01:31,000 --> 00:01:33,000
and get started with that.

32
00:01:33,000 --> 00:01:36,000
If you do download my attached snapshot though,

33
00:01:36,000 --> 00:01:39,000
there's one important step you must not miss

34
00:01:39,000 --> 00:01:41,000
and you have to go through.

35
00:01:41,000 --> 00:01:45,000
You have to install third party dependencies of this project

36
00:01:45,000 --> 00:01:49,000
because since it is a bit of a more complex project setup

37
00:01:49,000 --> 00:01:53,000
working with third party packages like the React project

38
00:01:53,000 --> 00:01:56,000
works a little bit differently here.

39
00:01:56,000 --> 00:01:58,000
We got this package.json file

40
00:01:58,000 --> 00:02:01,000
which lists all the dependencies of this project.

41
00:02:01,000 --> 00:02:04,000
And there we for example, see the React library

42
00:02:04,000 --> 00:02:08,000
and another package which is part of the react library

43
00:02:08,000 --> 00:02:11,000
which are listed as dependencies.

44
00:02:11,000 --> 00:02:13,000
Now, these dependencies are managed

45
00:02:13,000 --> 00:02:17,000
and installed automatically for us and the big code bundle

46
00:02:17,000 --> 00:02:21,000
with our code and that third-party library code

47
00:02:21,000 --> 00:02:24,000
will be generated automatically behind the scenes

48
00:02:24,000 --> 00:02:29,000
by those build steps which exist in this project as well

49
00:02:29,000 --> 00:02:32,000
those are brought in by that react-scripts package.

50
00:02:32,000 --> 00:02:36,000
Now I am aware that this silence fairly overwhelming

51
00:02:36,000 --> 00:02:37,000
and complex right now,

52
00:02:37,000 --> 00:02:39,000
especially if you've never worked

53
00:02:39,000 --> 00:02:41,000
with anything like React before

54
00:02:41,000 --> 00:02:44,000
and you're used to standard setups

55
00:02:44,000 --> 00:02:45,000
where you have an HTML file

56
00:02:45,000 --> 00:02:47,000
and a bunch of JavaScript imports

57
00:02:47,000 --> 00:02:50,000
but we can ignore all of that for the moment.

58
00:02:50,000 --> 00:02:52,000
We just add dependencies here

59
00:02:52,000 --> 00:02:57,000
and we can then import them into our JavaScript files

60
00:02:57,000 --> 00:02:59,000
that's what you see here with those

61
00:02:59,000 --> 00:03:01,000
strange import statements

62
00:03:01,000 --> 00:03:03,000
and then this build step

63
00:03:03,000 --> 00:03:06,000
which is part of this project set up which is started

64
00:03:06,000 --> 00:03:09,000
when we run one of these scripts like npm start

65
00:03:09,000 --> 00:03:11,000
which we did before.

66
00:03:11,000 --> 00:03:14,000
These scripts will then in the end combine

67
00:03:14,000 --> 00:03:17,000
and transform all the code and combine

68
00:03:17,000 --> 00:03:19,000
the third party package code with our code

69
00:03:19,000 --> 00:03:22,000
and make sure that the result is an output

70
00:03:22,000 --> 00:03:24,000
which the browser understands.

71
00:03:24,000 --> 00:03:26,000
Now, because we have that setup,

72
00:03:26,000 --> 00:03:28,000
if you download my attachment

73
00:03:28,000 --> 00:03:31,000
you need to run one extra command

74
00:03:31,000 --> 00:03:33,000
before everything here will work for you.

75
00:03:33,000 --> 00:03:36,000
And for this it's best if you open the terminal

76
00:03:36,000 --> 00:03:39,000
or command prompt which is integrated

77
00:03:39,000 --> 00:03:43,000
into Visual Studio Code with new terminal

78
00:03:43,000 --> 00:03:46,000
which is your standard operating system terminal

79
00:03:46,000 --> 00:03:50,000
or command prompt just already integrated into this IDE

80
00:03:51,000 --> 00:03:53,000
and any commands we run here

81
00:03:53,000 --> 00:03:57,000
are then automatically executed in this project folder.

82
00:03:57,000 --> 00:04:00,000
And here you need to run the npm install command

83
00:04:00,000 --> 00:04:03,000
which will simply download all those dependencies

84
00:04:03,000 --> 00:04:07,000
this project has and store them in this node_modules folder

85
00:04:07,000 --> 00:04:09,000
which we have here.

86
00:04:09,000 --> 00:04:12,000
That's a folder in which we will never work

87
00:04:12,000 --> 00:04:16,000
because that holds all these third party dependencies

88
00:04:16,000 --> 00:04:20,000
and they are dependencies which our project needs.

89
00:04:20,000 --> 00:04:22,000
So, that's a folder which is here

90
00:04:22,000 --> 00:04:24,000
but which was not part of the attached code

91
00:04:24,000 --> 00:04:26,000
because it's a fairly large folder

92
00:04:26,000 --> 00:04:30,000
and hence the attachment would be unnecessarily big

93
00:04:30,000 --> 00:04:33,000
and you can simply recreate it by running npm install

94
00:04:33,000 --> 00:04:38,000
in that folder that has this package.json file

95
00:04:38,000 --> 00:04:40,000
so that's why we need to do that then.

96
00:04:40,000 --> 00:04:42,000
And there after you can run npm start again

97
00:04:42,000 --> 00:04:44,000
to bring up that's development server.

98
00:04:44,000 --> 00:04:48,000
And I will do that here again and for this I'll go to the

99
00:04:48,000 --> 00:04:51,000
Albert terminal where I run it npm start before

100
00:04:51,000 --> 00:04:55,000
and I'll quit this process with controlled C now.

101
00:04:55,000 --> 00:04:58,000
Now, as long as you don't quit that process

102
00:04:58,000 --> 00:05:00,000
the development server is up and running

103
00:05:00,000 --> 00:05:02,000
and listening to code changes

104
00:05:02,000 --> 00:05:04,000
to then displayed them in the browser.

105
00:05:04,000 --> 00:05:07,000
You can quit this server whenever you're done

106
00:05:07,000 --> 00:05:11,000
with development for today and then you simply restart it

107
00:05:11,000 --> 00:05:14,000
with npm start again if you wanna pick up development again

108
00:05:14,000 --> 00:05:18,000
but now I'm not restarting it in this standalone terminal

109
00:05:18,000 --> 00:05:20,000
but instead in this integrated terminal

110
00:05:20,000 --> 00:05:24,000
which has already navigated into my project folder

111
00:05:24,000 --> 00:05:26,000
and the advantage of starting it here

112
00:05:26,000 --> 00:05:29,000
is that I will always immediately see any errors

113
00:05:29,000 --> 00:05:34,000
that might occur if I have an error in my code for example.

114
00:05:34,000 --> 00:05:38,000
And that's well started here zoom out a bit

115
00:05:38,000 --> 00:05:41,000
make this a bit smaller and keep that up and running

116
00:05:41,000 --> 00:05:43,000
as long as I'm developing.

117
00:05:43,000 --> 00:05:46,000
So don't close the terminal, don't run control C here,

118
00:05:46,000 --> 00:05:48,000
keep it up and running.

119
00:05:48,000 --> 00:05:52,000
And if you do that and you go back to localhost 3000

120
00:05:52,000 --> 00:05:55,000
and reload, you should just see hello there

121
00:05:55,000 --> 00:05:58,000
because of our cleanup process.

122
00:05:58,000 --> 00:06:01,000
Now that was a lot of work just to get started

123
00:06:01,000 --> 00:06:04,000
but I am a big fan of having a clean start

124
00:06:04,000 --> 00:06:06,000
and explaining what's going on here

125
00:06:06,000 --> 00:06:09,000
instead of just throwing code at you

126
00:06:09,000 --> 00:06:12,000
and leaving it up to you to figure out what's happening.

127
00:06:12,000 --> 00:06:14,000
That's the project set up we're dealing with

128
00:06:14,000 --> 00:06:17,000
that's my ID and that's the cleaned up project

129
00:06:17,000 --> 00:06:19,000
which you all to find attached.

130
00:06:19,000 --> 00:06:22,000
and therefore now, let's start writing our own code

131
00:06:22,000 --> 00:06:25,000
and let's understand these different React features

132
00:06:25,000 --> 00:06:29,000
and this strange syntax here step-by-step.