1
00:00:02,230 --> 00:00:08,440
Now in this refresher course module here, we'll not write a complex React app because that's simply

2
00:00:08,440 --> 00:00:10,600
not the idea of this module.

3
00:00:10,600 --> 00:00:15,180
We will write a realistic app in the main module later in this course

4
00:00:15,190 --> 00:00:18,830
after this module here where we will work on the course project.

5
00:00:18,880 --> 00:00:24,580
So that's just a refresher here and I focus on the core React elements therefore and not on building

6
00:00:24,580 --> 00:00:26,210
an amazing application.

7
00:00:26,560 --> 00:00:32,050
So, React is all about components and therefore typically we split our app in components.

8
00:00:32,050 --> 00:00:38,740
Now let's start without splitting it though and instead of outputting a h1 tag, here in app, I will

9
00:00:38,740 --> 00:00:43,960
use a div let's say and in that div, let's add more HTML code.

10
00:00:44,050 --> 00:00:50,180
I'm saying HTML here, of course it's jsx but it is translated to HTML, to DOM nodes in the end, 

11
00:00:50,190 --> 00:00:50,920
right

12
00:00:50,980 --> 00:00:52,760
but it is jsx.

13
00:00:53,020 --> 00:01:00,840
So here, we could have a h2 tag where we say course goals and below that, we want to have a list, an

14
00:01:00,840 --> 00:01:03,680
unordered list of our course goals and there,

15
00:01:03,690 --> 00:01:13,560
a goal could be that we want to finish the course, that we want to learn all about the course

16
00:01:17,240 --> 00:01:30,840
main topic and that we want to let's say help other students in the course Q&A section and that could

17
00:01:30,840 --> 00:01:32,100
be some goals.

18
00:01:32,250 --> 00:01:34,160
Now a very trivial application,

19
00:01:34,230 --> 00:01:40,680
now I don't have any special spectacular styling here which is why we save that and we get this output.

20
00:01:40,680 --> 00:01:47,340
Now I will add some styling and for that I will add an app.css file here and import that file into

21
00:01:47,340 --> 00:01:48,420
the Javascript file,

22
00:01:48,420 --> 00:01:53,940
this of course is not possible in vanilla Javascript but because of that under the hood tooling which

23
00:01:53,970 --> 00:02:00,000
in the end analyzes our files and then transforms the code, this is possible and this is simply transformed

24
00:02:00,000 --> 00:02:03,780
to inject this CSS code into the HTML file as well.

25
00:02:04,650 --> 00:02:12,690
Now here, I'll give this a CSS class and there is one special thing, the class attribute like this doesn't

26
00:02:12,690 --> 00:02:13,140
exist

27
00:02:13,140 --> 00:02:19,930
in jsx because class is a keyword in Javascript, so it is class name and this is how you add CSS

28
00:02:19,930 --> 00:02:22,130
classes to elements in jsx.

29
00:02:22,230 --> 00:02:29,290
This also of course is kind of a proof or reminds you of the fact that this is not HTML but HTMLish

30
00:02:29,290 --> 00:02:40,230
looking syntax. I'll name this class goal list here and now in here, we can define some styles for

31
00:02:40,230 --> 00:02:45,850
the goal list here and I will simply set list style to none here,

32
00:02:45,850 --> 00:02:52,820
remove a margin or give it a margin of 2rem top and bottom and a padding of 0

33
00:02:53,350 --> 00:02:57,960
and on every goal list item, I will add a margin of 1rem

34
00:02:57,960 --> 00:03:00,260
top and bottom, 0 to left and right

35
00:03:00,460 --> 00:03:03,040
and then simply a border of 1 pixel solid

36
00:03:03,040 --> 00:03:09,550
and then this grayish color here and a padding of 1rem and this is very simple styling because

37
00:03:09,550 --> 00:03:15,890
I don't want to spend a lot of time on writing CSS styles here. Now maybe one adjustment,

38
00:03:16,420 --> 00:03:20,190
let's actually give the list a margin of 2rem in all directions.

39
00:03:20,230 --> 00:03:24,630
Now we have this list of our goals, to adjust the course goals here at the top,

40
00:03:24,640 --> 00:03:35,990
I will also give this div a class name of course goals and then in the CSS file, maybe at the very top,

41
00:03:36,100 --> 00:03:41,610
we can style course goals and there, the h2 tag to be aligned in the center,

42
00:03:41,620 --> 00:03:43,360
just like that. Now

43
00:03:43,390 --> 00:03:47,650
again, very huge goals but that is OK for this course here,

44
00:03:47,650 --> 00:03:51,410
we're just practicing React. So we got these course goals here,

45
00:03:51,430 --> 00:03:52,420
awesome,

46
00:03:52,420 --> 00:03:55,180
this of course is a very simple markup.

47
00:03:55,420 --> 00:04:01,480
Now what you often what do in React as you would split this into more components, you would for example

48
00:04:01,540 --> 00:04:08,290
outsource this list into a separate component to keep every component on its own relatively lean and

49
00:04:08,290 --> 00:04:10,040
focused on one task.

50
00:04:10,180 --> 00:04:18,580
For that you can add a components subfolder here in the source folder and in there, I will add a

51
00:04:19,030 --> 00:04:20,790
GoalList.js file,

52
00:04:20,830 --> 00:04:23,620
this will hold my goal list component.

53
00:04:23,620 --> 00:04:27,920
Now to create such a new component, we first of all have to import React from React

54
00:04:27,940 --> 00:04:33,830
otherwise we can't use this jsx syntax and then I mentioned that a component is a function

55
00:04:33,880 --> 00:04:43,730
and by the way you can also create it with the function keyword or with the function expression or with

56
00:04:43,730 --> 00:04:49,370
the arrow function syntax I used before, which is the syntax I will use here but that is not a must do.

57
00:04:49,430 --> 00:04:52,630
And then here I export my goal list like this

58
00:04:52,760 --> 00:04:59,420
and now in here, I return this unordered list. So I'll cut it here and then add it

59
00:04:59,430 --> 00:05:05,070
here as a return value and if I reformat that, you see automatically these parentheses are added around

60
00:05:05,070 --> 00:05:08,940
it so that this can be nicely formatted across multiple lines,

61
00:05:08,940 --> 00:05:14,730
otherwise this would not be valid Javascript. So this, with the parentheses it is because then Javascript

62
00:05:14,730 --> 00:05:17,680
knows that this block belongs together.

63
00:05:17,730 --> 00:05:20,560
So now we have the goal list in here and in app.js,

64
00:05:20,590 --> 00:05:24,930
we can now import our goal list component,

65
00:05:24,930 --> 00:05:29,730
you can name this here however you want, doesn't have to be the same name as under which you export it

66
00:05:29,740 --> 00:05:35,460
here, only important thing is that it has to start with an uppercase character here in app.js

67
00:05:36,060 --> 00:05:39,680
and I import it from the components folder and there from goal list

68
00:05:39,780 --> 00:05:43,590
and as I mentioned earlier, you can omit the file extension here,

69
00:05:43,620 --> 00:05:52,190
it's not required and then here you use goal list like a regular jsx element, like a regular HTML

70
00:05:52,230 --> 00:05:53,310
element you could say

71
00:05:53,310 --> 00:05:58,500
But since we have no content between the opening and closing tag, we can and we have to write a self

72
00:05:58,500 --> 00:05:59,760
closing tag here,

73
00:05:59,760 --> 00:06:01,040
this would not be allowed,

74
00:06:01,050 --> 00:06:06,990
you always have to close tags in jsx. So this would now be my goal list component and therefore

75
00:06:06,990 --> 00:06:14,580
if we save this, we see the same output as before. We also get the same styling because styles here are

76
00:06:14,640 --> 00:06:16,560
always applied globally,

77
00:06:16,560 --> 00:06:22,260
even if you import them into a specific component file and still it is a good practice to setup the

78
00:06:22,260 --> 00:06:26,520
styles in the CSS file next to the component they belong to,

79
00:06:26,520 --> 00:06:28,830
hence I will add a GoalList.css file,

80
00:06:29,040 --> 00:06:36,680
add my goal list styles there and import that GoalList.css file into the GoalList.js file.

81
00:06:36,720 --> 00:06:41,880
This is not a must do but it makes it easy to find the styles that belong to this component,

82
00:06:41,880 --> 00:06:47,430
keep in mind that styles are not automatically scoped to a component though, the normal CSS rules are

83
00:06:47,430 --> 00:06:49,800
applied because all the CSS files,

84
00:06:49,800 --> 00:06:54,960
no matter where you import them, are applied globally to your entire page.

85
00:06:54,960 --> 00:06:58,050
With that though, we're back to the same result as before.

86
00:06:58,050 --> 00:06:59,230
So why did we do that

87
00:06:59,230 --> 00:07:02,280
then? Why do we split this up if we have the same result as before?