1 00:00:02,080 --> 00:00:03,240 So let's now dive 2 00:00:03,240 --> 00:00:06,330 into all these important basics and fundamentals. 3 00:00:06,330 --> 00:00:09,040 And for that keep in mind what you learned 4 00:00:09,040 --> 00:00:11,500 in the first course section. 5 00:00:11,500 --> 00:00:16,500 React is a JavaScript library for building user interfaces. 6 00:00:17,040 --> 00:00:20,520 And we also learned that of course in general, 7 00:00:20,520 --> 00:00:22,940 HTML, CSS and JavaScript 8 00:00:22,940 --> 00:00:26,210 are about building user interfaces as well. 9 00:00:26,210 --> 00:00:29,810 But I also mentioned in the first course section 10 00:00:29,810 --> 00:00:32,310 that we use libraries like React 11 00:00:32,310 --> 00:00:37,310 because that simplifies building those user interfaces. 12 00:00:37,600 --> 00:00:39,020 We don't need it, 13 00:00:39,020 --> 00:00:42,450 you can build any website without React 14 00:00:42,450 --> 00:00:45,770 but if you are having more complex user interfaces 15 00:00:45,770 --> 00:00:48,370 like the one we have in his expense tracker. 16 00:00:48,370 --> 00:00:50,470 If you use something like React 17 00:00:50,470 --> 00:00:53,110 it all of a sudden becomes much easier 18 00:00:53,110 --> 00:00:55,220 to build something like this. 19 00:00:55,220 --> 00:00:58,760 You won't have to focus on all the nitty-gritty details 20 00:00:58,760 --> 00:01:01,290 and it will be less error prone 21 00:01:01,290 --> 00:01:03,060 if you use something like React 22 00:01:03,060 --> 00:01:05,110 because you will be able to focus 23 00:01:05,110 --> 00:01:07,610 on your core business logic 24 00:01:07,610 --> 00:01:09,750 that makes up your application 25 00:01:09,750 --> 00:01:12,850 instead of having to focus on the actual steps 26 00:01:12,850 --> 00:01:16,470 of updating the page when something happens somewhere. 27 00:01:16,470 --> 00:01:19,530 That's why we use libraries like React. 28 00:01:19,530 --> 00:01:22,640 And to make that job simpler for us, 29 00:01:22,640 --> 00:01:25,550 to make that work simpler for us, 30 00:01:25,550 --> 00:01:29,770 React embraces a concept called components. 31 00:01:29,770 --> 00:01:30,980 React is 32 00:01:30,980 --> 00:01:33,940 all about components. 33 00:01:33,940 --> 00:01:38,680 But of course that brings up one important question. 34 00:01:38,680 --> 00:01:42,390 What exactly is a component? 35 00:01:42,390 --> 00:01:45,710 Well, let me come back to this question in a second. 36 00:01:45,710 --> 00:01:49,250 Instead let me come back to this first sentence here 37 00:01:49,250 --> 00:01:51,170 even though we don't fully know yet 38 00:01:51,170 --> 00:01:53,270 what components are. 39 00:01:53,270 --> 00:01:56,110 Why could React be about one 40 00:01:56,110 --> 00:01:58,223 concept in its core? 41 00:01:59,180 --> 00:02:02,570 Because all user interfaces in the end 42 00:02:02,570 --> 00:02:05,860 are made up of components. 43 00:02:05,860 --> 00:02:08,120 So what could be a component then 44 00:02:08,120 --> 00:02:10,300 if it is something which is crucial 45 00:02:10,300 --> 00:02:13,343 in all user interfaces you see? 46 00:02:14,190 --> 00:02:18,170 Well, let's have a look at this finished application 47 00:02:18,170 --> 00:02:19,990 which we're going to build through out this 48 00:02:19,990 --> 00:02:22,690 and the next course sections. 49 00:02:22,690 --> 00:02:25,610 If you have a look at this user interface 50 00:02:25,610 --> 00:02:28,120 at this web application, 51 00:02:28,120 --> 00:02:32,090 you might be able to identify a couple of building blocks 52 00:02:32,090 --> 00:02:34,113 that make up this interface. 53 00:02:35,040 --> 00:02:39,753 For example, have a look as the expense items down there. 54 00:02:40,850 --> 00:02:45,220 This in the end is the same item being repeated twice here. 55 00:02:45,220 --> 00:02:49,330 It's the same item, just with different data. 56 00:02:49,330 --> 00:02:54,000 The same would be true by the way here for this chart, 57 00:02:54,000 --> 00:02:57,180 the individual bars and that chart. 58 00:02:57,180 --> 00:02:58,620 That's the same item, 59 00:02:58,620 --> 00:03:02,070 just repeated with a different label 60 00:03:02,070 --> 00:03:04,773 and a different amount of filling. 61 00:03:05,690 --> 00:03:09,600 And that is exactly what components are, 62 00:03:09,600 --> 00:03:14,570 reusable building blocks in your user interface. 63 00:03:14,570 --> 00:03:19,570 Components are in the end just a combination of HTML code, 64 00:03:19,810 --> 00:03:22,200 CSS code for styling 65 00:03:22,200 --> 00:03:26,010 and possibly JavaScript code for some logic. 66 00:03:26,010 --> 00:03:29,540 And you don't have to reuse a component 67 00:03:29,540 --> 00:03:30,880 to make it a component. 68 00:03:30,880 --> 00:03:34,670 It's just one of its traits that it is reusable. 69 00:03:34,670 --> 00:03:36,470 But on this user interface 70 00:03:36,470 --> 00:03:39,690 which you see here there would be more components 71 00:03:39,690 --> 00:03:44,010 than just these expense items and these chart bars. 72 00:03:44,010 --> 00:03:47,350 The item here at the top would be a component, 73 00:03:47,350 --> 00:03:50,440 if we expanded this would then be 74 00:03:50,440 --> 00:03:53,510 more elements inside of that component. 75 00:03:53,510 --> 00:03:55,940 That filter here would be a component, 76 00:03:55,940 --> 00:03:58,430 the overall chart would be a component, 77 00:03:58,430 --> 00:04:01,810 the overall list of items would be a component. 78 00:04:01,810 --> 00:04:03,180 But inside of the items 79 00:04:03,180 --> 00:04:04,860 we could say this 80 00:04:04,860 --> 00:04:05,880 date 81 00:04:05,880 --> 00:04:08,480 item here would be a separate component, 82 00:04:08,480 --> 00:04:11,020 the amount here would be a component. 83 00:04:11,020 --> 00:04:12,490 We can really split it up 84 00:04:12,490 --> 00:04:16,140 in a very granular way if we want to. 85 00:04:16,140 --> 00:04:18,820 We got all these individual building blocks 86 00:04:18,820 --> 00:04:23,053 which we combine together to build a user interface. 87 00:04:24,210 --> 00:04:25,650 And in the end of course 88 00:04:25,650 --> 00:04:28,590 all user interfaces can be split up 89 00:04:28,590 --> 00:04:30,290 into components like this. 90 00:04:30,290 --> 00:04:34,090 Into containers and buttons and input elements 91 00:04:34,090 --> 00:04:37,350 and product items, which are being output. 92 00:04:37,350 --> 00:04:38,620 Something like that. 93 00:04:38,620 --> 00:04:42,780 All user interfaces on all kinds of web applications 94 00:04:42,780 --> 00:04:46,430 can be split up into components like this. 95 00:04:46,430 --> 00:04:48,920 And React is all about these components. 96 00:04:48,920 --> 00:04:51,530 You build these individual components 97 00:04:51,530 --> 00:04:56,030 and then you tell React how to compose them together 98 00:04:56,030 --> 00:04:59,210 into a final user interface. 99 00:04:59,210 --> 00:05:03,160 And React embraces this concept of components 100 00:05:03,160 --> 00:05:06,170 because of that reusability aspect 101 00:05:06,170 --> 00:05:10,480 and because it allows us to separate our concerns. 102 00:05:10,480 --> 00:05:13,250 Both concepts are important concepts 103 00:05:13,250 --> 00:05:15,350 in programming in general. 104 00:05:15,350 --> 00:05:20,190 Having reusable building blocks helps us avoid repetition, 105 00:05:20,190 --> 00:05:23,000 and in programming in general it is good 106 00:05:23,000 --> 00:05:25,770 if we don't repeat ourselves. 107 00:05:25,770 --> 00:05:28,460 Having a separation of concerns helps us 108 00:05:28,460 --> 00:05:33,250 with keeping our code base small and manageable 109 00:05:33,250 --> 00:05:35,570 instead of having one large file 110 00:05:35,570 --> 00:05:37,900 which holds all the HTML code 111 00:05:37,900 --> 00:05:40,050 and all the JavaScript logic. 112 00:05:40,050 --> 00:05:42,640 For the entire user interface 113 00:05:42,640 --> 00:05:45,900 we have small separated units, 114 00:05:45,900 --> 00:05:48,790 these components where every component 115 00:05:48,790 --> 00:05:50,710 has one clear 116 00:05:50,710 --> 00:05:53,060 concern, one focus, 117 00:05:53,060 --> 00:05:55,920 one specific task it focuses us on. 118 00:05:55,920 --> 00:05:59,900 And if we split that code across multiple files then 119 00:05:59,900 --> 00:06:02,770 as we are going to do it though out this course 120 00:06:02,770 --> 00:06:05,420 then we'll have small pieces of code 121 00:06:05,420 --> 00:06:07,843 which are easy to manage and maintain. 122 00:06:08,860 --> 00:06:11,360 And these of course are not concepts 123 00:06:11,360 --> 00:06:14,130 or ideas React invented. 124 00:06:14,130 --> 00:06:17,610 Instead if we take a step back from React 125 00:06:17,610 --> 00:06:20,960 and we think about programming in general, 126 00:06:20,960 --> 00:06:24,380 then of course in any programming language 127 00:06:24,380 --> 00:06:26,950 and no matter what you are building 128 00:06:26,950 --> 00:06:29,530 you tend to work with functions 129 00:06:29,530 --> 00:06:33,860 and you split your code into multiple small functions 130 00:06:33,860 --> 00:06:36,060 which then may call each other 131 00:06:36,060 --> 00:06:38,960 to outsource logic into a function, 132 00:06:38,960 --> 00:06:40,710 to separate concerns 133 00:06:40,710 --> 00:06:42,320 and to be able to execute 134 00:06:42,320 --> 00:06:45,380 the same code multiple times if you need to. 135 00:06:45,380 --> 00:06:49,720 And React just picks up that concept of functions 136 00:06:49,720 --> 00:06:52,990 and of separating code across functions 137 00:06:52,990 --> 00:06:55,500 and translates it to the 138 00:06:55,500 --> 00:06:58,220 front end web application world 139 00:06:58,220 --> 00:07:01,810 where we built an entire user interface 140 00:07:01,810 --> 00:07:05,230 by splitting our code into multiple components 141 00:07:05,230 --> 00:07:08,603 which we then can mix and match as we need to.