1 00:00:01,110 --> 00:00:02,700 ‫Let's start this section 2 00:00:02,700 --> 00:00:06,270 ‫with the conceptual difference between React components, 3 00:00:06,270 --> 00:00:10,020 ‫Component instances, and React elements. 4 00:00:10,020 --> 00:00:12,330 ‫Knowing about this difference will hopefully 5 00:00:12,330 --> 00:00:15,450 ‫make it a bit more clear what actually happens 6 00:00:15,450 --> 00:00:18,330 ‫with your components as you use them. 7 00:00:18,330 --> 00:00:21,870 ‫And also this is a pretty common interview question. 8 00:00:21,870 --> 00:00:25,653 ‫And so this topic is definitely worth learning about. 9 00:00:27,150 --> 00:00:30,903 ‫And let's begin by taking another look at components. 10 00:00:31,740 --> 00:00:34,290 ‫So components are what we write 11 00:00:34,290 --> 00:00:38,340 ‫in order to describe a piece of the user interface. 12 00:00:38,340 --> 00:00:42,030 ‫And the component is just a regular JavaScript function, 13 00:00:42,030 --> 00:00:45,780 ‫but it's a function that returns React elements. 14 00:00:45,780 --> 00:00:48,180 ‫So it returns an element tree. 15 00:00:48,180 --> 00:00:52,653 ‫And we usually write these elements using the JSX syntax. 16 00:00:53,550 --> 00:00:57,960 ‫Now a component is a generic description of the UI. 17 00:00:57,960 --> 00:01:02,190 ‫So we can essentially think of a component as a blueprint 18 00:01:02,190 --> 00:01:05,820 ‫or a template, and it's out of this one blueprint 19 00:01:05,820 --> 00:01:09,000 ‫or template that React then creates one 20 00:01:09,000 --> 00:01:12,330 ‫or multiple component instances. 21 00:01:12,330 --> 00:01:16,350 ‫Now, React does this each time that we use the component 22 00:01:16,350 --> 00:01:18,570 ‫somewhere in our code. 23 00:01:18,570 --> 00:01:21,300 ‫For example, the tap component that we saw 24 00:01:21,300 --> 00:01:26,300 ‫in the last slide is used, so it is included three times 25 00:01:26,460 --> 00:01:28,080 ‫in this app component. 26 00:01:28,080 --> 00:01:32,370 ‫And so therefore, three instances of tap are placed 27 00:01:32,370 --> 00:01:33,720 ‫in a component tree. 28 00:01:33,720 --> 00:01:36,630 ‫So in our actual application. 29 00:01:36,630 --> 00:01:38,550 ‫Behind the scenes, this happens 30 00:01:38,550 --> 00:01:42,510 ‫because React will call the tap function three times. 31 00:01:42,510 --> 00:01:45,570 ‫So one time for each instance. 32 00:01:45,570 --> 00:01:49,710 ‫So we can say that an instance is like the actual 33 00:01:49,710 --> 00:01:53,370 ‫physical manifestation of a component living 34 00:01:53,370 --> 00:01:55,170 ‫in our componentry. 35 00:01:55,170 --> 00:01:58,920 ‫While the component itself is really just a function 36 00:01:58,920 --> 00:02:02,190 ‫that we wrote before being called. 37 00:02:02,190 --> 00:02:04,350 ‫And actually, it's each instance 38 00:02:04,350 --> 00:02:07,350 ‫that holds its own state and props 39 00:02:07,350 --> 00:02:10,980 ‫and that also has its own life cycle. 40 00:02:10,980 --> 00:02:14,520 ‫So basically, a component instance can be born, 41 00:02:14,520 --> 00:02:19,290 ‫it can live for some time until it will eventually die. 42 00:02:19,290 --> 00:02:23,040 ‫So it's a bit like a living organism really. 43 00:02:23,040 --> 00:02:27,840 ‫Now in practice, we many times just use the terms component 44 00:02:27,840 --> 00:02:31,140 ‫and component instance interchangeably. 45 00:02:31,140 --> 00:02:34,770 ‫For example, we just say component life cycle 46 00:02:34,770 --> 00:02:38,130 ‫and not component instance life cycle. 47 00:02:38,130 --> 00:02:42,480 ‫And we also say that a UI is made up of components, 48 00:02:42,480 --> 00:02:44,970 ‫not of component instances, 49 00:02:44,970 --> 00:02:46,680 ‫even though instances 50 00:02:46,680 --> 00:02:49,500 ‫would technically be more accurate. 51 00:02:49,500 --> 00:02:52,230 ‫Okay, so just keep that in mind in the future 52 00:02:52,230 --> 00:02:53,910 ‫when you read documentation 53 00:02:53,910 --> 00:02:58,440 ‫or some stack overflow post or something like that. 54 00:02:58,440 --> 00:03:01,860 ‫But anyway, as React executes the code 55 00:03:01,860 --> 00:03:04,080 ‫in each of these instances, 56 00:03:04,080 --> 00:03:08,910 ‫each of them will return one or more React elements. 57 00:03:08,910 --> 00:03:11,280 ‫So as we learned when we first talked 58 00:03:11,280 --> 00:03:16,280 ‫about JSX behind the scenes, JSX will actually get converted 59 00:03:16,710 --> 00:03:21,710 ‫to multiple React.createElement function calls. 60 00:03:21,870 --> 00:03:25,590 ‫Then as React calls these create element functions 61 00:03:25,590 --> 00:03:28,740 ‫the result will be a React element. 62 00:03:28,740 --> 00:03:32,400 ‫So a React element is basically the result 63 00:03:32,400 --> 00:03:35,760 ‫of using a component in our code. 64 00:03:35,760 --> 00:03:38,940 ‫It's simply a big immutable JavaScript object 65 00:03:38,940 --> 00:03:41,280 ‫that React keeps in memory. 66 00:03:41,280 --> 00:03:44,610 ‫And we will take a look at this later in our account. 67 00:03:44,610 --> 00:03:47,700 ‫But what is this object actually? 68 00:03:47,700 --> 00:03:51,750 ‫Well, a React element basically contains all the information 69 00:03:51,750 --> 00:03:55,320 ‫that is necessary in order to create DOM elements 70 00:03:55,320 --> 00:03:58,110 ‫for the current component instance. 71 00:03:58,110 --> 00:04:02,310 ‫And so it's this React element that will eventually 72 00:04:02,310 --> 00:04:05,340 ‫be converted to actual DOM elements, 73 00:04:05,340 --> 00:04:09,093 ‫and then painted onto the screen by the browser. 74 00:04:09,990 --> 00:04:14,990 ‫So based on all this, the DOM elements are the actual, final 75 00:04:15,450 --> 00:04:17,580 ‫and visual representation 76 00:04:17,580 --> 00:04:21,030 ‫of the components instance in the browser. 77 00:04:21,030 --> 00:04:24,000 ‫And again, it's not React elements 78 00:04:24,000 --> 00:04:26,250 ‫that are rendered to the DOM. 79 00:04:26,250 --> 00:04:28,170 ‫React elements just live 80 00:04:28,170 --> 00:04:32,160 ‫inside the React app and have nothing to do with the DOM. 81 00:04:32,160 --> 00:04:34,860 ‫They are simply converted to DOM elements 82 00:04:34,860 --> 00:04:38,283 ‫when they are painted on the screen in this final step. 83 00:04:39,360 --> 00:04:41,760 ‫Okay, so this is the journey 84 00:04:41,760 --> 00:04:45,990 ‫from writing a single component to using it multiple times 85 00:04:45,990 --> 00:04:49,260 ‫in our code as a blueprint all the way 86 00:04:49,260 --> 00:04:52,140 ‫until it's converted to a React element, 87 00:04:52,140 --> 00:04:56,370 ‫and then rendered as HTML elements into the DOM. 88 00:04:56,370 --> 00:04:59,790 ‫So I hope you found this interesting and useful, 89 00:04:59,790 --> 00:05:03,420 ‫and if you did, then let's move on to the next video, 90 00:05:03,420 --> 00:05:06,243 ‫and take a look at all this in code.