1 00:00:01,050 --> 00:00:03,870 ‫So as I have mentioned a few times already, 2 00:00:03,870 --> 00:00:06,600 ‫React is all about components, 3 00:00:06,600 --> 00:00:10,050 ‫but now let's formally learn what React components are 4 00:00:10,050 --> 00:00:12,033 ‫and why they are so important. 5 00:00:13,500 --> 00:00:17,760 ‫So components are the most fundamental concept in React, 6 00:00:17,760 --> 00:00:21,510 ‫simply because React applications are, in fact, 7 00:00:21,510 --> 00:00:24,510 ‫entirely made out of components. 8 00:00:24,510 --> 00:00:26,910 ‫So when you look at any React app, 9 00:00:26,910 --> 00:00:29,910 ‫there's nothing that is not a component 10 00:00:29,910 --> 00:00:33,810 ‫or at least not inside of some component. 11 00:00:33,810 --> 00:00:35,220 ‫Therefore, I like to say 12 00:00:35,220 --> 00:00:37,560 ‫that components are the building blocks 13 00:00:37,560 --> 00:00:40,830 ‫of any user interface in React. 14 00:00:40,830 --> 00:00:45,120 ‫In fact, basically all React does is to take components 15 00:00:45,120 --> 00:00:47,250 ‫and draw them onto a webpage, 16 00:00:47,250 --> 00:00:52,230 ‫so onto a user interface, or UI for short. 17 00:00:52,230 --> 00:00:53,670 ‫Now that sounds simple, 18 00:00:53,670 --> 00:00:57,390 ‫but it's actually the main job of React. 19 00:00:57,390 --> 00:00:58,860 ‫In more technical terms, 20 00:00:58,860 --> 00:01:02,160 ‫React renders a view for each component, 21 00:01:02,160 --> 00:01:06,420 ‫and all these views together make up the user interface. 22 00:01:06,420 --> 00:01:08,670 ‫So we can also think of a component 23 00:01:08,670 --> 00:01:12,900 ‫as being a piece of the user interface, right? 24 00:01:12,900 --> 00:01:15,540 ‫Now, one key property of components 25 00:01:15,540 --> 00:01:18,480 ‫is that each component has its own data, 26 00:01:18,480 --> 00:01:21,570 ‫JavaScript logic, and appearance. 27 00:01:21,570 --> 00:01:25,200 ‫So basically, each component describes how it works 28 00:01:25,200 --> 00:01:28,680 ‫and what it looks like, which makes them such a great way 29 00:01:28,680 --> 00:01:31,080 ‫of building user interfaces. 30 00:01:31,080 --> 00:01:34,020 ‫And speaking of building user interfaces, 31 00:01:34,020 --> 00:01:36,240 ‫based on what we have just learned, 32 00:01:36,240 --> 00:01:38,280 ‫it makes sense that in React 33 00:01:38,280 --> 00:01:41,370 ‫we build complex UIs like this one 34 00:01:41,370 --> 00:01:43,500 ‫by building multiple components, 35 00:01:43,500 --> 00:01:47,550 ‫and then combining these components like Lego pieces. 36 00:01:47,550 --> 00:01:49,800 ‫So here we can identify components 37 00:01:49,800 --> 00:01:52,680 ‫like a video player, a menu, 38 00:01:52,680 --> 00:01:55,860 ‫this questions list, and also this part 39 00:01:55,860 --> 00:01:58,860 ‫where we can refine the displayed questions. 40 00:01:58,860 --> 00:02:01,500 ‫So those are like the big components, 41 00:02:01,500 --> 00:02:04,860 ‫but we can identify many other smaller components 42 00:02:04,860 --> 00:02:06,420 ‫in this UI as well, 43 00:02:06,420 --> 00:02:09,810 ‫like for example, these filters right here. 44 00:02:09,810 --> 00:02:12,810 ‫And what you can see is that this filter is 45 00:02:12,810 --> 00:02:16,800 ‫inside the refined questions component, right? 46 00:02:16,800 --> 00:02:20,550 ‫So actually one thing that we do all the time is 47 00:02:20,550 --> 00:02:24,210 ‫to place components inside of other components, 48 00:02:24,210 --> 00:02:28,980 ‫or in other words, we nest components inside each other. 49 00:02:28,980 --> 00:02:33,330 ‫So nesting components is a key aspect of using components 50 00:02:33,330 --> 00:02:37,500 ‫in React along with component reusability. 51 00:02:37,500 --> 00:02:40,440 ‫Now, notice how we have three similar questions 52 00:02:40,440 --> 00:02:42,060 ‫in the questions list, 53 00:02:42,060 --> 00:02:45,180 ‫and so we can create one question component, 54 00:02:45,180 --> 00:02:48,450 ‫and then reuse it three times here. 55 00:02:48,450 --> 00:02:51,870 ‫Now, of course, the data for each of them is different, 56 00:02:51,870 --> 00:02:54,060 ‫but we can easily pass different data 57 00:02:54,060 --> 00:02:56,100 ‫into different question components 58 00:02:56,100 --> 00:02:58,170 ‫by using something called props, 59 00:02:58,170 --> 00:03:00,720 ‫which we're gonna talk about later. 60 00:03:00,720 --> 00:03:04,440 ‫So whenever we need some duplication in our UI, 61 00:03:04,440 --> 00:03:06,120 ‫we create a new component, 62 00:03:06,120 --> 00:03:09,570 ‫and we use it as many times as necessary. 63 00:03:09,570 --> 00:03:12,540 ‫So as you can see, one crucial skill 64 00:03:12,540 --> 00:03:14,730 ‫that you will learn throughout this course is 65 00:03:14,730 --> 00:03:19,140 ‫how to break a design like this into its components. 66 00:03:19,140 --> 00:03:21,420 ‫Now, one thing that helps with that 67 00:03:21,420 --> 00:03:24,390 ‫and with analyzing the components that we create 68 00:03:24,390 --> 00:03:27,870 ‫is a component tree like this one. 69 00:03:27,870 --> 00:03:30,030 ‫So this shows the hierarchy 70 00:03:30,030 --> 00:03:32,400 ‫that exists between the components 71 00:03:32,400 --> 00:03:34,830 ‫that make up the user interface, 72 00:03:34,830 --> 00:03:37,290 ‫and it makes it really easy to understand 73 00:03:37,290 --> 00:03:41,310 ‫how all of these components are nested inside each other 74 00:03:41,310 --> 00:03:44,670 ‫and really how they relate to one another. 75 00:03:44,670 --> 00:03:48,390 ‫We can also clearly see relationships between components, 76 00:03:48,390 --> 00:03:50,310 ‫like the refined questions 77 00:03:50,310 --> 00:03:53,430 ‫being the parent component of filters, 78 00:03:53,430 --> 00:03:55,980 ‫or the other way around that filters 79 00:03:55,980 --> 00:03:59,820 ‫is a child component of refined questions. 80 00:03:59,820 --> 00:04:04,080 ‫And we use these terms, so parent and child component, 81 00:04:04,080 --> 00:04:05,790 ‫all the time in React. 82 00:04:05,790 --> 00:04:08,940 ‫And so it's important to understand what they mean. 83 00:04:08,940 --> 00:04:12,540 ‫And so a component tree like this is perfect to understand 84 00:04:12,540 --> 00:04:16,260 ‫these kinds of relationships between components, 85 00:04:16,260 --> 00:04:18,540 ‫and I think that this is all you need 86 00:04:18,540 --> 00:04:21,390 ‫to know about components for now. 87 00:04:21,390 --> 00:04:24,780 ‫We will go really deep into some important concepts 88 00:04:24,780 --> 00:04:27,480 ‫like reusability later, but for now, 89 00:04:27,480 --> 00:04:31,023 ‫let's start to put some of these concepts into practice.