1
00:00:01,020 --> 00:00:03,690
‫Let's now take a few minutes to look back

2
00:00:03,690 --> 00:00:05,880
‫on all the concepts that we just learned

3
00:00:05,880 --> 00:00:07,233
‫throughout this section.

4
00:00:09,240 --> 00:00:11,010
‫So first of all, we learned

5
00:00:11,010 --> 00:00:13,290
‫that components are the building blocks

6
00:00:13,290 --> 00:00:16,800
‫of any user interface in React.

7
00:00:16,800 --> 00:00:20,190
‫Now each component is a self-contained piece

8
00:00:20,190 --> 00:00:24,240
‫of the user interface, which includes its own data,

9
00:00:24,240 --> 00:00:27,930
‫its own JavaScript logic, and its own appearance.

10
00:00:27,930 --> 00:00:31,260
‫Now in practical terms, we write this appearance

11
00:00:31,260 --> 00:00:35,130
‫using a declarative syntax that's called JSX

12
00:00:35,130 --> 00:00:38,640
‫and it's this block of JSX that ultimately

13
00:00:38,640 --> 00:00:41,850
‫gets returned from each component.

14
00:00:41,850 --> 00:00:44,880
‫And this JSX is what's going to describe

15
00:00:44,880 --> 00:00:47,430
‫exactly what the user will see

16
00:00:47,430 --> 00:00:50,520
‫on the screen when they use the application.

17
00:00:50,520 --> 00:00:54,720
‫And any piece of JSX can contain some markup,

18
00:00:54,720 --> 00:00:57,750
‫basically in the form of HTML.

19
00:00:57,750 --> 00:01:01,620
‫It can contain some CSS, which in this section

20
00:01:01,620 --> 00:01:04,830
‫we wrote using the style prop.

21
00:01:04,830 --> 00:01:08,580
‫So we used the style prop and then passed an object

22
00:01:08,580 --> 00:01:12,600
‫in there, which contained some CSS code.

23
00:01:12,600 --> 00:01:16,860
‫And also usually the JSX contains some JavaScript

24
00:01:16,860 --> 00:01:19,920
‫inside curly braces, which I like to call

25
00:01:19,920 --> 00:01:22,410
‫entering the JavaScript mode.

26
00:01:22,410 --> 00:01:25,650
‫So this one is basically like writing JavaScript

27
00:01:25,650 --> 00:01:28,680
‫right inside of HTML.

28
00:01:28,680 --> 00:01:32,460
‫So this is basically everything that a component contains

29
00:01:32,460 --> 00:01:35,760
‫or can contain, and it is how we write it,

30
00:01:35,760 --> 00:01:38,430
‫so again, using JSX.

31
00:01:38,430 --> 00:01:41,790
‫Now a complete application is usually composed out

32
00:01:41,790 --> 00:01:45,240
‫of many different components, which are then organized

33
00:01:45,240 --> 00:01:48,810
‫into a component tree like this one.

34
00:01:48,810 --> 00:01:51,000
‫So in a component tree like this,

35
00:01:51,000 --> 00:01:53,070
‫the components that are at the top

36
00:01:53,070 --> 00:01:57,930
‫have included or used the components that are below them,

37
00:01:57,930 --> 00:02:01,110
‫which makes them their parent component.

38
00:02:01,110 --> 00:02:03,570
‫So the components at the top, for example here,

39
00:02:03,570 --> 00:02:06,870
‫the app component is the parent component of header,

40
00:02:06,870 --> 00:02:08,940
‫menu, and footer.

41
00:02:08,940 --> 00:02:12,270
‫And so these three, so header, menu, and footer,

42
00:02:12,270 --> 00:02:15,060
‫are the child component of app.

43
00:02:15,060 --> 00:02:18,540
‫And at the same time, of course, the menu is the parent

44
00:02:18,540 --> 00:02:21,270
‫component of all the pizza components.

45
00:02:21,270 --> 00:02:25,470
‫And the footer is the parent component of order.

46
00:02:25,470 --> 00:02:28,830
‫So obviously a component can be a parent

47
00:02:28,830 --> 00:02:31,080
‫and a child at the same time.

48
00:02:31,080 --> 00:02:34,380
‫Now in order to share data between components,

49
00:02:34,380 --> 00:02:36,780
‫parent components can pass data

50
00:02:36,780 --> 00:02:41,010
‫into a direct child component using props.

51
00:02:41,010 --> 00:02:43,710
‫So for each value that we want to pass down,

52
00:02:43,710 --> 00:02:48,710
‫we simply define one prop, which is short for property.

53
00:02:48,810 --> 00:02:53,810
‫And so using props, we can configure components as we wish.

54
00:02:54,270 --> 00:02:56,010
‫For example, in this application,

55
00:02:56,010 --> 00:02:59,070
‫we rendered many different pizzas by creating

56
00:02:59,070 --> 00:03:01,530
‫one pizza component and then passing

57
00:03:01,530 --> 00:03:05,100
‫in different pizza objects into that component,

58
00:03:05,100 --> 00:03:08,673
‫so rendering it multiple times with a different prop.

59
00:03:09,540 --> 00:03:11,610
‫Now it's very important to understand

60
00:03:11,610 --> 00:03:15,150
‫that props can only be passed down the tree,

61
00:03:15,150 --> 00:03:17,580
‫so only from parents to children,

62
00:03:17,580 --> 00:03:20,250
‫but never the other way around.

63
00:03:20,250 --> 00:03:22,440
‫Now something that we do all the time

64
00:03:22,440 --> 00:03:25,980
‫in React applications is to render multiple components

65
00:03:25,980 --> 00:03:29,250
‫of the same type by looping over an array.

66
00:03:29,250 --> 00:03:32,970
‫And so this is what we call creating a list.

67
00:03:32,970 --> 00:03:35,010
‫So in the app that we just built,

68
00:03:35,010 --> 00:03:38,010
‫we created a list of pizzas by looping

69
00:03:38,010 --> 00:03:42,600
‫over the pizza array using the JavaScript map method.

70
00:03:42,600 --> 00:03:46,830
‫And so in React, there is nothing special to create lists.

71
00:03:46,830 --> 00:03:49,170
‫All we need to know is the map method

72
00:03:49,170 --> 00:03:52,050
‫that's available on all JavaScript arrays.

73
00:03:52,050 --> 00:03:54,510
‫So our JavaScript knowledge is more

74
00:03:54,510 --> 00:03:56,940
‫than enough to loop over an array

75
00:03:56,940 --> 00:04:00,843
‫in order to create lists of components of the same type.

76
00:04:01,770 --> 00:04:06,300
‫And finally, we also learned about conditional rendering.

77
00:04:06,300 --> 00:04:09,330
‫So that's another thing that we do all the time

78
00:04:09,330 --> 00:04:11,700
‫in order to render components only when

79
00:04:11,700 --> 00:04:14,370
‫certain conditions are met.

80
00:04:14,370 --> 00:04:16,620
‫And just like rendering lists,

81
00:04:16,620 --> 00:04:19,020
‫we can conditionally render components

82
00:04:19,020 --> 00:04:22,650
‫by using common JavaScript tools that we already know,

83
00:04:22,650 --> 00:04:26,460
‫for example, the end operator, the ternary operator,

84
00:04:26,460 --> 00:04:30,780
‫and also using multiple returns, and that's it.

85
00:04:30,780 --> 00:04:33,270
‫So these are the more practical things

86
00:04:33,270 --> 00:04:35,730
‫that we just learned and that we applied

87
00:04:35,730 --> 00:04:38,880
‫to the project that we have been building.

88
00:04:38,880 --> 00:04:41,610
‫We also learned some more theoretical stuff

89
00:04:41,610 --> 00:04:43,950
‫like the difference between imperative

90
00:04:43,950 --> 00:04:46,020
‫and declarative approaches.

91
00:04:46,020 --> 00:04:48,780
‫We learned about separation of concerns.

92
00:04:48,780 --> 00:04:52,740
‫We learned exactly about why we cannot mutate props,

93
00:04:52,740 --> 00:04:55,980
‫which is another important thing that we learned.

94
00:04:55,980 --> 00:04:59,940
‫And yeah, we also learned a bunch more theoretical stuff

95
00:04:59,940 --> 00:05:02,430
‫that I'm not going to go into right now.

96
00:05:02,430 --> 00:05:04,980
‫So you can always re-watch those lectures

97
00:05:04,980 --> 00:05:06,450
‫if you're interested in.

98
00:05:06,450 --> 00:05:09,840
‫Here, I just wanted to summarize the practical aspects

99
00:05:09,840 --> 00:05:14,010
‫of everything that we just did in this section.

100
00:05:14,010 --> 00:05:15,810
‫So I hope that this was helpful.

101
00:05:15,810 --> 00:05:18,180
‫And now to round off this section,

102
00:05:18,180 --> 00:05:20,340
‫there is one final coding challenge

103
00:05:20,340 --> 00:05:23,820
‫waiting for you where we will just finish the developer

104
00:05:23,820 --> 00:05:27,450
‫profile card that we started initially.

105
00:05:27,450 --> 00:05:29,823
‫So hopefully I see you there very soon.