1
00:00:02,000 --> 00:00:04,000
So here I am now in my brand new project

2
00:00:04,000 --> 00:00:05,000
which I created

3
00:00:05,000 --> 00:00:07,000
using that starting snapshot,

4
00:00:07,000 --> 00:00:10,000
which was also attached to the last lecture.

5
00:00:10,000 --> 00:00:11,000
So that you can simply

6
00:00:11,000 --> 00:00:13,000
download that starting snapshot

7
00:00:13,000 --> 00:00:15,000
which was created with help of Vite,

8
00:00:15,000 --> 00:00:18,000
and which I simply cleaned up a little bit

9
00:00:18,000 --> 00:00:21,000
so that we only have a few files in there.

10
00:00:21,000 --> 00:00:22,000
And this is now

11
00:00:22,000 --> 00:00:24,000
the starting snapshot we'll use to

12
00:00:24,000 --> 00:00:26,000
dive into React and learn about

13
00:00:26,000 --> 00:00:27,000
these React essentials.

14
00:00:28,000 --> 00:00:30,000
Now to briefly get you started with

15
00:00:30,000 --> 00:00:32,000
the project we have here.

16
00:00:32,000 --> 00:00:35,000
A project created with Vite in this case.

17
00:00:35,000 --> 00:00:38,000
In the end, what I do have here is

18
00:00:38,000 --> 00:00:41,000
an index HTML file which isn't too important for us here

19
00:00:41,000 --> 00:00:45,000
because we won't add any code to that.

20
00:00:45,000 --> 00:00:47,000
Instead, we will work in the source folder

21
00:00:47,000 --> 00:00:48,000
where we have some

22
00:00:48,000 --> 00:00:50,000
.jsx files.

23
00:00:50,000 --> 00:00:53,000
And in the end these are JavaScript files

24
00:00:53,000 --> 00:00:55,000
that also support

25
00:00:55,000 --> 00:00:57,000
HTML code inside of them.

26
00:00:57,000 --> 00:00:59,000
This special syntax,

27
00:00:59,000 --> 00:00:59,000
which I mentioned

28
00:00:59,000 --> 00:01:02,000
which is not supported by browsers,

29
00:01:02,000 --> 00:01:03,000
but which is transformed

30
00:01:03,000 --> 00:01:04,000
under the hood

31
00:01:04,000 --> 00:01:06,000
by the project setup we have here

32
00:01:06,000 --> 00:01:07,000
into code

33
00:01:07,000 --> 00:01:09,000
that is supported by browsers.

34
00:01:10,000 --> 00:01:11,000
This syntax

35
00:01:11,000 --> 00:01:13,000
of having HTML

36
00:01:13,000 --> 00:01:14,000
in JavaScript is called

37
00:01:14,000 --> 00:01:16,000
JSX,

38
00:01:16,000 --> 00:01:18,000
and that's why these files have these

39
00:01:18,000 --> 00:01:21,000
special JSX extensions.

40
00:01:21,000 --> 00:01:23,000
But again, this is not supported by the browser,

41
00:01:23,000 --> 00:01:25,000
this is transformed under the hood instead.

42
00:01:27,000 --> 00:01:28,000
What's also worth noting,

43
00:01:28,000 --> 00:01:30,000
is that I have a CSS file here

44
00:01:30,000 --> 00:01:32,000
with some basic

45
00:01:32,000 --> 00:01:33,000
CSS styles

46
00:01:33,000 --> 00:01:36,000
and this file is also being imported here

47
00:01:36,000 --> 00:01:38,000
into a JavaScript

48
00:01:38,000 --> 00:01:40,000
file in the end.

49
00:01:40,000 --> 00:01:43,000
Normally this would also not work in the browser

50
00:01:43,000 --> 00:01:46,000
but this is a never feature supported by this project

51
00:01:46,000 --> 00:01:49,000
which is then transformed under the hood.

52
00:01:49,000 --> 00:01:51,000
And you can kind of see

53
00:01:51,000 --> 00:01:53,000
what it's being transformed to

54
00:01:53,000 --> 00:01:55,000
by opening up the developer tools

55
00:01:55,000 --> 00:01:56,000
in

56
00:01:56,000 --> 00:01:57,000
your browser

57
00:01:57,000 --> 00:02:01,000
for this starting snapshot website.

58
00:02:01,000 --> 00:02:03,000
And there in the head section you, for example,

59
00:02:03,000 --> 00:02:07,000
see that a bunch of scripts and styles were injected.

60
00:02:07,000 --> 00:02:09,000
For example, the styles

61
00:02:09,000 --> 00:02:10,000
that were defined

62
00:02:10,000 --> 00:02:13,000
in this extra CSS file.

63
00:02:13,000 --> 00:02:16,000
So this project setup and some tools that were installed

64
00:02:16,000 --> 00:02:18,000
as part of this project setup

65
00:02:18,000 --> 00:02:20,000
simply detected this

66
00:02:20,000 --> 00:02:21,000
CSS import,

67
00:02:21,000 --> 00:02:23,000
and therefore included this

68
00:02:23,000 --> 00:02:24,000
CSS code

69
00:02:24,000 --> 00:02:26,000
in the final website

70
00:02:26,000 --> 00:02:27,000
that's being loaded.

71
00:02:28,000 --> 00:02:29,000
You also see that,

72
00:02:29,000 --> 00:02:32,000
a JavaScript file is being loaded here

73
00:02:32,000 --> 00:02:34,000
which if you take a look at it

74
00:02:34,000 --> 00:02:36,000
upon loading this website,

75
00:02:36,000 --> 00:02:37,000
in the end

76
00:02:37,000 --> 00:02:38,000
contains the transformed

77
00:02:38,000 --> 00:02:40,000
JavaScript code

78
00:02:40,000 --> 00:02:42,000
where you no longer see

79
00:02:42,000 --> 00:02:43,000
HTML code

80
00:02:43,000 --> 00:02:45,000
as part of the application,

81
00:02:45,000 --> 00:02:46,000
but where

82
00:02:46,000 --> 00:02:49,000
you instead have some raw optimized JavaScript code,

83
00:02:49,000 --> 00:02:51,000
which in the end is responsible

84
00:02:51,000 --> 00:02:52,000
for outputting on the screen

85
00:02:52,000 --> 00:02:53,000
what we see here.

86
00:02:55,000 --> 00:02:56,000
So that's what we got.

87
00:02:56,000 --> 00:02:58,000
That's what we'll start with.

88
00:02:58,000 --> 00:02:59,000
That's this special

89
00:02:59,000 --> 00:03:00,000
JSS syntax

90
00:03:00,000 --> 00:03:02,000
which will become important

91
00:03:02,000 --> 00:03:03,000
when working with React.

92
00:03:03,000 --> 00:03:06,000
And with all of that out of the way,

93
00:03:06,000 --> 00:03:07,000
let's now take a closer look at

94
00:03:07,000 --> 00:03:09,000
the code we have

95
00:03:09,000 --> 00:03:11,000
in these two JSX files,

96
00:03:11,000 --> 00:03:12,000
because there

97
00:03:12,000 --> 00:03:14,000
we have some strange code

98
00:03:14,000 --> 00:03:16,000
which clearly seems

99
00:03:16,000 --> 00:03:18,000
to be responsible for outputting

100
00:03:18,000 --> 00:03:19,000
Hello World,

101
00:03:19,000 --> 00:03:22,000
but it probably makes sense to understand how

102
00:03:22,000 --> 00:03:24,000
these different code pieces work together

103
00:03:24,000 --> 00:03:26,000
and what's happening here.